Vue.js Method

標籤：$event prevent stop   capture   self

Method

Vue.js 的事件監聽一般都通過 v-on 指令配置在HTML中，雖然也可以在Javascript 代碼中使用原生 addEventListener 方法添加事件監聽，但Vue.js 本身並不提倡如此。

看上去這種方式不符合傳統的“關注點分離”的理念，但其實所有的Vue.js 事件處理方法和運算式都嚴格綁定在當前視圖的 ViewModel 上。實際上，採用它提供的 v-on 指令有以下幾點好處：

（1）、通過查看HTML 範本便能輕鬆定位 Javascript 代碼中對應的方法

（2）、無須在Javascript 中手動綁定事件，ViewModel 和 Dom 完全解耦，更易於測試

（3）、當一個 ViewModel 被銷毀時，所有的事件處理器都會被自動刪除

如何綁定事件

在原生DOM 事件中，我們可以通過 Javascript 給 HTML 文件項目註冊不同的事件處理常式。代碼如下：

<button onclick="learnVue()">submit</button>

AngularJS 也採取了類似的方式，只不過換成了ng-首碼的事件指令：

<button ng-click="learnVue()">submit</button>

Vue.js 也採取了這樣的方式來綁定事件

1、內聯方式

Vue.js 在HTML 文件項目中採用 v-on 指令來監聽DOM事件

<div id="app">    <button v-on:click="say(‘hi‘)">Say Hi</button>    <button v-on:click="count+=1">Say What</button></div>

2、methods 配置

上例中，當使用者將click 事件與某個方法綁定時，需要在Vue 執行個體中進行定義，所有定義的方法都放在methods 屬性下

<div id="example">    <button v-on:click="greet">Greet</button>    <button v-on:click="say(‘hi‘)">Say Hi</button></div><script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script><script>    new Vue({        el:‘#example‘,        data:{            name:‘Vue.js‘,        },        //在 methods 對象中定義方法        methods:{            greet:function(event){                //方法內 this 指向 Vue執行個體對象                console.log(this);                console.log(‘Hello‘ +this.name+‘!‘);                //event 是原生 DOM 事件                console.log(event.target.tagName);            },            say:function(msg){                alert(msg);            }        }    })</script>

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M02/8A/8D/wKioL1g0BY2gRcFJAACA33tSIFs582.png" title="QQ20161122164437.png" alt="wKioL1g0BY2gRcFJAACA33tSIFs582.png" />

需要注意的地方如下：

（1）、methods中定義的方法中的this 始終指向建立的 Vue執行個體

（2）、與事件綁定的方法支援參數 event 即原生 DOM 事件的傳入

（3）、方法用在普通元素上時，只能監聽原生 DOM事件；用在自訂元素組件上時，也可以監聽子組件觸發的自訂事件

3、 應用

前面的例子中，在Vue 執行個體中建立的方法需要訪問原生DOM事件時可以直接傳入 event 來獲得。如果在內聯語句處理器中需要訪問原生DOM事件時，則可以用一個特殊變數 $event 將其傳入方法中。

<div id="example">    <a href="https://cn.vuejs.org/v2/guide/index.html" v-on:click="prevent($event)">Vue官網</a></div><script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script><script>    new Vue({        el:‘#example‘,        //在 methods 對象中定義方法        methods:{            prevent:function(event){                //現在我們可以訪問原生事件對象                event.preventDefault();            }        }    })</script>

這樣，就阻止了點擊a 連結以後，跳轉到Vue頁面

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/8A/91/wKiom1g0CIDTK_fiAABUasUyIb8161.png" title="QQ20161122165643.png" alt="wKiom1g0CIDTK_fiAABUasUyIb8161.png" />

4、如何使用修飾符

修飾符（modifiers）是以半形句號（.）開始的特殊尾碼，用於表示指令應當以特殊方式綁定。在事件處理器上，Vue.js 為 v-on 提供了4個事件修飾符，即 .prevent, .stop, .capture, .self，使Javascript代碼負責處理純粹的資料邏輯，而不用處理這些DOM事件的細節。

在使用方式上，事件修飾符可以串聯，程式碼範例如下：

<a v-on:click.stop.prevent="doSomething"></a>

也可以只使用修飾符，不綁定事件：

<form v-on:submit.prevent></form>

4-1、prevent

在事件處理器中，經常需要調用 event.preventDefault() 來阻止事件的預設行為，Vue.js 提供了 .prevent 事件修飾符以使之在HTML中便能完成操作

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

4-2、stop

event.stopPropagation() 用於阻止事件冒泡，Vue.js 也提供了相應的.stop事件修飾符

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

4-3、capture

.capture事件修飾符是 Vue.js 1.0.16 版本中新增的，表示事件接聽程式時採用 capture 即捕獲模式

<div v-on:click.capture="doThis"></div>

4-4、self

.self 事件修飾符同樣是 Vue.js 1.0.16 版本中新增的，表示只當事件在該元素本身（而不是子項目）觸發時觸發回調

<div v-on:click.self="doThat"></div>

5、按鍵

監聽鍵盤事件經常需要檢測 keyCode。Vue.js 可以為 v-on 添加鍵盤修飾符

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

更多關於keyCode的介紹，可參考博文 http://dapengtalk.blog.51cto.com/11549574/1860203

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1875506

Vue.js Method