淺談Vue.js 中的 v-on 事件指令的使用
v-on 事件指令用于綁定事件。
1 基礎(chǔ)用法
v-on 指令綁定事件后，就會監(jiān)聽相應(yīng)的事件。
html：
<div id="app">
<h3>已點(diǎn)擊 {{count}} 次</h3>
<button @click="count++">點(diǎn)我</button>
</div>
注意： @click 是 v-on:click 的簡寫形式， @ 即表示 v-on: 。
js：
<script>
var app = new Vue({
el: '#app',
data: {
count:0
}
});
</script>
效果：
@click 表達(dá)式即可以直接使用 js 語句，也可以是一個(gè)定義在 vue 實(shí)例中 methods 內(nèi)的函數(shù)名。
html：
<button @click="quickAdd(3)">快速增長</button>
js：
methods: {
quickAdd: function (i) {
i = i || 1;//為避免參數(shù)為 null 或 undefined 值，這里設(shè)定了默認(rèn)值 1
this.count += i;
}
}
效果：
注意： @click 調(diào)用的方法名如果不需要參數(shù)，那么可以不寫括號。
使用 Vue.js 的一個(gè)好處是：當(dāng)銷毀 ViewModel 時(shí)，會自動銷毀所有綁定在其上的事件處理器。
2 調(diào)用 DOM 事件
Vue.js 還提供了一個(gè) $event 變量，使用它可以訪問原生 DOM 事件。 $event 變量可以通過方法傳入。
html：
<div id="app2">
<a href="www.163.com" rel="external nofollow" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
count: 0
},
methods: {
openUrl: function (param, event) {
event.preventDefault();
console.log("param:" + param);
}
}
});
輸出結(jié)果：
param:被禁用咯
這個(gè)示例利用傳入的 event 參數(shù)，禁用了原有的鏈接跳轉(zhuǎn)邏輯。
3 事件修飾符
Vue.js 支持以下事件修飾符：
| 事件修飾符 | 示例 | 示例說明 |
|---|---|---|
| .stop | @click.stop | 阻止單擊事件冒泡。 |
| .prevent | @submit.prevent | 提交頁面不再重載頁面。 |
| .capture | @click.capture | 添加事件監(jiān)聽器時(shí)使用事件捕獲模式。 |
| .self | @click.self | 只有當(dāng)單擊事件是元素的自身事件時(shí)，才會觸發(fā)。 |
| .once | @click.once | 只觸發(fā)一次。 |
4 按鍵修飾符
可以使用按鍵修飾符，來監(jiān)聽表單元素上的鍵盤事件。
html：
<div id="app3"> <input @keyup.13="enterClick"> </div>
js：
var app3 = new Vue({
el: '#app3',
data: {},
methods: {
enterClick: function () {
console.log("enterClick");
}
}
});
輸出結(jié)果：enterClick
這個(gè)示例演示了如何通過回車按鍵修飾符來綁定事件函數(shù)的過程。
除了使用 keycode 來指定按鍵之外，我們還可以使用以下這些按鍵別名：
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
還有一些按鍵修飾符可以組合使用，或者和鼠標(biāo)一起使用：
- .ctrl
- .alt
- .shift
- .meta：Mac 下為 Command 鍵，Windows 下為窗口鍵。
html：
<div id="app4"> <input @keyup.alt.83="save"> </div>
js：
var app4 = new Vue({
el: '#app4',
data: {},
methods: {
save: function () {
console.log("save");
}
}
});
輸出結(jié)果：save
這個(gè)示例，我們通過組合按鍵修飾符，為輸入框綁定了 alt + S 事件。
本文示例（ DEMO ）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解vue中v-on事件監(jiān)聽指令的基本用法
- 聊聊vue 中的v-on參數(shù)問題
- 關(guān)于Vue v-on指令的使用
- Vue.js中v-on指令的用法介紹
- Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
- vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
- Vue中的v-model，v-bind，v-on的區(qū)別解析
- Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
- vue3常用的指令之v-bind和v-on指令用法
- vue v-on傳遞參數(shù)和事件修飾符的使用
相關(guān)文章
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會遇到，小編通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10
vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)詳解
本篇文章給大家分享了一個(gè)用vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)的代碼過程，有興趣的朋友跟著參考學(xué)習(xí)下。2018-05-05
這篇文章主要為大家介紹了Vue獲取表單數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁懶加載
下拉框一開始請求第一頁的內(nèi)容,滾動到最后的時(shí)候,請求第二頁的內(nèi)容,如此反復(fù),直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁懶加載,需要的朋友可以參考下2024-07-07
Vue3實(shí)現(xiàn)SSE(Server-Sent?Events)連接
SSE?是一種允許服務(wù)器向?yàn)g覽器推送事件的技術(shù),這篇文章主要為大家詳細(xì)介紹了如何通過vue3實(shí)現(xiàn)SSE(Server-Sent?Events)連接,有需要的小伙伴可以了解下2024-10-10
vue組件中的style標(biāo)簽標(biāo)有scoped屬性時(shí)表明style里的css樣式只適用于當(dāng)前組件元素 。接下來通過本文給大家分享vue組件中的樣式屬性scoped實(shí)例詳解，感興趣的朋友跟隨小編一起看看吧2018-10-10