就是原生中的绑定事件处理函数 :::warning 注意事件是不需要绑定的，浏览器自带许多事件。我们只是对事件绑定了处理器。即每个事件可以邦宝处理器，而处理器就是处理函数。所以我们所做的就是绑定事件处理函数。 :::

事件就是用户的行为，而这些行为触发会导致事件对应的处理函数执行

绑定方式

使用v-on:event进行绑定事件处理，也可以使用@event进行简写：

• v-on:click
• @click

  绑定事件表达式

  对于逻辑简单的可以使用绑定事件表达式

  <template>
  <div>
  <h1>{{ count }}</h1>
  <button @click="count += 1">add</button>
  <button @click="count -= 1">minus</button>
  </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 0
    }
  }
  }
  </script>

  这就是绑定 JavaScript 表达式，但这是极不推荐。因为这样做会失去扩展性，要扩展必须全部修改表达式

  绑定处理函数

  对于逻辑复杂

  <template>
  <div>
  <h1>{{ count }}</h1>
  <button @click="addCount">add</button>
  <button @click="minusCount">minus</button>
  </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 0,
      log: []
    }
  },
  methods: {
      addCount(){
      this.count += 1;
      this.setLog('ADD', 1);
    },
    minusCount(){
        this.count -= 1;
      this.setLog('MINUS', 1);
    },
    setLog(eventName, num){
        this.log.push({
          eventName, 
        number: num,
        dataTime: new Date()
      })
    }
  }
  }
  </script>

  内联绑定处理函数

  也是用复杂的逻辑，内联的意思是在调用的方法不会执行 mehtods 里对应的方法，调用的目的为了传入参数

  <template>
  <div>
  <h1>{{ count }}</h1>
  <button @click="addCount(1)">add</button>
  <button @click="minusCount(1)">minus</button>
  </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 0,
      log: []
    }
  },
  methods: {
      addCount(num){
      this.count += num;
      this.setLog('ADD', num);
    },
    minusCount(num){
        this.count -= num;
      this.setLog('MINUS', num);
    },
    setLog(eventName, num){
        this.log.push({
          eventName, 
        number: num,
        dataTime: new Date()
      })
    }
  }
  }
  </script>

  $event

  一个特殊的变量，名字是不能修改。是 Vue 封装的事件对象。
  在内联绑定处理函数中使用时，相当于原生 JS 绑定事件处理函数的事件对象

  <button @click="console.log($event.target.name)" name="哈哈">单击</button>

  点击后输入出是 哈哈

  多事件处理函数绑定

  使用 ， 来隔开内联绑定，是可以绑定多个事件处理函数

  <template>
  <div>
  <h1>{{ count }}</h1>
  <button @click="addCount(1),setLog('ADD', 1)">add</button>
  <button @click="minusCount(1),setLog('MINUS', 1)">minus</button>
  </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 0,
      log: []
    }
  },
  methods: {
      addCount(num){
      this.count += num;
    },
    minusCount(num){
        this.count -= num;
    },
    setLog(eventName, num){
        this.log.push({
          eventName, 
        number: num,
        dataTime: new Date()
      })
    }
  }
  }
  </script>