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被創建後才有效)