当handle后面的括号去掉时,就会出现上面的情况。
<title>Instance Methods Events</title>
</head>
<body>
<div id="app">
点击次数:{{count}}
<button @click="handle()">点击我每次加1</button>
<button @click="handle(8)">点击我每次加8</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
handle:function(count){
count = count || 1;//如果传count就是count,没有就默认是1
this.count += count;
}
}
})
</
script>
如果方法中有参数,但是没有加括号,默认传原生事件对象
修饰符
阻止向上冒泡
<body>
<div id="app">
<div @click="divClick" style="height:100px;width:100px; background-color:brown;">
<button @click.stop="btnClick">点击我</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
divClick:function(){
alert('div被点击了')
},
btnClick:function(){
alert('BUTTON被点击了')
}
}
})
</script>
点击button时,div也是那块区域,是向上冒泡了,一块都有反应;
加上一个stop,则点击button和div就会分开了。
prevent的用法
每次提交整个页面都会重新加载,则反应速度会变慢
提交表单 现在不让她刷新整个页面,只刷新提交的部分:提交表单