一、指令与事件
指令（Directives）是 Vue.js 模板中最常见的一项功能，它带有前缀 v- ，比如 v-if、v-html、v-pre 等。指令的主要指责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上，以 v-if 为例：
<div id="app">
<p v-if="show">显示这段文本</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: ture
}
})
</script>当数据 show 的值为 true 时，p 元素会被插入，为 false 时则会被移除。数据驱动 DOM 是 Vue.js 的核心理念，不到万不得已时不要主动操作 DOM ，只需要维护好数据，DOM 的事 Vue 会帮你优雅的处理。
Vue.js 内置了很多指令，帮助我们快速完成常见的 DOM 的操作，比如循环渲染、显示与隐藏等。比如，v-bind 和 v-on 。
v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id，class 等。例如：
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.github.com',
imgUrl: '/img.jpg'
}
})
</script>上述例子中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。
另一个非常重要的指令就是 v-on ，它用来绑定事件监听器，这样我们就可以做一些交互了。例如：
<div id="app">
<p v-if="show">Vue v-if指令</p>
<button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function () {
this.show = false;
}
}
})
</script>在 button 按钮上，使用 v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on 可以监听原生的 DOM 事件，除了 click 外，还有 dblclick、keyup、mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.XXX 的形式来访问或修改数据，如示例中的 this.show = false；把数据 show 修改为了 false，所以点击按钮时，文本 p 元素就被移除了。
表达式除了方法名，也可以直接是一个内联语句，上例也可以改写为：
<div id="app">
<p v-if="show">Vue v-if指令</p>
<button v-on:click="show = false">隐藏/显示</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>如果绑定的事件要处理复杂的业务逻辑，还是在 methods 里声明一个方法，这样而可读性更强也好维护。Vue.js 将 methods 里的方法也代理了，所以也可以像访问 Vue 数据那样来调用方法：
<div id="app">
<p v-if="show">Vue v-if指令</p>
<button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function () {
this.close();
},
close: function () {
this.show = false;
}
}
})
</script>在 handleClose 方法内，直接通过 this.clolse() 调用了 close() 函数，也可以在 Vue 实例外部调用：
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
init: function (text) {
console.log(text);
}
},
mounted: function () {
this.init('在初始化调用'); // 在初始化时调用
}
});
app.init('在 Vue 实例外部调用'); // 在 Vue 实例外部调用
</script>二、语法糖
语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
Vue.js 的 v-bind 和 v-on 指令都提供了语法糖，也可以说时缩写，比如 v-bind，可以省略 v-bind，直接写一个冒号 “ : ” ：
<a v-bind:href="url">链接</a>
<img v-bind:src="/imgUrl">
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src="imgUrl">v-on 可以直接用 “ @ ” 来缩写：
<button v-on:click="handleClose">隐藏/显示</button>
<!-- 缩写为 -->
<button @:click="handleClose">隐藏/显示</button>使用语法糖可以简化代码的书写。
