【Vue】v-on事件绑定指令

作用： 注册事件 = 添加监听 + 提供处理逻辑

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

// 内联语句：就是一段可执行代码
// 内联语句是在模板中写代码，所以它是可以直接访问到里面的数据的，但如果像下面在methods里的函数里使用，是访问不到的！
<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="methods中的函数名">按钮</button>
<button v-on:事件名="methods中的函数名(参数1，参数2)">按钮</button>
// `v-on:` 简写为 @

<button v-on:事件名="内联语句">按钮</button>

内联语句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>