v-on是事件绑定也可以直接写@
v-on:click=""
@click=""
<body>
<div id="app">
<h2>{{count}}</h2>
<button type="button" @click="add()">+</button>
<button type="button" @click="sub()">-</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
count:0
}
},
methods: {
add:function(){
this.count++
},
sub(){
this.count--
}
},
computed:{
}
})
</script>
v-on的传参
如果在页面中传的是实参 在methods中写的是形参.
如果在页面中没有写实参但是留有括号 在在methods中写了形参 会打印undefined
如果在页面中没有写实参也没有留有括号 在在methods中写了形参 会打印event
如果你想同时传事件和参数 在页面中那就要第一参数写$event,第二个是参数
如果你只传事件 那么在页面中可以完全不写括号 或者btn2($event)*/
v-on的修饰符
v-on 的修饰符有.stop阻止事件继续传播 .prevent 阻止标签默认行为 .capture .self 当在 event.target 是当前元素自身时触发处理函数 .once事件只会触发一次 .passive让浏览器不阻止事件的默认行为,等
其中stop和prevent最为常用