Vue.js 事件處理器 v-on

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:'點擊按鈕', 
        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 + '!');
        }
    }
});

查看頁面效果截圖

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);
        }
    }
});

查看頁面效果截圖

有時也需要在內聯語句處理器中訪問原生DOM事件，比如阻止鏈接跳轉?？梢杂锰厥庾兞?event把它傳入方法：

<div class="app">
    <a >打開Vue官網</a>
</div>

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

點擊a鏈接以后，頁面還能跳轉到vue官網嗎？看看頁面效果截圖

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>

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

<div id="container">

    <!-- 阻止頁面跳轉 -->
    <a v-on:click.prevent="doThis" >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時則不會

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