注：此内容摘抄自：梁灏的《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>
