《Vue零基础入门教程》第十一课：事件绑定指令
往期内容
1) 什么是事件绑定
将JS事件和对应的处理函数绑定
2) 语法
v-on:事件名="函数名"
// 简写
@事件名="函数名"示例
给一个按钮绑定点击事件
template部分
<button @click="handleClick">点击</button>js部分
methods: {
handleClick() {
alert('hello')
}
}
methods中定义的函数会挂载到vm实例对象上methods中定义的普通函数内部this指向vmmethods中, 不推荐使用箭头函数
3) 是否加括号
- 不加括号(70%): 直接写函数名称, 可以在回调函数中, 直接拿到事件对象
event - 加括号(20%): 加括号主要为了传参, 在回调函数中, 拿到参数
- 加括号(10%): 有时, 除了拿到参数外, 还需要原生的事件对象, 通过
$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>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 访问vm实例上的属性 -->
<!-- 70%: 在指令表达式中不加(). 就可以通过默认参数获取事件对象 -->
<button @click="handleClick">点击了{{count}}次</button>
<!-- 20%: 加() 目的是为了传参数 -->
<button @click="handleClick(100)">点击了{{count}}次</button>
<!-- 10%: 加() 在参数的最后, 通过$event也可以将事件对象传递 -->
<button @click="handleClick(100, $event)">点击了{{count}}次</button>
</div>
<script>
const { createApp } = Vue
const vm = createApp({
data() {
return {
count: 0,
}
},
methods: {
// 在methods中定义的就是事件回调函数, 默认情况可以接收事件对象 做为参数
handleClick(a, b) {
console.log(a, b)
// 事件回调. 当点击事件触发, 会被调用
this.count++
},
},
}).mount('#app')
// const div = document.querySelector('#app')
// div.addEventListener('click', function (e) {
// console.log(e)
// })
</script>
</body>
</html>
4) 事件修饰符
在绑定事件的时候, 可以添加事件修饰符, 常用的事件修饰符如下:
●.prevent: 阻止默认行为
●.stop: 阻止冒泡
●.once: 事件只会触发一次
示例
prevent示例
<!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>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<a @click.prevent="" href="http://www.baidu.com">baidu</a>
</div>
<script>
const { createApp } = Vue
const vm = createApp({}).mount('#app')
// 原生js方式
// document.querySelector('a').addEventListener('click', function (e) {
// // 调用事件对象的preventDefault方法, 阻止默认行为
// // 对于a元素而言, 默认行为就是跳转页面
// e.preventDefault()
// })
</script>
</body>
</html>
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>Document</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<ul @click="handleUl">
<!--
1. `.stop` 阻止事件向上冒泡
2. 事件修饰符可以连用
-->
<li @click.stop="handleLi">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
const { createApp } = Vue
const vm = createApp({
methods: {
handleUl() {
console.log('ul被点击了...')
},
handleLi() {
console.log('li被点击了...')
},
},
}).mount('#app')
</script>
</body>
</html>
5) 按键修饰符
主要针对 键盘事件
常用按键修饰符
- .enter: 回车键
- .up: 上
- .down: 下
- .left: 左
- .right: 右
系统功能键
- .ctrl
- .alt
- .shift
示例
<!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>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="submit" />
</div>
<script>
const { createApp } = Vue
const vm = createApp({
methods: {
submit() {
console.log('输入了数据, 按下回车键')
},
},
}).mount('#app')
</script>
</body>
</html>
指令语法的完整示意图:
https://cn.vuejs.org/guide/essentials/template-syntax#directives
原文地址：https://blog.csdn.net/2401_84715637/article/details/144109256
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！