事件修飾符-防止事件傳播 .stop
如果去掉.stop，會發(fā)現(xiàn)點擊按鈕彈出信息忆蚀，點擊確定矾利，會再彈出'事件被傳播'，這證明點擊事件被傳播馋袜，加上.stop男旗，就解決了事件傳播的問題
<div id="app">
<div @click="toDo">
<button @click.stop="doThis">click me</button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: function() {
toDo: function(){
alert('事件被傳播');
},
doThis: function() {
alert('點擊了按鈕')
}
}
})
</script>
事件修飾符-阻止默認(rèn)事件.prevent
點擊超鏈接后，默認(rèn)行為是跳轉(zhuǎn)到src指定的地址欣鳖，加上.prevent則阻止了默認(rèn)行為
<div id="app">
<a @click.prevent="doThis">click me</a>
</div>
<script>
new Vue({
el: '#app',
methods: {
doThis: function() {
alert('點擊了按鈕')
}
}
})
</script>
事件修飾符-只執(zhí)行一次事件.once
<div id="app">
<div @click="toDo">
<button @click.stop="doThis">點擊+1{{count}}</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
count : 0
},
methods: {
doThis: function() {
this.count++
}
}
})
</script>
按鍵修飾符-keyup.enter
keyup事件類型 enter回車鍵
也可以使用keyup.code code值為鍵盤按鍵值剑肯，13為回車鍵
<div id="app">
<input type="text" @keyup.enter="keyUp"/>
<input type="text" @keyup.13="keyUp"/>
</div>
<script>
new Vue({
el: '#app',
methods: {
keyUp: function() {
alert('按了回車鍵')
}
}
})
</script>
