以往添加點(diǎn)擊事件，相對(duì)于vue也有對(duì)應(yīng)的監(jiān)聽事件。

<div id="box">
    <!--書寫 vuejs 代碼-->

    <hr>
    <!--v-on: 事件綁定，v-on: 事件的類型，不要前綴 onclick onchange onkeyup-->
    <!--1. vuejs 里面的事件的回調(diào)函數(shù)可以增加括號(hào)，也可以不增加，增加和不增加有什么區(qū)別？-->
    <!--如果不增加 括號(hào)的時(shí)候， vuejs 會(huì)自動(dòng)給回調(diào)函數(shù)傳遞 event 事件源；如果加上括號(hào)，需要傳遞 $event,是vuejs幫我們封裝的事件源-->
    <!--加上括號(hào)，除了可以傳遞 $event 還可以傳遞用戶自定義的參數(shù),但一定要傳$event-->
    <button v-on:click="clickHandler($event, 1, 'abc', 'def')">vuejs事件綁定</button>
    <button @click="clickHandler">vuejs簡(jiǎn)化事件綁定</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',

        },
        methods: {
            // 回調(diào)函數(shù)，1. 不能使用箭頭函數(shù)，如果使用 this 代表Window全局
            // 2. 建議使用 es6 的簡(jiǎn)化寫法
            //...rest  如果是函數(shù)的參數(shù)列表，則被稱為 剩余運(yùn)算符，只能放置在最后的一個(gè)參數(shù)
            // es6 盡可能寫代碼的速度，方便程序員

            clickHandler (event, ...rest) {
                console.log(rest);

                console.log(event); // 事件源，鼠標(biāo)事件
                console.log(event.target); // 事件主體 DOM元素,button標(biāo)簽
                console.log(event.target.innerHTML); // 事件主體 DOM元素
                console.log(event.target.innerText); // 事件主體 DOM元素
             

            }
        }
    });


</script>

...rest可以無限接收大量的參數(shù)