这节课我们来学习一下vue中的事件绑定，我们可能得分两节课来学习事件绑定。vue中的事件绑定在我们之前的课程中或多或少都提到过，虽然vue中的事件绑定看起比原生javascript简单多了，但是还是有不少东西要学的，那么我们现在就来详细的学习一下。

简单的click事件绑定

我们先来学习简单click事件绑定，在开始之前捞老步骤走一遍，新建一个demo19.html文件，复制一下基础代码。我们来实现一个简单的计算器，先声明变量count默认为0，

data() {
  return {
    count:0
  }
},

然后来实现一下简单的界面。把count显示界面上，再弄一个增加按钮。

template: `
      <div>
        <div>数量：{{count}}</div>
        <button>增加</button>
      </div>`

我们希望每点一次按钮count就加1。所以我们先实现一下click事件的响应方法，在methods中来声明一个方法的叫addCount，在里面我们让this.count++。

然后把事件方法通过v-on:click="addCount" 绑定到增加按钮上。

template: `
      <div>
        <div>数量：{{count}}</div>
        <button v-on:click="addCount">增加</button>
      </div>`

就这样，实现我们的计数器，打开浏览器看看效果。

v-on是可以简写成@，我再来改写一下代码。

template: `
      <div>
        <div>数量：{{count}}</div>
        <button @click="addCount">增加</button>
      </div>`

event默认参数

在事件响应方法中，vue会默认给我们传入一个event 参数，它是我们触发响应事件dom的目标对象。里面有很多目标dom节点的信息，我可以打印出来看一下。

 addCount(event){
        console.log(event)
        this.count++
      }

打印出来的东西挺多的，有时候我们可能会使用到里面的数据，但是这里就不过多的讲解了。

事件传参数

我们再来看一下事件传参，在事件绑定的时候我们就可以直接传入自定义参数，比如我们传入2 我们希望count 它不再是写死的默认加1， 我们给它传一个数，让它去加这个数，这样就显得灵活多了。在方法里面我声明一个num去接收这个参数。

 methods: {
      addCount(num){
        this.count+=num
      }
    },
    template: `
      <div>
        <div>数量：{{count}}</div>
        <button @click="addCount(2)">增加</button>
      </div>`

我们传递了参数情况一下，event它是默认不传递的，如果我们需要再使用到event，就需要我们手动传入$event，并且得定义指定接收的参数。

methods: {
      addCount(num,event){
        this.count+=num
        console.log(event)
      }
    },
    template: `
      <div>
        <div>数量：{{count}}</div>
        <button @click="addCount(2,$event)">增加</button>
      </div>`

一个事件响应多个方法

如果遇到一些复制需求，需要们点击按钮去执行多个方法的时候，我们在事件绑定的时候用逗号( , ) 来分割就可以，但是需要给每个方法都带上()。

methods: {
      addCount(num,event){
        this.count+=num
        console.log(event)
      },
      handelClick(){
        alert("方法2")
      }
    },
    template: `
      <div>
        <div>数量：{{count}}</div>
        <button @click="addCount(2,$event),handelClick()">增加</button>
      </div>`