事件修饰符-防止事件传播 .stop
如果去掉.stop，会发现点击按钮弹出信息，点击确定，会再弹出'事件被传播'，这证明点击事件被传播，加上.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>
事件修饰符-阻止默认事件.prevent
点击超链接后，默认行为是跳转到src指定的地址，加上.prevent则阻止了默认行为
<div id="app">
<a @click.prevent="doThis">click me</a>
</div>
<script>
new Vue({
el: '#app',
methods: {
doThis: function() {
alert('点击了按钮')
}
}
})
</script>
事件修饰符-只执行一次事件.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>
