vue系列--vue是如何實現綁定事件

1、前言

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

 

2、事件綁定方式

一、 直接在標籤中寫js方法

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

 

二、調用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); /*獲取自定義屬性的值*/ }

 

3、事件修飾符

一、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>

 

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

方法一： @click='show($event)'    咱們有了事件對象後，咱們函數中是否是就能夠利用原生中的 e.preventDefault(); 方法二： @click.prevent='show()'   只要在事件後面加 .prevent  就能夠阻止默認事件。

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

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

 

三、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>

 

四、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>

 

五、once //只觸發一次 

實例：

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

 

六、鍵盤事件

方法一：@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()'   >右鍵執行

 

【謝謝關注和閱讀，後續新的文章首發：sau交流學習社區：https://www.mwcxs.top/】