v-on事件處理

網頁除可以顯示內容以外，也可以回應使用者的動作，像是Instagram的點讚功能，當使用者點擊愛心，愛心就會從空心的變為紅色實心，或是使用者在編輯貼文的文字，就會用到鍵盤輸入，這也是動作的一種，這類的動作，電腦會把它當作事件，並且會處理這些事件。
常用的DOM事件：

• click：滑鼠點擊事件
• mousemove：滑鼠移動
• keyup：鍵盤事件

這種我們就會用v-on來處理。
語法為v-on:DOM事件="method名稱/JavaScript單行表示式"
舉例：v-on:click＝"onClick"
而v-on和v-bind一樣可以簡寫，v-on:會簡寫成@，
變成@DOM事件＝"method名稱/JavaScript單行表示式"

• methods方法
  範例：

<div id="app">
    <button v-on:click="onClick">test</button>
    <!--<button @click="onClick">test</button>-->
</div>

<script>
   var app = Vue.createApp({
       methods:{
         onClick(){
            alert('成功!');
         }
       },
   });
   app.mount('#app');
</script>

執行結果：

說明：
在method裡建立onClick方法，click是觸發事件（點擊或是懸浮）讓畫面彈出一個小視窗，視窗裡會顯示我們輸入的內容，在這個例子希望出現的是「成功」，就在alert裡輸入「成功」；而HTML裡用v-on監聽button的click DOM事件，當button被點擊後就會執行onClick方法。

• JavaScript單行表示式
  v-on事件處理除了可以直接帶入method之外，也可以用JavaScript單行表示式，用下面的例子舉例。

<div id="app">
    <button v-on:click="add(1)">點擊</button>
    <p>count={{count}}</p>
</div>

<script>
    var app = Vue.createApp({
       data:function(){
           return{
              count:0,
           };
       },
       methods:{
           add(value){
             this.count+=value;
           }
       },
    });
    app.mount('#app');
</script>

執行結果：

說明：
這個範例是計算使用者點擊按鈕的次數，data裡設定count的初始值，創建methods並使用add()來計算點擊次數。
this.count：從data裡取得count的表示法。
this.count+=value：相等於this.count= this.count+value
v-on:click="add(1)"：其中的add(1)表示每點一次count就會加1，如果寫成add(2)表示每點一次count就會加2。