vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼詳解

更新時(shí)間：2019年06月20日 11:42:21 作者：saucxs

這篇文章主要介紹了vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、前言

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

二、事件綁定方式

1、直接在標(biāo)簽中寫js方法

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

2、調(diào)用method的辦法

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

（1）方法傳參，方法直接在調(diào)用時(shí)在方法內(nèi)傳入?yún)?shù)

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

（2）傳入事件對(duì)象

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

三、事件修飾符

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

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

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

舉個(gè)例子：

實(shí)例：如下點(diǎn)擊內(nèi)部點(diǎn)擊，阻止了冒泡過程，即只執(zhí)行tz這個(gè)方法，如果不加.stop，先執(zhí)行tz方法，后執(zhí)行g(shù)ett方法。即通過了冒泡這個(gè)過程。

<div v-on:click="gett">
 外部點(diǎn)擊
 <div v-on:click.stop="tz">內(nèi)部點(diǎn)擊</div>
</div>

2、prevent //阻止默認(rèn)事件：

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

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

舉個(gè)例子：阻止了a標(biāo)簽的默認(rèn)刷新

<a href="" v-on:click.prevent>點(diǎn)擊</a>

3、capture // 添加事件監(jiān)聽器時(shí)使用事件捕獲模式，即在捕獲模式下觸發(fā)

實(shí)例：在點(diǎn)擊最里層的點(diǎn)擊6時(shí)，gett方法先執(zhí)行，因?yàn)間ett方法在捕獲模式執(zhí)行的，先與冒泡事件。下列執(zhí)行順序 geet->set->tz ,因?yàn)楹髠z個(gè)還是冒泡模式下觸發(fā)的事件。

<div v-on:click.capture="gett">外部點(diǎn)擊5
 <div v-on:click="tz">內(nèi)部點(diǎn)擊5
  <div v-on:click="set">點(diǎn)擊6</div>
 </div>
</div>

4、self //當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)時(shí)才會(huì)觸發(fā)函數(shù)

原理：是根據(jù)event.target確定是否當(dāng)前元素本身，來決定是否觸發(fā)的事件/函數(shù)

實(shí)例：如果點(diǎn)擊內(nèi)部點(diǎn)擊2，冒泡不會(huì)執(zhí)行g(shù)ett方法，因?yàn)閑vent.target指的是內(nèi)部點(diǎn)擊2的dom元素，不是外部點(diǎn)擊1的，所以不會(huì)觸發(fā)自己的點(diǎn)擊事件。

<div v-on:click.self="gett">
 外部點(diǎn)擊1
 <div v-on:click="tz">內(nèi)部點(diǎn)擊2</div>
</div>

5、once //只觸發(fā)一次

實(shí)例：

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

6、鍵盤事件

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

當(dāng)然我們傳個(gè)$event 也可以在函數(shù)中獲 ev.keyCode

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

方法二：

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

總結(jié)

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

您可能感興趣的文章: