v-on指令的使用

先上图,我们设置两个按钮:

第一种我们直接在行内进行运算,通过v-on绑定click点击事件,当点击按钮时,可以直接加一

第二种我们给按钮绑定一个sub方法,再在methods里面来定义这个方法,也能够实现同样的功能
<div id="app">
    {{ count }}
    <br>
    <button v-on:click="count += 1">加1</button>
    <br>
    <button v-on:click="sub">减1</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 1
        },
        methods: {
            sub(){
                this.count -= 1
            }
        }
    })
</script>

运行结果如下

当我们点击加1时数字就会加1,当点击减1数字就会减1

vue官方给这个v-on设置了@替代符,使用@符号就等于v-on:,所以以上代码可以如下书写

<div id="app">
    {{ count }}
    <br>
    <button @click="count += 1">加1</button>
    <br>
    <button @click="sub">减1</button>
</div>

事件修饰符的作用

示例 示例说明
@click.stop 阻止单击事件冒泡
@submit.prevent 提交页面不再重载页面
@click.capture 添加事件监听器时使用事件捕获模式
@click.self 只有当单击事件是元素的自身事件时,才会触发
@click.once 只触发一次。

总结:v-on指令用来绑定事件,既可以直接行内运算,还能够定义方法;事件修饰符就是用来对点击事件存在的一些默认行为进行设置的,例如事件冒泡,事件捕获等等