当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-模板语法-事件绑定与事件修饰符

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

2020年07月22日  | 移动技术网IT编程  | 我要评论

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：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXqFP2Fl-1595254926586)(./images/2020-07-20_v-on.png)]

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网