VUE基础部分学习总结

前言：

         使用vue与使用很多普通js插件是差不多的，首先是new一个对象，传递一些参数,参数都是键值对。那么搞明白里边所有参数的用法基本上就算入门了。

首先列一下小目录：

1.vue对象里的所有属性及作用

2.vue 内置属性及作用

3.vue 内置几个内置模块的作用

4.vue 内置事件及作用

5.其他

一、vue对象里的所有属性及作用：

[code]new Vue({

//指定绑定的元素
el:'#app',

//组件模板，指定此对象要渲染的dom内容，为空则渲染el属性绑定的元素
template:'',

//据说是最好将data数据写进函数的返回值中，data中主要存放实例中会用到的所有数据
data:function(){
return {
msg:'Hello Vue'
}
},

//存放实例中需要用到的方法，通过事件或其他方式绑定key即可实现调用的效果
methods:{
alertMsg:function(){

},
removeDom:function(){
}
},

//用来接收并保存父模块传递过来的参数，有父组件才有意义
props:['todo'],

//挂载子组件,挂载了之后，就可以直接把Vlabel在template中或el中直接当成一个元素使用
components:{
'Vlabel':label,
Vp
},

//计算属性，监控非data属性中的数据数据变化,默认只有get，需要时可以使用set
computed:{
'getHelloWord':function(){},

'helloWord':{
get:function(){},
set:function(newValue){}
}
},

//监控实例中data属性中数据的变化
watch:{
'msg':function(){
this.msg=this.msg+' 666';
}
},

//过滤器，使用方法：msg|capitalize
filters:{
capitalize:function(value){
this.msg=this.msg+' 过滤器添加的文字后缀'
}
},

//渲染函数，创建虚拟DOM  待掌握
render：{},

/*以下是钩子函数，实例化的生命周期的每个阶段触发不同的钩子函数，与事件类似*/

//vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
beforeCreadted：function(){},

//vue实例的数据对象data有了，$el还没有
created:function(){},

//vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
beforeMount:function(){},

//vue实例挂载完成，data.filter成功渲染
mounted:function(){},

//data更新之前触发
beforeUpdate:function(){},

//data更新时触发
updated:function(){},

//组件销毁时触发
beforeDestroy:function(){},

//组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
destroyed:function(){},
});

二、vue操控dom的属性及作用

v-text:绑定文本到元素

v-html:绑定html文本到元素

v-once:规定实例只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过。

v-bind(:):绑定数据到属性值中，示例：:class="btn",btn是data中的一个数据。

v-model:双向绑定数据，一般仅对有value属性的表单控件有效。修饰符：

• .

  number 将输入的值转化为数值类型

• .

  trim 自动过滤前后空格

• .

  lazy 将同步改为在change事件再同步。

v-if:如果表达式为真则加载该元素，否则不渲染该元素，注意：v-if是直接添加删除元素。

v-else:搭配v-if使用，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

v-else-if:v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

v-show:如果表达式为真则显示该元素，否则隐藏该元素，注意：v-show只是切换display:none和block。

v-for:循环渲染某个块，示例：v-for="(item,index) in items"。

v-pre:规定该元素不处理指令和编译。

v-cloak:规定该元素直到关联实例创建结束时才进行编译。

v-on(@):绑定元素的事件，值也可以是一个表达式，示例：@click="alertMsg"。修饰符：

• .stop

  阻止事件继续传播

• .prevent

  事件不再重载页面

• .capture

  使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

• .self

  只当在 event.target 是当前元素自身时触发处理函数

• .once

  事件将只会触发一次

• .passive

  告诉浏览器你不想阻止事件的默认行为

三、vue 内置几个内置模块的作用

1）component组件：有两个属性---is    inline-template

渲染一个‘元组件’为动态组件，按照'is'特性的值来渲染成那个组件

2）transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件

3）transition-group：作为多个元素/组件的过渡效果

4）keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

5）slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换

四、vue 内置事件

1.this.$emit的用法，主要用于数据 子传父 时

父组件 this.$emit('自定义的事件名',参数1,参数2)，子组件  v-bind:自定义事件名='fn'

2.this.$nextTick 该事件是在dom更新结束之后再执行的回调，可以在函数中获取更新后的dom

五、其他

1.声明全局组件，全剧组件不需要挂载，可直接使用。

[code]Vue.component('Vbtn',{

template:'<button><slot></solt></button>'

})

总结：

目前我能想到的基本上就这些了，只要你看过基础教程，在写代码的时候，参照我这篇博客去写，基本上就能开始上手写代码了，下一篇总结VUE的路由功能。