vue系列--vue是如何實現繫結事件

saucxs發表於2019-06-20
Vue事件

一、前言

  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('你按了Enter鍵！')
}

方法二：

  <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/】

相關文章