常用指令
v-model指令
该指令用于数据的双向绑定，即通过input text文本框，和Vue进行双向的显示。
一般用于表单元素。
只需要这样编写挂载目标：
<div id="app"> <input type="text" v-model="message"/><br/> 文本框的内容为:{{message}}</div>Vue实例的内容跟上节一样不用变。
通过对文本框的输入，Vue实例会自动解析并绑定到{{message}}进行渲染。
v-model为Vue的内部指令，到后面我们是可以指令的。
v-for指令
该指令，顾名思义，使用来循环的。
我们通过，手动编写和循环介绍:
1.首先在Vue实例的data选项中建立数组
data:{ arr:['51CTO','走着路','Vue','v-for']}2.然后再div中编写
<div id="app"> <ol> <li>51CTO博客</li> <li>走着路</li> <li>Vue</li> <li>v-for</li> </ol> <hr/> <ul> <li v-for="val in arr">{{val}}</li> </ul></div>ol是手动写的有序列表，下面的ul是我们通过v-for指令的无序列表。运行可看到显示成功。
但如果想要索引和值，那么修改:
<li v-for='(val,key) in arr'>{{key}}={{val}}</li>即可,注意，括号里val在前，而模板显示时时，key在前。需注意。
v-on指令
用于绑定事件的,类似onclick,onblur等等。
用法：v-on:事件="函数"
既然使用事件，那么就要有一个新的选项methods来制定方法。
例如：
<div id='app'> <button v-on:click="sayHi()">点击方法，sayHi</button> <button @mouseover='mousevoer()'>鼠标经过</button></div><script> var vm = new Vue({ el:'#app', data:{ arr:['51CTO','走着路','Vue','v-for'] }, methods:{ sayHi:function(){ console.log('HelloWorld'); }, mousevoer(){ console.log('mouseover'); } } })</script>然后，打开控制台，点击按钮，控制台就会显示HelloWorld，点击多次，前面会有数字显示次数。
此外还可以通过对象语法来编写事件:
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>此方式可以一次定义多个事件，在Vue实例的mothods选项中如平常一样编写。
v-on指令可以简写为@
v-once指令
用于只绑定一次
<input type="text" v-model="message"/><br/><h2 v-once>{{message}}</h2><h3>{{message}}</h3>尽管v-model绑定message如何更改，message值总会变，但是h2通过v-once指令，它却只能显示一次，即'HelloWorld'这个初始绑定。而h3却始终动态渲染。
其余常用的v-if,v-show在 条件渲染 中介绍
v-bind在 Class与Style绑定 中介绍
随时随地看视频
