前言:
使用vue与使用很多普通js插件是差不多的,首先是new一个对象,传递一些参数,参数都是键值对。那么搞明白里边所有参数的用法基本上就算入门了。
首先列一下小目录:
1.vue对象里的所有属性及作用
2.vue 内置属性及作用
3.vue 内置几个内置模块的作用
4.vue 内置事件及作用
5.其他
一、vue对象里的所有属性及作用:
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.声明全局组件,全剧组件不需要挂载,可直接使用。
Vue.component('Vbtn',{
template:'<button><slot></solt></button>'
})
总结:
目前我能想到的基本上就这些了,只要你看过基础教程,在写代码的时候,参照我这篇博客去写,基本上就能开始上手写代码了,下一篇总结VUE的路由功能。