<div><--- 打开控制台查看 ---></div>
<div id="app">
<!-- 阻止冒泡 .stop -->
<div @click="divInput">
11111111
<button @click="btnInput">不阻止</button>
<button @click.stop="btnInput">阻止</button>
</div>
<!-- 阻止默认行为 .prevent -->
<div>
<a href="https://www.baidu.com/">不阻止</a>
<a href="https://www.baidu.com/" @click.prevent>阻止</a>
</div>
<!-- 监听键盘事件 -->
<div>
<!-- <input type="text" @keyup="keyUp"> -->
<!-- 监听键盘的某个键帽 这里以回车键为例-->
<!-- 键修饰符，键别名写法 -->
<!-- <input type="text" @keyup.enter="keyUp"> -->
<!-- 键修饰符，键代码写法 -->
<input type="text" @keyup.13="keyUp">
</div>
<!-- 点击回调只能触发一次 -->
<button @click="abc">点击</button>
<button @click.once="abc">once</button>
</div>const app = new Vue({
el: '#app',
data: {
},
methods: {
divInput() {
console.log("div")
},
btnInput() {
console.log("btn")
},
keyUp() {
console.log("keyUp")
},
abc() {
console.log("abc")
}
}
})
External CSS
This Pen doesn't use any external CSS resources.