文章目录
vue 事件处理
click 事件
v-on可以简写为@，比如v-on:click=“count"可以简写为 @click。
我们可以通过v-on直接绑定javaScript代码到DOM的click事件，v-on:click表示监听DOM的click事件，等同于：οnclick=”…"。
但是需要注意，如果我们使用原生的onclick，是无法获取到我们在Vue中定义的 count 参数的。
<div>
<button v-on:click="count1">count click事件</button>
</div>
<div>
<button v-on:click="count2(1)">count click事件 入参1</button>
</div>
<div>
<button @click="count3($event)">count click事件 默认传参$event 获取 html文本</button>
</div>
<div>
<button v-on:click="count4(2,$event)">count click事件 入参 和获取 html 文本</button>
</div>
<br>
我们可以通过 方法名(参数…) 的方式来直接传入参数，如果我们需要原生事件对象的话，
那么我们需要传入 $event。 如：onSumClick(1, 2, $event)
事件修饰符
.stop
.prevent
.capture
.self
.once（2.1.4 新增）
.passive（2.3.0 新增）
1、阻止单击事件继续传播,在这里事件不会再继续传播到 div
<div @click="count1">
div----------------------------------
<button @click="onSumClickInDiv(1, 2)">button 会弹出div click事件</button>
<button @click.stop="onSumClickInDiv(1, 2)">button 不会弹出div click事件</button>
</div>
2、 阻止事件的默认行为，在这里 a 标签不会再进行跳转
<a href="http://www.baidu.com/" @click="onSumClick(1, 2)"> 点击会跳转 http://www.baidu.com/</a>
<a href="http://www.baidu.com/" @click.prevent="onSumClick(1, 2)">点击不会跳转 http://www.baidu.com/</a>
3、表示事件只会触发一次
<button @click.once=“onSumClickInDiv(1, 2)”>onSumClick
4、 按键修饰符
按enter键
<input @keyup.enter="enter" />
按space键
<input @keyup.space="space" />
js
var app = new Vue({
el: '#app',
data: {
count1 (){
alert('count-click');
},
count2 (value){
alert(value);
},
count3 (event){
alert(event.target.innerHTML);
},
count4 (value,event){
alert(value + " ----- " +event.target.innerHTML);
},
inputMsg: '',
onSumClickInDiv(value1, value2){
alert(value1 + value2)
},
enter(event){
alert(event.keyCode==13)
},
space(event){
alert(event.keyCode==32)
}
},
});
