<!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;
width: 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>