新增的事件修饰符
.prevent---------阻止默认事件
<a href
="" @click
.prevent
="con()">点击
</a
>
<script
>
.stop---------阻止冒泡
<div
:class="'box'" @click
="parentHandler">
<p @click
.stop
="sonHandler">11111</p
>
</div
>
.once---------事件只执行一次
<p @click
.once
="parentHandler">22222</p
>
.capture---------把事件传播变成捕获
<div
:class="'box'" @click
.capture
="parentHandler">
<p @click
="sonHandler">11111</p
>
</div
>
.self---------点击自身触发，点击子元素不触发 不能代替冒泡
<div
:class="'box'" @click
="parentHandler">
<div
:style
="{height:'100px',background:'#ccc'}" @click
.self
="midHandler">
<p @click
="sonHandler($event)">11111</p
>
</div
>
</div
>
键盘事件修饰符
<input type
="text" @keyDown
.65="keyHandler">
<!-- 一些常用的按键有别名
-->
<!-- up down left right enter space
delete tab esc
-->
<!-- 如果一个按键没有别名，那么直接用它的键码值
-->
script
var vm
= new Vue({
el
: "#app",
data
: {
flag
: true
},
methods
: {
con(event
) {
console
.log(event
)
console
.log("a链接")
},
parentHandler() {
alert("parent")
},
sonHandler(event
) {
console
.log(event
);
alert("son");
},
midHandler(){
alert("mid")
},
keyHandler(){
console
.log("按键")
}
}
})
