一、基本的事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本的事件</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
基本的事件：
1.绑定事件使用v-on:XXX（例如v-on:click）指令，可以简写为@XXX的形式
2.事件的回调需要设置在methods对象上，最终会出现在vm上
3.由Vue管理的函数不要使用箭头函数
4.调用函数不传参数时带不带括号都可以，例如 v-on:click="showInfo1" 和 v-on:click="showInfo1()"是一样的；
无参函数，Vue会默认传入一个event，定义函数时 showInfo1(){} 或 showInfo1(event){} 都可以；
但是有参函数，想要传入event就需要使用 $event 传参，例如 @click="showInfo2($event, '张三')"
-->
<body>
<div id="root">
<h1>欢迎来到{{name}}</h1>
<!-- v-on:XXX指令用于事件的处理，缩写为@XXX -->
<button v-on:click="showInfo1">事件一</button>
<button @click="showInfo2($event, '张三')">事件二</button>
</div>
</body>
<script>
const vm = new Vue({
el: "#root",
data: {
name: "JMS的世界"
},
methods: {
showInfo1(event) {
alert("你好，世界！")
},
showInfo2(event, name) {
alert("你好" + name)
}
}
})
</script>
</html>
二、事件的修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的修饰符</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
* {
padding: 10px;
}
.d1 {
margin-top: 10px;
background-color: aqua;
}
.d2 {
background-color: antiquewhite;
}
.d3 {
height: 100px;
width: 300px;
}
.d4 {
height: 300px;
width: 300px;
overflow: auto;
}
</style>
<body>
<!--
Vue中的时间修饰符：
1.prevent：阻止默认事件的发生（例如a标签的跳转事件）
2.stop：阻止事件冒泡
3.once：事件只触发一次
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素才能触发事件，也就是不能被其它元素的操作触发
6.passive：默认事件立刻执行，无需事件回调执行完毕
-->
<div id="root">
<h1>{{name}}</h1>
<div>
<!-- 这是一个普通a标签，点击会进行页面的跳转 -->
<a :href="url">点我跳转百度1</a>
<!-- 使用prevent阻止了默认事件的发生，这个a标签就不会再跳转了 -->
<a :href="url" @click.prevent="showInfo1">点我跳转百度2</a>
</div>
<!--
使用stop来阻止事件冒泡
点击按钮事件冒泡被阻止，d1和d2的事件不触发 （触发1次事件）
但是点击d2，并没有阻止事件冒泡，所以d2事件触发完成后，冒泡给d1，d1也会触发事件（触发2次事件）
-->
<div class="d1" @click="showInfo2">
<div class="d2" @click="showInfo2">
<button @click.stop="showInfo2">触发事件2</button>
</div>
</div>
<div>
<!-- once使得事件只触发一次，所以第一次触发后事件就失效了 -->
<button @click.once="showInfo2">触发一次事件2</button>
</div>
<!--
捕获阶段是由外向内
冒泡阶段是由内向外
这里设置d1的事件在捕获阶段就开始执行，所以会先触发d1的事件再触发按钮的事件
-->
<div class="d1" @click.capture="showInfo3('最外层')">
<button @click="showInfo3('按钮')">捕获阶段</button>
</div>
<!--
这里使用self来修饰d1 和 d2的事件，现在它们不能被事件冒泡触发事件，只有要亲自操作他们本身时，它们的事件才会触发
所以self同样可以阻止事件冒泡
-->
<div class="d1" @click.self="showInfo3('最外层')">
<div class="d2" @click.self="showInfo3('中间层')">
<button @click="showInfo3('按钮')">self触发</button>
</div>
</div>
<!--
这里使用passive来使得默认事件立刻执行
部分事件使用，并不常用
-->
<ul class="d4" @scroll.passive="showInfo4">
<li class="d3" style="background-color: antiquewhite;"></li>
<li class="d3" style="background-color: aqua;"></li>
<li class="d3" style="background-color: aquamarine;"></li>
<li class="d3" style="background-color: blueviolet;"></li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#root",
data: {
name: "事件的修饰符",
url: "https://www.baidu.com"
},
methods: {
showInfo1() {
alert("跳转到百度")
},
showInfo2() {
alert("触发了事件2")
},
showInfo3(who) {
console.log("我是" + who)
},
showInfo4() {
for (let i = 0; i < 10000; i++) {
console.log(i)
}
}
}
});
</script>
</html>
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：事件处理,Vue,name,修饰符,alert,事件 From： https://www.cnblogs.com/jmsstudy/p/17500803.html