一、列表渲染
v-for指令
根据一组数组的选项列表进行渲染
语法:value,key in items | value,key of items
变异方法
vue提供一组方法,对数组进行操作的时候,会触发视图更新。
push() pop() shift() unshift() splice() sort() reverse()
二、事件处理器
v-on指令
用来监听DOM事件触发代码
语法:v-on:eventName="eventHandle"
指令简写:@
事件处理函数:写在methods中统一管理
事件对象:在事件处理函数中获取
事件修饰符
事件处理函数只有纯粹的逻辑判断,不处理DOM事件的细节。例如阻止冒泡,取消默认行为,判断按键。
修饰符的位置:v-on:eventName.修饰符
修饰符:.stop .prevent .capture .self .once
按键修饰符:.enter .tab .delete .esc .space .up .down .left .right
.ctrl .alt .shift .meta .键值
三、表单控件数据双向绑定
v-model指令
提供对表单元素进行双向数据绑定
<input type="text" v-model="todo"/>
上面代码将用户输入内容和vm.todo直接绑定,还可用于Radio,Checkbox,Select等。
四、动态绑定class
v-bind指令
用于动态绑定DOM元素属性,即元素属性实际值是由vm实例中的data属性提供的。
class也为元素的属性,可以使用v-bind:class
语法:v-bind:class="{className:表达式}"(表达式值为true添加className)
v-bind指令简写为:
五、条件渲染
v-show指令
根据表达式的值,用来显示或隐藏元素
语法:v-show="表达式"(表达式值为true显示)
元素会被渲染在页面中,只根据表达式的值进行css切换
六、自定义指令
除了vue内置的指令,可以自己设置指令
选项对象的directives属性
{
directives:{}
}
钩子函数
update被绑定元素所在的模板更新时调用
钩子函数中的参数:
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,包含很多属性
value:指令的绑定值
七、计算数据
模板是为了描述视图的结构,模板中放入太多逻辑会导致模板过重难以维护。
例如下面在模板中筛选未完成任务个数,这样的写法是不够好的:
<li>
{{
list.filter(function(item){
return !item.isChecked;
}).length
}}
个任务未完成</li>
在计算一个属性时,vue.js更新它的依赖列表并缓存结果,只有当其中一个依赖发生了变化,缓存的结果才无效。
语法:在选项对象中
{
...
computed:{}
}
对上面的例子的改进:
computed:{
nocheckLength:function(){
return this.list.filter(function(item){
return !item.isChecked;
}).length
}
},