指令 (Directives) 是帶有 v- 前綴的特殊屬性， 職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

內(nèi)置指令

1、v-bind：響應(yīng)并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等

主要用法是綁定屬性，動(dòng)態(tài)更新HTML元素上的屬性；

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a><!-- 縮寫 --><a :href="url" rel="external nofollow" rel="external nofollow" >...</a><div :title='title'>標(biāo)題</div>var app = new Vue({  el: '#app',  data: {     url: 'www.baidu.com',　　　　title: 'bind'  },}）

2、v-on：用于監(jiān)聽DOM事件； 例如：v-on:click  v-on:keyup

順帶講一下方法與事件

2.1 @click 的表達(dá)式可以直接使用JavaScript 語句，也可以是一個(gè)在Vue 實(shí)例中methods 選項(xiàng)內(nèi)的函數(shù)名，可以在方法中傳遞參數(shù)

<!-- 完整語法 --><a v-on:click="doSomething">...</a><!-- 縮寫 --><a @click="doSomething()">...</a>　　　　//是一個(gè)方法名<p ng-if='show'>一段文本</p><button @click="show=false">點(diǎn)擊隱藏文本</button>　　//直接是一個(gè)內(nèi)聯(lián)的語句<button v-on:click="count++">Add 1</button>var app = new Vue({  el: '#app',　　data:{　　　　show: true，　　　　counter： 0　　},  methods: {    doSomething: function(){      console.log(this.title);    },  }}）

2.2方法與事件：

Vue 提供了一個(gè)特殊變量$event ，用于訪問原生DOM 事件，可以阻止事件冒泡或者阻止鏈接打開

寫一個(gè)阻止冒泡的例子：

  <div @click="stopClick1('stop1',$event)">      <div @click="stopClick2('stop2',$event)">        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>      </div>    </div>　　</div>methods:{    stopClick3: function(message, event){      console.log(message);      event.stopPropagation();  //阻止冒泡    },    stopClick2: function(message, event){      console.log(message);    },    stopClick1: function(message, event){      console.log(message);    }}

2.3修飾符：

在＠綁定的事件后加小圓點(diǎn)“．”，再跟一個(gè)后綴來使用修飾符。

上面的阻止冒泡事件，可以直接用戶修飾符的方式寫為：

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用通過$event事件再來寫了

常用的一些修飾符有：

• .stop

• .prevent

• .capture

• .self

• .once

＜ ！一阻止單擊事件冒泡一〉<a @click.stop=”handle "></a>〈！一修飾符可以串聯(lián)一〉<a @click.stop.prevent=” handle ” ></a>〈！一添加事件偵聽器時(shí)使用事件捕獲模式一〉<div @click . capture=”handle ”> ... </div>〈！一只當(dāng)事件在該元素本身（而不是子元素） 觸發(fā)時(shí)觸發(fā)回調(diào)一〉<div @click.self=” handle ”> ... </div>＜ ！一只觸發(fā)一次，組件同樣適用一〉<div @click.once=” handle ”> ... </div>