Vue.js Method

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 也採起了這樣的方式來綁定事件

一、內聯方式

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>

二、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>

須要注意的地方以下：

（1）、methods中定義的方法中的this 始終指向建立的 Vue實例

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

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

三、 應用

前面的例子中，在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頁面

四、如何使用修飾符

修飾符（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-一、prevent

在事件處理器中，常常須要調用 event.preventDefault() 來阻止事件的默認行爲，Vue.js 提供了 .prevent 事件修飾符以使之在HTML中便能完成操做

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

4-二、stop

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

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

4-三、capture

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

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

4-四、self

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

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

五、按鍵

監聽鍵盤事件常常須要檢測 keyCode。Vue.js 能夠爲 v-on 添加鍵盤修飾符

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

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