不積跬步，無以至千里；不積小流，無以成江海。

Vuejs語言基礎

事件：

事件監聽可以使用 v-on 指令，可以接收一個定義的方法來呼叫，方法中也可以傳入引數。

格式：

v-on:事件名="函式名"  或者  v-on:事件名="函式名(引數...)"

語法糖：

@事件 = "函式名"   或者   @事件名 = "函式名(引數...)"

event：函式中的預設形參，代表原生的DOM事件

注意：如果需要使用原生DOM事件，則通過 $event 作為實參傳入。

<button @click="show($event)">click show!</button>

例子：

<div id="app">
    <button v-on:click="say">Say {{msg}}</button>
    <!-- $event 代表的是原生的DOM事件 -->
    <button @click="warn('www',$event)">Warn</button>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>
new Vue({
  el: "#app",
  data: {
    msg: "你好，www",
  },
  // 定義事件處理函式
  methods: {
    say: function (event) {
      // event 代表的是DOM的原生事件，vue會自動的而將它傳入進來。
      alert(this.msg);
      alert(event.target.innerHTML);
    },
    warn: function (name, event) {
      // 如果說函式有多個引數，而又需要使用原生事件，則需要使用$event作為引數傳入
      alert(name + "  " + event.target.tagName);
    },
  },
});
</script>

部落格借鑑：https://www.cnblogs.com/wjw1014/p/13384985.html