vue-模板语法-事件绑定与事件修饰符
程序员文章站
2022-03-21 13:12:35
vue-模板语法-事件绑定与事件修饰符目录文章目录1、事件绑定1.1、v-on1.2、事件处理1.3、参数传递2、事件修饰符***后记*** ：内容1、事件绑定 事件绑定指令，v-on，简写’@’。1.1、v-on格式： <标签 v-on.事件="事件处理"> <标签 @事件="事件处理"> // 简写1.2、事件处理简单事件处理逻辑：直接把逻辑写在事件处理位置复杂事件处理：把事件处理封装...
vue-模板语法-事件绑定与事件修饰符
目录
内容
1、事件绑定
事件绑定指令，v-on，简写’@’。
1.1、v-on
-
格式：
<标签 v-on.事件="事件处理"></标签> <标签 @事件="事件处理"></标签> // 简写
1.2、事件处理
- 简单事件处理逻辑：直接把逻辑写在事件处理位置
- 复杂事件处理：把事件处理封装为方法，事件处理位置写方法调用
1.3、参数传递
-
事件处理直接书写方法名
- 默认传递事件对象
-
事件处理书写方法名(参数列表)
- 如果需要事件对象，需要在参数列表最后，写$event
-
示例1.3-1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-cloak</title> </head> <body> <div id="app" v-cloak> <div v-text="num"></div> <button @click="num++">点击1</button> <button @click="handle1">点击2</button> <button @click="handle2(32, $event)">点击3</button> </div> <script src="../../asserts/js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1() { console.log(this); this.num++ }, handle2(n, event) { console.log(n); console.log(event); } }, }) </script> </body> </html> -
效果图示1.3-1：
2、事件修饰符
-
格式
<标签 @事件.事件修饰符="事件处理"></标签> -
常用事件修饰符
| 事件修饰符 | 描述 |
|---|---|
| stop | 阻止冒泡 |
| prevent | 阻止默认行为 |
| once | 只执行一次 |
| self | 自身触发的事件，才执行 |
- 事件修饰符可以串联
- @click.stop.prevent:阻止冒泡和默认行为
- @click.prevent.self:会阻止所有的点击事件（冒泡）
- @click.self.prevent:只会阻止对该元素自身的点击事件
后记 ：
本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785
前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
本文地址：https://blog.csdn.net/gaogzhen/article/details/107475958
下一篇： 解决页面返回数据空白问题