Vue.js 事件處理器 v-on

Vue.js官方文檔對(duì)于 v-on 這一常用指令提供了縮寫方法，看看官網(wǎng)是怎么介紹的

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>

<!-- 縮寫 -->
<a @click="doSomething"></a>

1、方法事件處理器

可以用 v-on 指令監(jiān)聽DOM事件

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

綁定一個(gè)單機(jī)事件的處理方法showMsg到methods中

var vm = new Vue({
    el:'#box', //el指代選擇器如 id，class，tagName
    data:{
        msg:'點(diǎn)擊按鈕', 
        name:'Vue.js'
    },
    methods:{  //在methods對(duì)象中定義方法
        showMsg: function(e){
            //方法中的this，指代new Vue這個(gè)實(shí)例對(duì)象，可以再次驗(yàn)證下
            console.log(this);
            //event 是原生DOM事件
            console.log(e.target); //打印出事件源對(duì)象button
            console.log('Hello' + this.name + '!');
        }
    }
});

查看頁面效果截圖

2、內(nèi)聯(lián)語句處理器

除了直接綁定到一個(gè)方法里面，也可以用內(nèi)聯(lián)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){ //把方法里面的參數(shù)打印出來
            console.log(msg);
        }
    }
});

查看頁面效果截圖

有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原生DOM事件，比如阻止鏈接跳轉(zhuǎn)。可以用特殊變量$event把它傳入方法：

<div class="app">
    <a >打開Vue官網(wǎng)</a>
</div>

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

點(diǎn)擊a鏈接以后，頁面還能跳轉(zhuǎn)到vue官網(wǎng)嗎？看看頁面效果截圖

3、事件修飾符

在事件處理器中經(jīng)常需要調(diào)用event.preventDefault()或event.stopPropagation()。盡管在方法內(nèi)可以輕松做到（如上例所示），不過讓方法是純粹的數(shù)據(jù)邏輯而不處理DOM事件細(xì)節(jié)會(huì)更好。

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

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件偵聽器時(shí)使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>

看一小段代碼理解下上面的大段內(nèi)容：

<div id="container">

    <!-- 阻止頁面跳轉(zhuǎn) -->
    <a v-on:click.prevent="doThis" >doThis</a>

</div>

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

        }
    }
});

最終的實(shí)際結(jié)果就是，點(diǎn)擊a鏈接，并不會(huì)跳轉(zhuǎn)到Vue官網(wǎng)，完全實(shí)現(xiàn)了我們預(yù)期的效果。

再來看一個(gè)關(guān)于.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);
        }
    }
})

根據(jù)Vue的文檔解釋“只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)”，所以點(diǎn)class為a的div時(shí)觸發(fā)了事件，點(diǎn)class為b的div時(shí)則不會(huì)

4、按鍵修飾符

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

在這邊博文中，我專門復(fù)習(xí)了keycode的相關(guān)知識(shí)。在Vue中也專門為鍵盤監(jiān)聽事件提供了一系列的按鍵修飾符

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 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中監(jiān)聽事件？

（1）、掃一眼HTML模板便能輕松定位在Javascript代碼里對(duì)應(yīng)的方法。

（2）、因?yàn)槟銦o需在Javascript里手動(dòng)綁定事件，你的ViewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易于測(cè)試。

（3）、當(dāng)一個(gè)ViewModel被銷毀時(shí)，所有的事件處理器都會(huì)被自動(dòng)刪除，你無需擔(dān)心如何自己清楚它們

學(xué)習(xí)的過程中參考了以下文檔，誠摯感謝

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

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