一、列表渲染
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
}
},