事件綁定與處理，是對任何一個互動性網頁來說都非常重要的功能，我們之前使用比較多的Vue.js指令，更多是有關於模板，今天我就要來學習Vue.ja關於事件處理的部分。

v-on

前面關於模板的Vue.js指令有很多針對各種部份的不同指令，但對於事件，有關係的指令就只有一個v-on。而v-on最簡單的應用方式也是非常易懂的一段程式:v-on: 事件名稱="運算式"，也可以簡寫成為@事件名稱="運算式"。
先嘗試一下簡單的，當user點擊按鈕"+1"將在data中把count+1並輸出到網頁，關於運算式的部分，也可以先將event handler function寫在methods裡面，再用v-on來綁定指令。這裡使用的是第一種的方法:

    <div id="test1">
        <p>Count: {{ count }}</p>
        <button @click="count++">+1</button>
    </div>

        const t1 = Vue.createApp({
            data () {
                return {
                count: 0
                }
            },
        }).mount('#test1');

網頁呈現:

event事件

當監聽的事件發生時，在JavaScript裡面是由EventListener去建立"事件物件(event object)"去包含所有與事件相關的屬性與資訊。而到了Vue.js的場合，事件是由v-on和methods來取得event object。所以當v-on觸發事件時，如果event中沒有指定參數，預設會將event object帶入來當作參數。而如果有需要代入參數的話，可以指定代入$event，有代入參數的程式將會像這樣:

    <div id="test1">
        <p><input v-model.number="amount"></p>
        <p>Count: {{ count }}</p>
        <button @click="plus(amount, $event)">plus</button>
    </div>

        const t1 = Vue.createApp({
            data () {
                return {
                    amount: 0,
                    count: 0
                }
            },
            methods: {
                plus(amount, event){
                    console.log(event.target.tagName);
                    this.count += amount;
                }
            }
        }).mount('#test1');

今天的進度暫時先到這裡，明天將繼續事件綁定的部分進入到v-on的修飾子部分，謝謝閱讀。