第四講、Vue3.x中的事件方法詳解、事件監聽、方法傳值、事件物件、多事件處理程式、事件修飾符、按鍵修飾符

frans發表於2021-01-04
Vue事件物件

一、Vue3.x監聽事件

vue中監聽事件可以使用v-on:click或者 @click ,@click 為v-on:click的簡寫，例如：

data() {
    return {
      counter: 1
    }
  }

template模板：

div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

二、Vue3.x定義方法 執行方法 獲取資料 改變資料

業務邏輯：

export default {
    data() {
        return {
            num: 1,
            msg: "你好vue",
        };
    },
    methods: {
        setMsg() {
            this.msg = "我是方法裡改變後的msg";
        },
        getMsg() {
            alert(this.msg);
        },
    },
};

template模板：

<template>
<div>
    <h2>{{ msg }}</h2>

    <button @click="setMsg()">設定msg</button>
    <br />
    <br>
    <button @click="getMsg()">獲取msg</button>

    <br>
    <br>
    <h2>Num:{{num}}</h2>

    <button @click="num += 1">Add 1</button>
</div>
</template>

三、Vue3.x方法傳值、方法的相互呼叫

業務邏輯：

export default {
    data() {
        return {
            msg: "你好vue",
        };
    },
    methods: {
        setMsg(msg) {
            this.msg = msg;
        },
        run() {
            this.getMsg()
        },
        getMsg() {
            alert(this.msg);
        }
    },
};

template模板：

<template>
<div>
    {{msg}}
    <br>
    <br>

    <button @click="setMsg('這隻執行方法傳值改變msg')">執行方法傳值</button>

    <br>
    <br>
    <button @click="run()">執行run方法</button>
</div>
</template>

四、事件物件

有時我們還需要在內聯語句處理程式中訪問原始DOM事件。您可以使用特殊$event變數將其傳遞給方法

一、單個引數

業務邏輯：

export default {
    data() {
        return {
            msg: "你好vue",
        };
    },
    methods: {
       eventFn(e){
          console.log(e);

          // e.srcElement  dom節點

          e.srcElement.style.background='red';
          console.log(e.srcElement.dataset.aid);  /*獲取自定義屬性的值*/
        }
    },
};

template模板：

<button data-aid='123' @click="eventFn($event)">事件物件</button>

二、多個引數

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
methods: {
  warn(message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

五、Vue3.x 多事件處理程式

您可以在事件處理程式中使用逗號分隔多個事件處理程式，如下所示：

業務邏輯：

methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...
  }
}

template模板：

<button @click="one($event), two($event)">
  Submit
</button>

六、事件修飾符

vue中阻止冒泡 阻止預設行為，可以通過事件物件event.preventDefault()或event.stopPropagation()實現，還可以通過事件修飾符實現。

vue中給我們提供了很多的修飾符：

.stop
.prevent
.capture
.self
.once
.passiv

stopPropagation:

<a @click.stop="doThis"></a>

preventDefault:

<a @click.prevent="doThat"></a>

stopPropagation And preventDefault

<a @click.stop.prevent="doThat"></a>

七、按鍵修飾符

監聽鍵盤事件時，我們通常需要檢查特定的鍵。Vue允許在監聽關鍵事件時v-on或@在監聽關鍵事件時新增按鍵修飾符：

<input @keyup.enter="submit" />

Vue為最常用的鍵提供別名：

  • .enter
  • .tab
  • .delete （同時捕獲“刪除”和“退格”鍵）
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章