一、前言

  vuejs中的事件綁定，使用<v-on:事件名 = 函數名>來完成的，這里函數名是定義在Vue實例中的methods對象中的，Vue實例可以直接訪問其中的方法。

二、事件綁定方式

1、 直接在標簽中寫js方法

 <button v-on:click="alert（'hi'）">執行方法的第一種寫法</button>

2、調用method的辦法

<button v-on:click="run()">執行方法的第一種寫法</button>
 
 <button @click="run()">執行方法的 簡寫 寫法</button>
export default { 
 data () { 
 return {
 msg: '你好vue',
 list:[] 
 }
 },
 methods:{
 run:function(){
 alert('這是一個方法');
 }
 }
 }

（1）方法傳參，方法直接在調用時在方法內傳入參數

 <button @click="deleteData('111')">執行方法傳值111</button>
 <button @click="deleteData('222')">執行方法傳值2222</button>
 deleteData(val){
 alert(val);
 },

（2）傳入事件對象

 <button data-aid='123' @click="eventFn($event)">事件對象</button>
eventFn(e){
 console.log(e);
 // e.srcElement dom節點
 e.srcElement.style.background='red';
 console.log(e.srcElement.dataset.aid); /*獲取自定義屬性的值*/
 }

三、事件修飾符

1、stop  //阻止事件繼續傳播 即阻止它的捕獲和冒泡過程

方法一： @click='show($event)'    我們有了事件對象后，我們函數中是不是就可以利用原生中的e.cancelBubble=true；

方法二： @click.stop='show()'    只要在事件后面加 .stop  就可以阻止事件冒泡

舉個例子：

實例：如下點擊內部點擊，阻止了冒泡過程，即只執行tz這個方法，如果不加.stop，先執行tz方法，后執行gett方法。即通過了冒泡這個過程。

<div v-on:click="gett">
 外部點擊
 <div v-on:click.stop="tz">內部點擊</div>
</div>

2、prevent    //阻止默認事件：

方法一： @click='show($event)'    我們有了事件對象后，我們函數中是不是就可以利用原生中的 e.preventDefault();

方法二： @click.prevent='show()'   只要在事件后面加 .prevent  就可以阻止默認事件。

舉個例子：阻止了a標簽的默認刷新

<a href="" v-on:click.prevent>點擊</a>

3、capture // 添加事件監聽器時使用事件捕獲模式，即在捕獲模式下觸發

實例：在點擊最里層的點擊6時，gett方法先執行，因為gett方法在捕獲模式執行的，先與冒泡事件。下列執行順序 geet->set->tz ,因為后倆個還是冒泡模式下觸發的事件。

<div v-on:click.capture="gett">外部點擊5
 <div v-on:click="tz">內部點擊5
 <div v-on:click="set">點擊6</div>
 </div>
</div>

4、self //當前元素自身時觸發處理函數時才會觸發函數

原理：是根據event.target確定是否當前元素本身，來決定是否觸發的事件/函數

實例：如果點擊內部點擊2，冒泡不會執行gett方法，因為event.target指的是內部點擊2的dom元素，不是外部點擊1的，所以不會觸發自己的點擊事件。

<div v-on:click.self="gett">
 外部點擊1
 <div v-on:click="tz">內部點擊2</div>
</div>

5、once //只觸發一次

實例：

<div  v-on:click.once="tz">once</div>

6、鍵盤事件

方法一：@keydown='show()'    

當然我們傳個$event  也可以在函數中獲 ev.keyCode

if(ev.keyCode==13){
 alert('你按了回車鍵！')
}

方法二：

 <input type="text" @keyup.enter="show()">回車執行
 <input type="text" @keydown.up='show()' >上鍵執行
 <input type="text" @keydown.down='show()' >下鍵執行
 <input type="text" @keydown.left='show()' >左鍵執行
 <input type="text" @keydown.right='show()' >右鍵執行

總結

以上所述是小編給大家介紹的vue實現綁定事件的方法實例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com