VUE入門學習之事件處理

Posted on by

1. 函數綁定

可以用v-on:click=”methodName”或者快捷方式 @click=”methodName”綁定事件處理函數

@click=”methodName()”也可以，@click=”methodName”猜測是簡寫

  <div v-on:click="add">{{ count }}</div>
  <div @click="add">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },

2. 帶參數和$event 

可以直接在往事件綁定的函數裡傳參數和$event 

<div @click="set(0, $event)">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

3. 多個函數綁定一個事件

多個函數直接用逗號分隔，這裡即使是沒有入參的函數，也要加括號，否則不會執行那個函數

比如<div @click=”set(0, $event), log”>{{ count }}</div> 隻會執行set

<div @click="set(0, $event), log()">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    log() {
      console.log("log---");
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

4. 事件修飾符

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生

<!– 阻止單擊事件繼續傳播 –>
<a @click.stop=”doThis”></a>

<!– 提交事件不再重載頁面 –>
<form @submit.prevent=”onSubmit”></form>

<!– 修飾符可以串聯 –>
<a @click.stop.prevent=”doThat”></a>

<!– 隻有修飾符 –>
<form @submit.prevent></form>

<!– 添加事件監聽器時使用事件捕獲模式 –>
<!– 即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理 –>
<div @click.capture=”doThis”>…</div>

<!– 隻當在 event.target 是當前元素自身時觸發處理函數 –>
<!– 即事件不是從內部元素觸發的 –>
<div @click.self=”doThat”>…</div>

<!– 點擊事件將隻會觸發一次 能被用到自定義的組件事件上 –>
<a @click.once=”doThis”></a>

<!– 滾動事件的默認行為 (即滾動行為) 將會立即觸發   –>
<!– 而不會等待 `onScroll` 完成                   –>
<!– 這其中包含 `event.preventDefault()` 的情況   –>
<!– 尤其能夠提升移動端的性能   –>
<div @scroll.passive=”onScroll”>…</div>

5. 按鍵修飾符 

  • .enter
  • .tab
  • .delete (捕獲“刪除”和“退格”鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

<!– 隻有在 `key` 是 `Enter` 時調用 `vm.submit()` –>
<input @keyup.enter=”submit” />

<!– 隻有在 `key` 是 PageDown時調用 `vm.onPageDown()` –>
<input @keyup.page-down=”onPageDown” />

6. 系統修飾鍵

事件觸發時修飾鍵必須處於按下狀態

  • .ctrl
  • .alt
  • .shift
  • .meta

<!– 按住Alt， 按Enter –>
<input @keyup.alt.enter=”clear” />

<!– 按住Ctrl + Click –>
<div @click.ctrl=”doSomething”>Do something</div>

 .exact 修飾符 

<!– 即使 Alt 或 Shift 被一同按下時也會觸發 –>
<button @click.ctrl=”onClick”>A</button>

<!– 有且隻有 Ctrl 被按下的時候才觸發 –>
<button @click.ctrl.exact=”onCtrlClick”>A</button>

<!– 沒有任何系統修飾符被按下的時候才觸發 –>
<button @click.exact=”onClick”>A</button>

鼠標按鈕修飾符

  <button @click.left="log('left cllilck')">鼠標左擊</button>
  <button @click.right="log('right cllilck')">鼠標右擊</button>
  <button @click.middle="log('middle cllilck')">鼠標中擊</button>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：