<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 300px;
height: 300px;
background-color: thistle;
}
.div2 {
width: 150px;
height: 150px;
background-color: tomato;
}
</style>
</head>
<body>
<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>
</body>
</html>
