常用指令

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绑定 中介绍