一、元素事件的绑定
(1)v-on基本使用
我们先来个demo~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: orange;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 1. 基本写法 -->
<div class="box" v-on:click="divClick()"></div>
<!-- 2. 语法糖写法(重点掌握) -->
<div class="box" @click="divClick()"></div>
<!-- 3. 绑定的方法的位置,也可以写成一个表达式(不常用) -->
<!-- 不建议使用,尽量不要在模板里面去改js里面的东西,代码的阅读性很差 -->
<h2>{{ counter }}</h2>
<button @click="increment">+1</button>
<button @click="counter++">+1</button>
<!-- 4. 绑定其他方法 -->
<div class="box" @mousemove="divMousemove"></div>
<!-- 5.1 元素绑定多个事件 -->
<div class="box" @click="divClick()" @mousemove="divMousemove"></div>
<!-- 5.2 绑定多个事件另外一种写法(不常见)-->
<div class="box" v-on="{ click: divClick, mousemove:divMousemove }"></div>
<div class="box" @="{ click: divClick, mousemove:divMousemove }"></div>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data: option api
data: function () {
return {
counter: 0,
}
},
methods: {
// es6增强写法
divClick() {
console.log("触发了divClick函数")
},
// 常规写法
divClick2: function () {},
increment() {
this.counter++
},
divMousemove() {
console.log("触发divMousemove函数")
},
},
})
app.mount("#app")
</script>
</body>
</html>
(2)v-on的参数传递
① 默认传递event对象
② 传的只有自己的参数(会被默认传递的event对象覆盖掉)
③ 传自己的参数还有event对象
这边我们来一个测试,假如说我们明确传了只有2个,我们看下这个event打印的是什么?
event打印出来是undefined。
那怎么让他能打印出来呢?有人说,在上面把event放进去不就好啦。那我们试一下。
看效果:你这样子是不是相当于把event这个字符串传过来了?所以是行不通的。
还有小伙伴说,那我直接传个event不就行了吗?那你这样子不就相当于把event当个变量传进去了吗,能在data里面找到event这个变量吗,很明显也是行不通的。
那我们到底怎么办才能把event这个当前事件的对象打印出来呢? 这里有个特殊的语法。
总结:在模板中想要明确的获取event对象:$event。
下面附源码,大家可以自己去试一下~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1. 默认传递event对象 -->
<button @click="btn1Click">按钮1</button>
<!-- 2. 只有自己的参数-->
<button @click="btn2Click('daxia', 18)">按钮2.1</button>
<button @click="btn2Click('daxia', age)">按钮2.2</button>
<!-- 3. 自己的参数和event对象 -->
<!-- 在模板中想要明确的获取event对象:$event -->
<button @click="btn3Click('daxia', age, $event)">按钮3</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data: option api
data: function () {
return {
age: 19,
}
},
methods: {
// 1. 默认参数event对象
// 总结: 如果在绑定事件的时候,没有传递任何的参数,那么event对象会被默认传递进来
btn1Click(event) {
console.log("btn1Click", event)
},
// 2. 明确参数(只有自己的参数):
btn2Click(name, age) {
console.log("btn2Click", name, age)
},
// 3. 明确参数+event
btn3Click(name, age, event) {
console.log("btn2Click", name, age, event)
},
},
})
app.mount("#app")
const btnEl = document.querySelector("button")
btnEl.onclick = function (event) {}
</script>
</body>
</html>
④ 总结
(3)v-on的修饰符(了解)
① .stop 阻止冒泡
我们来举个栗子🌰~
我们写了一个div,里面包了一个button按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<button @click="btnClick">按钮</button>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data: option api
data: function () {
return {
message: "Hello Vue",
}
},
methods: {
btnClick() {
console.log("btnClick")
},
},
})
app.mount("#app")
</script>
</body>
</html>
目前页面展示成这样子:
当浏览器在按钮上面产生了一个事件的时候,他本质上会对这个事件进行冒泡,当然也会有一个捕获的过程。
当我们按钮上面产生了一个事件,那这个事件不仅仅会产生在按钮上面,还会向上冒泡,因为这个按钮在这个div里面。所以这个div也会产生这个点击事件。
所那此时如果我们div上面也绑定了click点击事件,我们点击这个button按钮看看效果。
那我们怎么去阻止他冒泡呢?
以前我们是这样子做的,然后去点击按钮,确实实现了阻止冒泡。
vue现在给我们提供了一个简便的方式:
直接在绑定的事件上面添加一个修饰符 stop ,有了这个修饰符之后,自动帮你调用这个event.stopPropagation()方法。