指令（Directives）帶有字首 v- ，比如 v-if、v-html、v-pre 等。指令的作用是當表示式的值改變時，相應地將某些行為應用到 DOM 上，我們以 v-if 為例：

html：

<div id="app">
    <p v-if="show">顯示</p>
</div>

js：

<script>
    var app=new Vue({
       el:'#app',
       data:{
           show:true
       }
    });
</script>

這個例子中，當資料 show 的值為 true 時，會插入 p 元素，當為 false 時，則會被移除。

Vue.js 的核心理念是資料驅動 DOM，所以我們只需維護好資料，剩下的事交給 Vue 就好啦O(∩_∩)O~

1 v-bind

v-bind 會動態更新 HTML 元素上的屬性。

html：

<div id="app2">
    <a v-bind:href="url">人工智慧畫作拍賣 作品簽名是數學方程式</a><p></p>
    <img v-bind:src="imgUrl" width="50%" height="50%">
</div>

js：

var app2=new Vue({
    el:'#app2',
    data:{
        url:'http://news.163.com/photoview/00AO0001/2297321.html#p=DV5FFQOV00AO0001NOS',
        imgUrl:'http://pic-bucket.nosdn.127.net/photo/0001/2018-10-27/DV5FFQOV00AO0001NOS.jpg'
    }
});

效果：

示例中的連結與圖片的地址都做了資料繫結，當我們通過各種方式改變資料時，連結和圖片都會自動更新。

2 v-on

v-on 用於繫結事件監聽器。

html：

<div id="app3">
    <p v-if="show">顯示</p>
    <button v-on:click="hide">點選隱藏</button>
</div>

js：

var app3 = new Vue({
    el: '#app3',
    data: {
        show: true
    },
    methods: {
        hide: function () {
            this.show = false;
        }
    }
});

效果：

在 button 按鈕上，使用 v-on:click 給該元素繫結了一個點選事件。

在普通元素上，v-on 可以監聽原生的 DOM 事件，除了 click 外，還有 dblclick、keyup、mousemove 等。表示式可以是一個方法名，這些方法都寫在 Vue 例項的 methods 屬性內，並且是函式的形式，函式內的 this 指向的是當前 Vue 例項本身，因此可以直接使用 this.xxx 的形式來訪問或修改資料。

表示式也可以是一個內聯語句：

html：

<div id="app4">
    <p v-if="show">顯示</p>
    <button v-on:click="show=false">點選隱藏</button>
</div>

js：

var app4 = new Vue({
    el: '#app4',
    data: {
        show: true
    }
});

效果與上例相同。

如果要繫結的事件必須處理複雜的業務邏輯，那麼建議在 methods 裡宣告方法來實現，因為這樣可讀性更好也方便維護。

3 呼叫 methods 中定義的方法

Vue.js 代理了 methods 中定義的方法，所以我們可以像訪問 Vue 資料那樣來呼叫方法。

js：

var app5 = new Vue({
    el: '#app5',
    data: {

    },
    methods:{
        init:function (val) {
            console.log(val);
        }
    },
    mounted:function () {
        this.init('初始化操作');
    }
});
app5.init("初始化頁面");

效果：

4 指令縮寫

指令縮寫也稱為語法糖，它指的是：在不影響功能的前提下，新增某種方法實現同樣的效果，從而方便程式開發。

v-bind 和 v-on 指令都提供了縮寫。

指令	縮寫
v-bind	:
v-on	@

比如之前的例子可以縮寫為：

html：

<div id="app2">
    <a :href="url">人工智慧畫作拍賣 作品簽名是數學方程式</a>
    <p></p>
    <img :src="imgUrl" width="50%" height="50%">
</div>

<div id="app3">
    <p v-if="show">顯示</p>
    <button @click="hide">點選隱藏</button>
</div>

建議使用縮寫形式，這樣程式碼更簡潔哦O(∩_∩)O~