Vue.JS入門教程之事件監(jiān)聽
你可以使用 v-on 指令來綁定并監(jiān)聽 DOM 事件。綁定的內容可以是一個當前實例上的方法 (后面無需跟括號) 或一個內聯(lián)表達式。如果提供的是一個方法，則原生的 DOM event 會被作為第一個參數(shù)傳入，同時這個 event 會帶有 targetVM 屬性，指向觸發(fā)該事件的相應的 ViewModel：
<div id="demo"> <a v-on="click: onClick">觸發(fā)一個方法函數(shù)</a> <a v-on="click: n++">觸發(fā)一個表達式</a> </div>
new Vue({
el: '#demo',
data: {
n: 0
},
methods: {
onClick: function (e) {
console.log(e.targetVM.n);
console.log(e.target.tagName);// "A"
console.log(e.targetVM === this);// true
}
}
});
執(zhí)行表達式
當在 v-repeat 里使用 v-on 時，targetVM 顯得很有用，因為 v-repeat 會創(chuàng)建大量子 ViewModel。但是，通過執(zhí)行表達式的方式，把代表當前 ViewModel 數(shù)據(jù)對象的別名傳進去，會更方便直觀一些：
<ul id="list">
<li v-repeat="item in items" v-on="click: toggle(item)">
{{item.text}}
</li>
<button v-on="click: submit('hello!', $event)">Submit</button>
</ul>
new Vue({
el: '#list',
data: {
items: [
{ text: 'one', done: true },
{ text: 'two', done: false }
]
},
methods: {
toggle: function (item) {
console.info(item.done);
item.done = !item.done;
console.info(item.done);
},
submit: function (msg, e) {
e.stopPropagation();
console.info(msg + ' submit is called!');
}
}
})
當你想要在表達式中訪問原來的 DOM event，你可以傳遞一個 $event 參數(shù)進去。
key過濾器
當監(jiān)聽鍵盤事件時，我們常常需要判斷常用的 key code。Vue.js 提供了一個特殊的只能用在 v-on 指令的過濾器：key。它接收一個表示 key code 的參數(shù)并完成判斷：
<!-- 只有當 keyCode 等于 13 時才調用方法 --> <input v-on="keyup:mySubmit | key 13">
系統(tǒng)有很多預設值可以使用，例如：
<!-- 效果同上 --> <input v-on="keyup:submit | key 'enter'">
預設值為：enter tab delete esc up down left right space
為什么在HTML中使用監(jiān)聽器
你可能會注意到整個事件監(jiān)聽的方式違背了 “separation of concern” 的傳統(tǒng)理念。不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護困難。實際上，使用 v-on 還有更多好處：
它便于在 HTML 模板中輕松定位 JS 代碼里的對應方法實現(xiàn)。
因為你無須在 JS 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦。這會更易于測試。
當一個 ViewModel 被銷毀時，所有的事件監(jiān)聽都會被自動移除。你無須擔心如何自行清理它們。
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
?vue-admin-template是基于vue-element-admin的一套后臺管理系統(tǒng)基礎模板（最少精簡版），可作為模板進行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應用,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了基于vue 實現(xiàn)token驗證的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時候對傳入的值做判斷，今天小編通過一個小例子給大家分享VueJs組件prop驗證簡單理解，感興趣的朋友一起看看吧2017-09-09
vue項目打包后,由于html被緩存導致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項目打包后,由于html被緩存導致出現(xiàn)白屏的處理方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了webstorm和.vue中es6語法報錯的解決方法，小編總結了webstorm和.vue中出現(xiàn)的es6語法報錯，避免大家采坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
如何使用Vue mapState快捷獲取Vuex state多個值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個值實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要和大家一起簡單學習一下vue指令：directive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03