Vuejs——（5）v-on

版權聲明：出處http://blog.csdn.net/qq20004604

 

目錄(?)[+]

 

資料來於官方文檔：

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

本文是在官方文檔的基礎上，更加細緻的說明，代碼更多更全。

簡單來講，更適合新手閱讀

 

 

（二十二）方法處理器

①v-on的標準用法

用於監聽DOM事件，典型的就是v-on:click，處理的方法放在methods屬性裏

會默認傳一個參數，代碼以下：

 

<button @click="test">點擊</button>

methods: {
    test: function (evt) {
        console.log(evt);
    }
}

 

這裏的evt，是標準的鼠標點擊事件，相似jQuery的click事件的回調函數中的參數。

 

能夠經過this來找到data屬性裏的值（或許也能找到其餘幾個），例如：

data: {
    items: "test"
},
methods: {
    test: function (evt) {
        console.log(this.items);
        console.log(evt);
    }
}

這裏的this.items，就是data的items這個變量；

 

 

②內聯語句處理器

給v-on事件傳一個固定參數

<button @click="test('a')">點擊搜索age</button>

當這個時候，函數的第一個參數就不是鼠標點擊事件了，而是字符串a

test: function (mes) {
    console.log(mes);
}

mes的值是’a’

 

$event

若是須要給他一個像上面同樣的鼠標點擊事件時，則使用$event做爲參數（他和不傳參數時的默認鼠標事件對象是相同的）；

 

使用Vue實例的變量

若是須要傳一個data屬性裏的值，則直接放屬性名

例如：

<div id="app">
    <a href="http://www.baidu.com" @click="test(items, $event)">點擊搜索age</a>
</div>
<script>
    var test = {name: "test"};
    var vm = new Vue({
        el: '#app',
        data: {
            items: "test"
        },
        methods: {
            test: function (msg, evt) {
                console.log(msg);
                evt.preventDefault();//阻止默認動做，好比這裏是頁面跳轉
            }
        }
    })
</script>

輸出：test和BUTTON

 

 

③事件修飾符（針對v-on）

修飾符	效果	備註
.prevent	阻止html元素的默認事件	相似evt.preventDefault()
.stop	阻止事件冒泡
keyup.數字	當該數字表示的按鍵彈起時	有別名
keyup.enter	回車	按下回車時
keyup.tab	Tab按鈕	tab切入該input時
keyup.delete	del鍵	會致使原始的delete刪除功能失效
keyup.esc	esc鍵	按下esc時
keyup.space	空格鍵	不會使空格功能失效（即按下空格時，既空格，又觸發事件）
keyup.up	鍵盤方向鍵的上	上鍵同時會使光標到輸入框的最左邊 （焦點在輸入框時才生效，按鍵彈起時生效，下同）
keyup.down	鍵盤方向鍵的下	到輸入框的最後面
keyup.left	方向左鍵	光標左移
keyup.right	方向右鍵	光標右移
.self	當前元素自己（非子元素）時觸發事件	相似冒泡的時候找最頂層，通常用於click之類的鼠標事件(1.0.16以後)
.capture	按照capture模式來處理	簡單來講，根據我推測，是根據捕獲順序觸發冒泡（本來模式是後捕獲先冒泡，這個正好相反）（1.0.16以後）

對於.self來講，例如如下代碼：

<div id="app">
    <div @click.self="test" class="a">
        <div class="b">
        </div>
    </div>
</div>
<script>
    var test = {name: "test"};
    var vm = new Vue({
        el: '#app',
        data: {
            items: "test"
        },
        methods: {
            test: function (evt) {
                console.log(evt);
            }
        }
    })
</script>

只有當點擊到非div class=’b’的區域時，纔會觸發事件；

 

 

④自定義按鍵別名：

規範：

Vue.directive(「on」),keyCode.別名 = 按鍵碼;

 

示例：

Vue.directive("on").keyCode.z = 122;

這個指鍵盤碼爲122（小寫z）的別名命名爲z，當按鍵鍵盤的z鍵時（不管大小寫），都會觸發事件。

注意，這個要寫在實例聲明以後（推測是要含有該按鍵的template被建立後纔有效）