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指令用来绑定事件,既可以直接行内运算,还能够定义方法;事件修饰符就是用来对点击事件存在的一些默认行为进行设置的,例如事件冒泡,事件捕获等等
- 还没有人评论,欢迎说说您的想法!