<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
div.box,
div.box2 {
background-color: chartreuse;
200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.box2 {
background-color: coral;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="run">点击</button>
<p>您点击了{{counter}}次</p>
<!-- 添加.once事件修饰符，表示事件只会触发一次 -->
<button @click.once="say('hi')">say hi</button>
<!--没加事件修饰符.stop -->
<div @click="box1" class="box">
<span @click="box">hello Vue</span>
</div>
<!--添加修饰事件.capture 在点击内部事件box时,先触发外部被.capture修饰的事件，再触发内部元素的事件-->
<div @click.capture="box1" class="box2">
<span @click="box">hello capture</span>
</div>
<!-- 添加事件修饰符.stop -->
<div @click="box1" class="box">
<span @click.stop="box" >hello prevent</span>
</div>
<!-- 添加事件修饰符.self 当前元素自身时触发处理函数-->
<div @click.self="box1" class="box2">
<span @click="box">hello self</span>
</div>
<!-- 没有添加.prevent时间修饰符 -->
<a href="https://www.baidu.com">百度</a>
<!-- 添加.prevent事件修饰符 点击时禁止重载 -->
<a href="https://www.baidu.com" @click.prevent>百度</a>
<!-- 事件修饰符可以组合使用 表示第一点击禁止重载，第二次之后就可以跳转 -->
<a href="https://www.baidu.com" @click.prevent.once>百度</a>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
counter: 0,
},
methods: {
run: function () {
// this指代的vm
this.counter++;
},
say: (str) => {
alert(str);
},
box: function () {
alert("first run");
},
box1: function () {
alert("second Run");
},
}
});
</script>
</body>
</html>