Vuejs——(5)v-on

Vuejs——(5)v-on。

(二十二)方法處理器

①v-on的標準用法

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

會默認傳一個參數,代碼如下:



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事件傳一個固定參數

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

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

mes的值是’a’

$event

如果需要給他一個像上面一樣的鼠標點擊事件時,則使用$event作為參數(他和不傳參數時的默認鼠標事件對象是相同的);

使用Vue實例的變量

如果需要傳一個data屬性裡的值,則直接放屬性名

例如:


點擊搜索age

<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來說,例如以下代碼:


 

<script>
var test = {name: “test”};
var vm = new Vue({
el: '#app',
data: {
items: “test”
},
methods: {
test: function (evt) {
console.log(evt);
}
}
})
</script>

隻有當點擊到非p class=’b’的區域時,才會觸發事件;

④自定義按鍵別名:

規范:

Vue.directive(“on”),keyCode.別名 = 按鍵碼;

示例:

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

這個指鍵盤碼為122(小寫z)的別名命名為z,當按鍵鍵盤的z鍵時(無論大小寫),都會觸發事件。

註意,這個要寫在實例聲明之後(推測是要含有該按鍵的template被創建後才有效)

發佈留言