说明：为了保持系列完整性，作者将Vue基础知识点也带着写一遍，可能要好多节，之后我们再讨论复杂的问题，不然没有根基。同时也照顾零基础的同学一块学习。

事件click

上篇我们已经入门Vue了，为了做实验，我们学习button的click绑定，这样可以方便后面做实验。所以学习哪个知识点是按照实验的目标进行的，没有特别的先后顺序。

问题提出

我想在Vue模板中使用button按钮，点击之后弹出一个alert对话框。这节，我们就解决这一个问题。

第一种方式：使用v-on:xx

v-on是专门绑定事件的，我们想绑定什么就绑定什么，click是其中的一种，代码如下：

<button v-on:click='handleClick'>点我</button>

这句代码最后的结果是，将当前的button添加了一个事件，熟悉DOM原生知识的同学知道，绑定事件是通过addEventListener进行的，那么这个按钮就添加了一个click事件，如下图所示：

那么当实际点击按钮时，DOM就会查找click回调函数，然后执行。

第二种方式：使用@click='xx'

@是v-on的另一种写法，两者等价就不再多写，代码如下：

<button @click='handleClick'>点我</button>

<!-- 等价于 -->

<button v-on:click='handleClick'>点我</button>

第三种方式：自定义事件，使用@add='xx'

公式：@自定义事件名="xx"

这种方式等价于v-on:add='xx'，但是这个事件我们发现它不是DOM原生事件，但不管怎样，它也被绑到button上了，代码如下：

<button @click='handleClick' @add='addEvent'>点我</button>

图示：

可以看到按钮被绑了两个事件，但是add在这里好像没什么用处，因为在DOM事件中是不会触发add的，所以结论是：我们一般都只绑定DOM相关的事件，比如click,mouseenter等之类的。

完整的测式代码

<div id="app">
  <div>
    <button @click="handleClick">点我</button>
  </div>
</div>
<script src="../vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {}
    },
    methods: {
      handleClick() {
        alert('button被点击了')
      }
    }
  });

</script>

说明：button按钮绑定一个click回调，函数名为handleClick。

这个代码运行的很好。

事件修饰符

事件修饰符就是在事件的创建中再加一些参数，比如最常见的阻止冒泡，如下所示：

模拟代码如下：

<div id="app">
    <div @click="parentClick">
        <button @click="handleClick">点我</button>
    </div>
</div>
<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        methods: {
            parentClick(){
                alert('父亲被点击了！！')
            },
            handleClick() {
                alert('button被点击了')
            }
        },
    });
</script>

当button的click事件触发之后，它会一路上升到父元素及祖先元素，并挨个问要不要处理一下。此处有一个父级div也做了一个click回调，因此得到触发。

假如我们不想让事件往上跑，就可以让事件阻止冒泡，那么就可以通过修饰符让Vue来做这个事。代码如下：

<div id="app">
    <div @click="parentClick">
        <button @click.stop="handleClick">点我</button>
    </div>
</div>

可以看到就是在click后面加一个stop修饰符。Vue支持的修饰符很多，这里抛砖引玉，剩下的大家可以查查即可。

特别注意的知识点：方法的定义

对于事件回调的方法，必须定义在methods内部，比如：

<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        methods: {
            parentClick(){
                alert('父亲被点击了！！')
            },
            handleClick() {
                alert('button被点击了')
            }
        },
    });
</script>

这样定义的handleClick就会和实例绑定，一种可能的错误是：

<script>
  var vm = new Vue({
  el: '#app',
  data() {
    return {}
  },
  methods: {
    parentClick(){
      alert('父亲被点击了！！')
    }
  },
  handleClick() {
    alert('button被点击了')
  }
});
</script>

此时的handleClick属于实例的options的一个普通字段，没有任何别的意义，它不能被实例直接引用！！

总结

这篇概括介绍了事件的绑定方法，修饰符和方法的定义，有了这些知识基本够用了，后面我们需要这些知识辅助做实验。