指令是Vue中最常用的一项功能，它带有v-前缀。指令的主要职责就是当表达式的值发生改变时，相应的将某些行为应用到DOM上。
注意：数据驱动DOM是Vue的核心理念，我们无需主动操作DOM，只需要维护好数据，DOM的事vue会自动帮我们处理。
常见的指令有v-on、v-bind、v-model、v-html、v-for，下面我们结合具体的代码来一块学习一下。
v-on：用于绑定原生的动作，如click、move、doubeClick ；
v-for：用于数组或者对象的循环；
v-html：将字符串进行html解析（对于viewmodel返回的数据默认都是作为字符串直接展示的）；
v-bind：绑定模板元素的属性，如class、style
v-model：表单元素的双向绑定
v-if/v-else-if/v-else：控制元素的展现
v-show：通过设置元素的display:none/block/inline来控制元素的展现/隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>指令</title> </head> <body> <div id="app1"> <p> The people list is below: </p> <!--v-for--> <template v-for="people in peoples"> <span>Name ： {{people.name}}</span><br> <!--vue支持单表达式，但不支持语句和流程控制--> <span>age ： {{people.age + 1}} </span><br> <span>sex ： v-if:"" </span><br> <span>phone ： {{people.phone}}</span><br> </template> <!--v-html--> <div v-html="html"> <!--这种写法会以字符串形式输出html标签，而不会进行解析--> <!-- {{html}} --> </div> <!-- v-on --> <div> <p v-on:click="click">Click Me</p> <!-- 也可以使用语法糖简写 --> <!-- <p @click="click">Click Me</p> --> </div> <!-- v-models --> <span> My name is {{username}}</span> <input name="username" v-model="username" placeholder="please input you name"></input> <!--v-bind--> <div v-bind:class="classStyle"> <!-- 语法糖简写 --> <!-- <div :class="classStyle"> --> <span>v-bind learning</span> </div> </div> </body> <style type="text/css"> .active { color: red; font-size : 18px; text-align: center; } </style> <!--这里是以CDN引入的方式加载的vue.js--> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el : "#app1", //指定绑定的DOM元素 data : { classStyle : "active", html : "<h1 style='color:red'>DEMO</h1>", username : "Vue", peoples : [ { //设置data属性值 name : "xiaoming", sex : 'male', phone : "133xxx", age : 22 }, { //设置data属性值 name : "xiaohong", sex : 'female', phone : "152xxx", age : 22 }, ] }, methods : { //设置方法属性 click : function() { alert('this is click function'); } } }) </script> </html>代码很简单，就无需解释了吧？
再次重申一点：数据驱动DOM是Vue的核心理念，我们无需主动操作DOM，只需要维护好数据，DOM的事vue会自动帮我们处理。
手动操作DOM是使用JS/Jquery时候做的事情，你现在已经进化到Vue了，不要退化了哈。
Vue.js学习系列 -- 基础知识了解
Vue学习系列 -- vue生成周期了解
Vue学习系列 -- 常见事件/指令学习
Vue学习系列 -- 计算属性
