您好,登錄后才能下訂單哦!
本篇文章為大家展示了v-on 事件指令如何在Vue.js 中使用,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
v-on 事件指令用于綁定事件。
1 基礎(chǔ)用法
v-on 指令綁定事件后,就會(huì)監(jiān)聽相應(yīng)的事件。
html:
<div id="app"> <h4>已點(diǎn)擊 {{count}} 次</h4> <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ù),那么可以不寫括號(hào)。
使用 Vue.js 的一個(gè)好處是:當(dāng)銷毀 ViewModel 時(shí),會(huì)自動(dòng)銷毀所有綁定在其上的事件處理器。
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í),才會(huì)觸發(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
上述內(nèi)容就是v-on 事件指令如何在Vue.js 中使用,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。