- 【Vue3 从入门到实战 进阶式掌握完整知识体系】008-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】005-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】006-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】003-Vue
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】019-Vue
8、事件绑定
基本使用
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
methods:{
add(){
this.num ++;
}
},
template: `
<div>
{{ num }}
<button @click="add">加一</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612211149823.png
绑定事件为表达式
不建议这么写
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
template: `
<div>
{{ num }}
<button @click="this.num ++;">加一</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612211342293.png
默认的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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
methods: {
// 当没有参数的时候默认存在一个 event 参数
add(event) {
console.log(event.target);
this.num ++;
}
},
template: `
<div>
{{ num }}
<button @click="add">加一</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612212227698.png
传参数
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
methods: {
add(number) {
this.num += number;
}
},
template: `
<div>
{{ num }}
<button @click="add(5)">加5</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612212321697.png
传参数且获取默认的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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
methods: {
add(number, event) {
this.num += number;
console.log(event.target)
}
},
template: `
<div>
{{ num }}
<button @click="add(5, $event)">加5</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612212537779.png
一个事件执行多个函数
函数必须带小括号，因此我们可以养成一个好习惯，只要绑定函数就带括号，这样也可以和属性有所区分！
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello World'
}
},
methods: {
say() {
console.log("哈哈哈哈哈哈");
},
jump(){
console.log("跳跳跳跳跳跳");
}
},
template: `
<div>
{{ message }}
<button @click="say(), jump()">点我呀</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612213009962.png
事件修饰符stop
停止事件冒泡
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello World'
}
},
methods: {
say() {
console.log("哈哈哈哈哈哈");
},
doSth(){
console.log("11111111111");
}
},
// 我们在点击 button 的时候，其外层的 div 标签的
// 点击事件也会执行，我们通过stop修饰符阻止事件对外冒泡
template: `
<div @click="doSth()">
{{ message }}
<button @click.stop="say()">点我呀</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612213840925.png
其他时间修饰符参考
<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div @scroll.passive="onScroll">...</div>
鼠标修饰符、按键修饰符、系统修饰符参考文档
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
https://v3.cn.vuejs.org/guide/introduction.html
网友评论