vue系列教程-06vue的事件处理

本内容为系列内容，全部内容请看我的vue教程分类

• 我的个人博客
• 本节仓库地址
• 视频教程地址

点击事件

还记得jquery是怎么绑定点击事件的吗

$("button").click(function(){
   
  console.log('我被点击了')
});

那么vue是如何绑定点击事件呢？就要使用 v-on来监听dom的事件

首先实例化一个vue,定义一个数字 count

<script>
    let vm = new Vue({
   
        el: '#app',
        data() {
   
            return {
   
                count: 1
            }
        },
        created() {
   

        },
    })
</script>

然后我们在页面中设置一个按钮并绑定上点击事件，**""**里面也是可以直接写表达式的，这里我们点击事件就是增加 data在中 count的值，并且把count也渲染到页面中来

<div id="app">
    <button v-on:click="count++">click</button>
    <div>输出：{
  {count}}</div>
</div>

打开浏览器来看看效果

定义方法

那我们总不能一直将点击事件写在 **""**里面吧，况且有些非常复杂的逻辑呢？

这里我们就可以在 methods中定义方法，这个methods也是实例化vue需要传递的属性，我们这里定义一个sayHello的方法

<script&