vue-模板语法-事件绑定与事件修饰符

程序员文章站 2022-06-23 12:27:41

vue-模板语法-事件绑定与事件修饰符目录文章目录1、事件绑定1.1、v-on1.2、事件处理1.3、参数传递2、事件修饰符***后记*** ：内容1、事件绑定事件绑定指令，v-on，简写’@’。1.1、v-on格式： <标签 v-on.事件="事件处理"> <标签 @事件="事件处理"> // 简写1.2、事件处理简单事件处理逻辑：直接把逻辑写在事件处理位置复杂事件处理：把事件处理封装...

vue-模板语法-事件绑定与事件修饰符

文章目录

1、事件绑定

1.1、v-on
1.2、事件处理
1.3、参数传递

2、事件修饰符

***后记*** ：

内容

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

vue-模板语法-事件绑定与事件修饰符

vue-模板语法-事件绑定与事件修饰符

目录

文章目录

内容

1、事件绑定

1.1、v-on

1.2、事件处理

1.3、参数传递

2、事件修饰符

后记 ：

vue-模板语法-事件绑定与事件修饰符

vue-模板语法-事件绑定与事件修饰符

后记：