vue怎么實(shí)現(xiàn)綁定事件

這篇文章將為大家詳細(xì)講解有關(guān)vue怎么實(shí)現(xiàn)綁定事件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的南海網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一、前言

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

二、事件綁定方式

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

 執(zhí)行方法的第一種寫法

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

執(zhí)行方法的第一種寫法
 
  執(zhí)行方法的 簡(jiǎn)寫 寫法
export default {  
  data () { 
  return {
   msg: '你好vue',
   list:[]  
  }
  },
  methods:{
   run:function(){
    alert('這是一個(gè)方法');
    }
   }
 }

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

 執(zhí)行方法傳值111
  執(zhí)行方法傳值2222
 deleteData(val){
   alert(val);
  },

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

 事件對(duì)象
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è)過程。

 外部點(diǎn)擊
 內(nèi)部點(diǎn)擊