Vue.js : v-on 事件綁定指令

v-on 是一個 Vue.js 的事件指令，是用來綁定在 DOM 上做為事件監聽和執行指定函式的功能。

v-on 的實作

v-on 的寫法為 v-on:事件名稱=”執行的函式” ，其實這就等同於我們使用 JavaScript 所撰寫的 querySelector 以及 addEventListener 這兩個功能。

JavaScript 寫法

// HTML
<button class="btn-add" />

// JavaScript
const addButton = document.querySelector('.btn-add');
addButton.addEventListener('click', count++)

先在 HTML 建立 class 或是 id 名稱（建議使用 class 名稱），並在 JavaScript 的檔案中綁定指定的 DOM 的 class 或是 id 名稱後再使用 addEventListener 來監聽指定的 click 事件，並執行 count++ 這個函式。

v-on 寫法

<template>
  <p>{{count}}</p>
  <button class="btn-add" v-on:click="count++" />
</template>

直接在要綁定監聽事件的 DOM 上使用 v-on 的指令之後，加上要監聽的事件名稱和要執行的函式即可。

v-on 的簡寫

實務上不大會使用 v-on:事件名稱=”執行的函式” 這樣的寫法，比較常使用的是 @事件名稱=”執行的函式” （貫徹工程師能省則省的簡單寫法）。

<template>
  <p>{{count}}</p>
  <button class="btn-add" @click="count++" />
</template>

那我們下次見ʘ‿ʘ