div id="app">
!-- .self修饰符 只有点击自身的时候才会被触发 -->
div class="div1" @click.self="fn1">
div1
<!-- .stop修饰符 阻止冒泡 -->
<div class="div2" @click="fn2">
div2
</div>
</div>
<!-- .prevent 阻止默认事件的触发 -->
<a href="http://www.baidu.com" @click.prevent="a">点我试试</a>
<br>
<!-- 给表单元素使用的修饰符 -->
<!-- @keyup.enter 表示按下回车抬起的时候触发b方法 -->
<!-- @keyup.13 也可以使用keyCode来表示 -->
<input type="text" @keyup.13="b" v-model="msg">
<h1>{{msg}}</h1>
<!-- 按下回车 清空输入框里面的字 -->
</div>
<script src="./vue2.6.14.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ''
},
methods: {
fn1() {
alert('div1')
},
fn2() {
alert('div2')
},
a() {
alert('试试就试试')
},
b() {
this.msg = "";
alert('输入成功')
}
}
});
</script>
