在vuejs中，可以使用“v-on”指令來實現(xiàn)事件監(jiān)聽，該指令用來綁定事件監(jiān)聽器；只需要在標簽模板中添加“v-on:事件參數(shù)="事件處理函數(shù)"”語句，使用JavaScript設(shè)置觸發(fā)時需要執(zhí)行的代碼即可。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

當模板渲染完成之后，就可以進行事件的綁定與監(jiān)聽。v-on指令用來監(jiān)聽DOM事件，通常在模板內(nèi)直接使用。

<button v-on:click="say">Say</button>

方法及內(nèi)聯(lián)語句處理器

通過v-on綁定實力選項屬性methods中的方法作為事件的處理器，v-on：后參數(shù)接受所有的原生事件名稱。

    <button v-on:click = "say">Say</button>     var vm = new Vue({         el: "#app",         data: {             msg:"hello vue.js"         },         methods:{             say:function(){                 alert(this.msg);             }         }     })

v-on縮寫形式：@。@click="say"

v-on支持內(nèi)聯(lián)JavaScript語句，但僅限是一個語句。

    <button v-on:click = "sayFrom('from param')">Say</button>     var vm = new Vue({         el: "#app",         data: {             msg:"hello vue.js"         },         methods:{             sayFrom:function(from){                 alert(this.msg + '' + from);             }         }     })

在直接綁定methods函數(shù)和內(nèi)聯(lián)JavaScript與居室，都有可能需要獲取原生DOM事件對象

   <button v-on:click = "showEvent">Event</button>     <button v-on:click = "showEvent($event)">event</button>    <button v-on:click = "showEvent()">Say</button>  //這樣寫獲取不到event     var vm = new Vue({         el: "#app",         methods:{             showEvent:function(event){                 console.log(event);             }         }     })

同一個元素上可以通過v-on綁定多個相同事件函數(shù)，執(zhí)行順序為順序執(zhí)行。

事件修飾符

1、.stop:調(diào)用event.stopPropagation().

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

2、.prevent:調(diào)用event.preventDefault().

    <!-- 提交事件不再重載頁面 -->     <form v-on:submit.prevent="onSubmit"></form>     <!-- 修飾符可以串聯(lián)  -->     <a v-on:click.stop.prevent="doThat"></a>     <!-- 只有修飾符 -->     <form v-on:submit.prevent></form>

3、.caputure:使用capture模式添加事件監(jiān)聽器。

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

4、.self:只當事件是從監(jiān)聽元素本身觸發(fā)時才觸發(fā)調(diào)回。

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

5、.once:

 <!-- 點擊事件將只會觸發(fā)一次 -->     <a v-on:click.once="doThis"></a>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

   //例子     var vm = new Vue({         el: '#app',         methods:{             saySelf(msg) {                 alert(msg);             }         }     });     //HTML代碼     <div v-on:click="say('click from inner')" v-on:click.self="saySelf('click from self')">         <button v-on:click="saySelf('button click')">button</button>         <button v-on:click.stop="saySelf('just button click')">button</button>     </div>

鍵值修飾符

在監(jiān)聽鍵盤事件時，需要監(jiān)測常見的鍵值。

    <input v-on:keyup.13 = "submit" />  //監(jiān)聽input的輸入，當輸入回車時觸發(fā)submit函數(shù)。

記住所有的keyCide比較困難，所以Vue為最常用的按鍵提供了別名。

    <!-- 同上 -->     <input v-on:keyup.enter="submit">     <!-- 縮寫語法 -->     <input @keyup.enter="submit">

.enter
.tab
.delete(捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
可以通過全局config.keyCodes對象自定義鍵值修飾符別名：

    // 可以使用 v-on:keyup.f1     Vue.config.keyCodes.f1 = 112

與傳統(tǒng)事件綁定的區(qū)別

1.無需手動管理事件。ViewModel被銷毀時，所有的事件處理器都會自動被刪除，讓我們從獲取DOM綁定事件然后在特定情況下再解綁這樣的事情中解脫出來。

2.解耦。ViewModel代碼是純粹的邏輯代碼，和DOM無關(guān)，有利于我們寫自動化測試用例。

vue.extend()

為了重復使用的子組件，vue.js提供了Vue.extend(options)方法，創(chuàng)建基礎(chǔ)Vue構(gòu)造器的“子類”，參數(shù)options對象和直接聲明Vue實例參數(shù)對象基本一致。

    var Child = Vue.extend({         teplate:'#child', //不同的是，el和data選項需要通過函數(shù)返回值賦值，避免多個組件實例共用一個數(shù)據(jù)         data:function(){             return {                 ...             }         },         ...     })     Vue.component('child',child)  //全局注冊子組件     <child ...></child>  //子組件在其他組件內(nèi)的調(diào)用方式