11. 事件处理

可以使用v-on来监听dom事件：
可以直接写表达式

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

或者，给一个方法名，并在methods中写上方法

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

或者调用某个方法（带上参数）

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

修饰符

暂且不管

为什么在html中监听事件

为啥不在代码中使用on去绑定事件？

1. html看的较为清晰，可以一眼就看出那些元素有事件功能
2. 无需再js代码中绑定事件，既不清晰，也不方便
3. 当一个事件所在的元素被销毁时，所在的所有事件都会被销毁，无需担心去清理。