Vue.js學習筆記： 指令 v-on

標籤：vue v-on @click 事件綁定

Vue.js官方文檔對於 v-on 這一常用指令提供了縮寫方法，看看官網是怎麼介紹的

<!-- 完整文法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>

1、方法處理器

可以用 v-on 指令監聽DOM事件

<div id="box">    <button class="btn btn-success" v-on:click="showMsg">{{msg}}</button></div>

綁定一個單機事件的處理方法showMsg到methods中

var vm = new Vue({    el:‘#box‘, //el指代選取器如 id，class，tagName    data:{        msg:‘點擊按鈕‘, //這裡僅僅是為了生硬的強化記憶vue雙括弧標籤寫法        name:‘Vue.js‘    },    methods:{  //在methods對象中定義方法        showMsg: function(e){            //方法中的this，指代new Vue這個執行個體對象，可以再次驗證下            console.log(this);            //event 是原生DOM事件            console.log(e.target); //列印出事件來源對象button            console.log(‘Hello‘ + this.name + ‘!‘);        }    }});

查看頁面效果

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/88/E6/wKioL1gAR1fTKAu1AABklCPDp9g505.png" title="QQ20161014104618.png" alt="wKioL1gAR1fTKAu1AABklCPDp9g505.png" />

2、內聯語句處理器

除了直接綁定到一個方法裡面，也可以用內聯Javascript語句

<div class="app">    <button class="btn btn-default" v-on:click="say(‘hi‘)">Say Hi</button>     <!--嘗試用下v-on的縮寫方法 @click-->    <button class="btn btn-primary" @click="say(‘what‘)">Say What</button></div>

var vm2 = new Vue({    el:‘.app‘,    methods:{        say: function(msg){ //把方法裡面的參數列印出來            console.log(msg);        }    }});

查看頁面效果

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/88/EA/wKiom1gASbyTL4PrAAA44dNplg0172.png" title="QQ20161014105746.png" alt="wKiom1gASbyTL4PrAAA44dNplg0172.png" />

有時也需要在內聯語句處理器中訪問原生DOM事件，比如阻止連結跳轉。可以用特殊變數$event把它傳入方法：

<div class="app">    <a href="http://cn.vuejs.org/guide/events.html" @click="stop(test, $event)">開啟Vue官網</a></div>

var vm2 = new Vue({    el:‘.app‘,    data:{        test:‘阻止連結跳轉‘    },    methods:{        stop: function(test, e){            e.preventDefault();            alert(test);        }    }});

點擊a連結以後，頁面還能跳轉到vue官網嗎？看看頁面效果

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/88/EA/wKiom1gAT-jhd-pDAABiTNJWbjM327.png" title="QQ20161014112122.png" alt="wKiom1gAT-jhd-pDAABiTNJWbjM327.png" />

3、事件修飾符

在事件處理器中經常需要調用event.preventDefault()或event.stopPropagation()。儘管在方法內可以輕鬆做到（如上例所示），不過讓方法是純粹的資料邏輯而不處理DOM事件細節會更好。

為瞭解決這個問題，Vue為v-on提供了兩個事件修飾符：.prevent和.stop

<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --><a v-on:click.stop.prevent="doThat"><!-- 只有修飾符 --><form v-on:submit.prevent></form><!-- 添加事件接聽程式時使用 capture 模式 --><div v-on:click.capture="doThis">...</div><!-- 只當事件在該元素本身（而不是子項目）觸發時觸發回調 --><div v-on:click.self="doThat">...</div>

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/88/E7/wKioL1gAVXKQ4StyAAFT7_wfYyA262.png" title="QQ20161014114738.png" alt="wKioL1gAVXKQ4StyAAFT7_wfYyA262.png" />

看一小段代碼理解下上面的大段內容：

<div id="container">    <!-- 阻止頁面跳轉 -->    <a v-on:click.prevent="doThis" href="http://cn.vuejs.org/guide/events.html">doThis</a></div>

var vm3 = new Vue({    el:‘#container‘,    methods: {        doThis: function () {        }    }});

最終的實際結果就是，點擊a連結，並不會跳轉到Vue官網，完全實現了我們預期的效果。

再來看一個關於.self的例子

<div id="app">    <div @click.self="test" class="a">a        <div class="b">b</div>    </div></div>

var vm4 = new Vue({    el:‘#app‘,    data:{        items:‘test‘    },    methods:{        test: function(e){            console.log(e);        }    }})

根據Vue的文檔解釋“只當事件在該元素本身（而不是子項目）觸發時觸發回調”，所以點class為a的div時觸發了事件，點class為b的div時則不會

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/88/EB/wKiom1gAWNjhO8N4AABLWlXWGoY185.png" title="QQ20161014115904.png" alt="wKiom1gAWNjhO8N4AABLWlXWGoY185.png" />

4、按鍵修飾符

http://dapengtalk.blog.51cto.com/11549574/1860203

在這邊博文中，我專門複習了keycode的相關知識。在Vue中也專門為鍵盤監聽事件提供了一系列的按鍵修飾符

<!-- 只有在 keyCode 是 13 時調用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit">

全部的按鍵別名：

• enter

• tab

• delete

• esc

• space

• up

• down

• left

• right

5、為什麼在HTML中監聽事件？

（1）、掃一眼HTML模板便能輕鬆定位在Javascript代碼裡對應的方法。

（2）、因為你無需在Javascript裏手動綁定事件，你的ViewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易於測試。

（3）、當一個ViewModel被銷毀時，所有的事件處理器都會被自動刪除，你無需擔心如何自己清楚它們

學習的過程中參考了以下文檔，誠摯感謝

http://cn.vuejs.org/guide/events.html

http://blog.csdn.net/qq20004604/article/details/52413898

Vue.js學習筆記： 指令 v-on