注：此内容摘抄自：梁灏的《Vue.js实战》
1.指令是Vue.js模版中最常用的一项功能，它带有前缀 v- ，比如：v-if , v-html ，v-pre 等。指令的主要职责就是当其表达式的值改变时，相应的将某些行为应用到DOM上。
<div class="app1"> ???<p v-if="show">哈喽？</p></div>var app=new Vue({ ???el:‘.app1‘, ???data:{ ???????show:true ???}});当数据show的值为true时，p元素会被插入，为false时则会被移除。数据驱动DOM是Vue.js的核心理念，多疑不到万不得已时不要主动操作DOM，你只需要维护好数据，DOM的事Vue会帮你优雅的处理。
Vue.js内置了很多指令，帮我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。
2.v-bind
v-bind 的基本用途是动态更新HTML元素上的属性，比如id、class等。
<div class="app3"> ???<p v-if="show">这是一段文本</p> ???<button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button></div>var app2=new Vue({ ???el:‘.app2‘, ???data:{ ???????url:‘http://baidu.com‘, ???????????????????????????????????????
???????imgUrl:‘https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDroa7gpwEQ2AUYWjIIi8qo2d6gtwQ‘ ???}});3.v-on
v-on是用来绑定事件监听器，这样我们可以做一些交互了：
<div class="app3"> ???<p v-if="show">这是一段文本</p> ???<button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button></div>var app3=new Vue({ ???el:‘.app3‘, ???data:{ ???????show:true ???}, ???methods:{ ???????handleClose:function(){ ???????????if(this.show){ ???????????????this.show=false; ???????????}else{ ???????????????this.show=true; ???????????} ???????????????????????????????} ???}})在button按钮上，使用v-on:click给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dbclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。
表达式除了方法名，也可以直接是一个内联语句：<button v-on:click="show=flase">点击隐藏</button>
4.语法糖
语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind，可以省略v-bind，直接写一个冒号“：”
<img v-bind:src="imgUrl" ?/>可以改写成<img :src="imgUrl" ?/>
v-on可以直接用“@”来缩写
<button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>可以缩写成：<button @click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>vue.js实战学习——指令与事件
原文地址：http://www.cnblogs.com/sxdct/p/8032004.html