Vue事件修饰符实例

已于 2022-02-08 17:02:48 修改
阅读量651 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript elementui
于 2022-02-08 16:49:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cielslove/article/details/122827082
版权

以下是代码源码，可直接复制运行：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue测试实例009</title>
		<script src="vue.js"></script>
	</head>
	<body>
		“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。
		<!-- 阻止单击事件继续传播 -->
		<div id="example">
			<h2>主要是理解stop的作用</h2>
			<div @click="parentEvent()">
	            <a @click="test01()">v-on:click阻止不了单击事件继续传播，父事件处理程序被执行</a>
	            <br>
	            <a @click.stop="test01_stop()">
	            	v-on:click.stop阻止单击事件继续传播,阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
	            </a>
	        </div>
	        <h2>主要是理解prevent的作用</h2>
	        <div>
	        	<a href="https://www.baidu.com" @click="test02()">我去百度（无法阻止事件的默认行为）</a>
	        	<br>
				<a href="https://www.baidu.com" @click.prevent="test02_prevent()">我不去百度（阻止事件的默认行为）</a>
	        </div>
	        <h2>主要是理解submit结合prevent的刷新作用</h2>
	        <form @submit="test02_01()">
				简单输入(提交事件重新加载页面):
				<input type="text" v-model="formData1.name">
				单选：
				<input type="radio" v-model="formData1.open" value="1"> 开
				<input type="radio" v-model="formData1.open" value="0"> 关
				下拉选择框:
				<select v-model="formData1.weidao">
					<option value="xl">香辣</option>
					<option value="ml">麻辣</option>
					<option value="qt">清汤</option>
					<option value="yy">鸳鸯</option>
				</select>
				<button type="submit">确定</button>
			</form>
	        <form @submit.prevent="test02_01_prevent()">
				简单输入(提交事件不再重载页面):
				<input type="text" v-model="formData2.name">
				单选：
				<input type="radio" v-model="formData2.open" value="1"> 开
				<input type="radio" v-model="formData2.open" value="0"> 关
				下拉选择框:
				<select v-model="formData2.weidao">
				<option value="xl">香辣</option>
				<option value="ml">麻辣</option>
				<option value="qt">清汤</option>
				<option value="yy">鸳鸯</option>
				</select>
				<button type="submit">确定</button>
			</form>
	        <h2>主要是理解prevent.self的作用</h2>
	        <div @click="parentEvent()">
	        	<a href="https://www.baidu.com" @click="test03()">我去百度
					<div @click="test03_div()">divtest03_div0标签</div>
					<div @click="test03_div()">divtest03_div1标签</div>
					<div @click="test03_div()">divtest03_div2标签</div>
				</a>
				<br>
				<a href="https://www.baidu.com" @click.prevent.self="test03_prevent_self()">我不去百度
					<div @click="test03_prevent_self_div()">test03_prevent_self0标签</div>
					<div @click="test03_prevent_self_div()">test03_prevent_self1标签</div>
					<div @click="test03_prevent_self_div()">test03_prevent_self2标签</div>
				</a>
			</div>
			<h2>主要是理解self.prevent的作用</h2>
	        <div @click="parentEvent()">
	        	<a href="https://www.baidu.com" @click="test04()">我去百度
					<div @click="test04_div()">divtest04_div0标签</div>
					<div @click="test04_div()">divtest04_div1标签</div>
					<div @click="test04_div()">divtest04_div2标签</div>
				</a>
				<br>
				<a href="https://www.baidu.com" @click.self.prevent="test04_self_prevent()">我不去百度
					<div @click="test04_self_prevent_div()">test04_self_prevent0标签</div>
					<div @click="test04_self_prevent_div()">test04_self_prevent1标签</div>
					<div @click="test04_self_prevent_div()">test04_self_prevent2标签</div>
				</a>
			</div>
			<h2>主要是理解修饰符可以串联（例如：click.stop.prevent或者click.prevent.stop）的作用</h2>
			<div @click="parentEvent()">
	        	<a href="https://www.baidu.com" @click="test05()">
	        		我去百度（无法阻止事件的默认行为以及阻止不了单击事件继续传播，父事件处理程序被执行）
	        	</a>
	        	<br>
				<a href="https://www.baidu.com" @click.stop.prevent="test05_stop_prevent()">
					我不去百度（阻止事件的默认行为以及阻止单击事件继续传播,阻止事件冒泡到父元素，阻止任何父事件处理程序被执行）
				</a>
				<br>
				<a href="https://www.baidu.com" @click.prevent.stop="test05_prevent_stop()">
					我不去百度（阻止单击事件继续传播,阻止事件冒泡到父元素，阻止任何父事件处理程序被执行以及阻止事件的默认行为）
				</a>
	        </div>
			<h2>添加事件监听器时使用事件捕获模式（即内部元素触发的事件先在此处理，然后才交由内部元素进行处理）</h2>
			<div @click="parentEvent()">
				第一层
	             <div @click="test06()">
                	第二层
	                <div @click="test06_third()">
	                	第三层
	                </div>
	             </div>
	             <p> 正常情况下：点击第三层时候一层一层冒泡，先第三层=》第二层=》第一层</p>
	        </div>
	        <span>====================</span>
	        <div @click="parentEvent()">
				第1层
	             <div @click.capture="test06_capture()">
                	第2层
	                <div @click="test06_third()">
	                	第3层
	                </div>
	             </div>
	             <p> 使用了关键字：capture 点击第三层时候，先第2层=》第3层=》第1层</p>
	        </div>
	        <h2>只当在 event.target 是当前元素自身时触发处理函数（即事件不是从内部元素触发的）</h2>
	        <div @click="parentEvent()">
				第一层
	             <div @click="test07()">
                	第二层
                	<div @click="test07_third()">
	                	第三层
	                </div>
	             </div>
	             <p> 正常情况下：点击第三层时候一层一层冒泡，先第三层=》第二层=》第一层</p>
	        </div>
	        <span>====================</span>
	        <div @click="parentEvent()">
				第1层
	             <div @click.self="test07_self()">
                	第2层
                	<div @click="test07_third()">
	                	第3层
	                </div>
	             </div>
	             <p>
	             	使用了关键字：self 点击第三层时候，先第三层 =》第一层<br>
	             	第二层的话，直接跳过不是我自己点击的，不出来
	         	</p>
	        </div>
	        <h2>点击事件将只会触发一次</h2>
			<a @click.once="test08()">点击事件将只会触发一次</a>
			<h2>这是普通button，主要是用来测试method顺序的</h2>
			<div>
				<button @click="greet()">Greet</button>
			  	<button v-on:click="warn('Form cannot be submitted yet.', $event)">
			  		Submit
				</button>
			</div>
		</div>
		<script>
			var example = new Vue({
			  el: '#example',
			  data: {
			    name: 'Vue.js',
			    formData1: {
		          name: "",
		          opn: "",
		          weidao: ""
		        },
		        formData2: {
		          name: "",
		          opn: "",
		          weidao: ""
		        }
			  },
			  // 在 `methods` 对象中定义方法
			  methods: {	
                greet(event) {
			      // `this` 在方法里指向当前 Vue 实例
			      alert('Hello ' + this.name + '!')
			      // `event` 是原生 DOM 事件
			     /* if (event) {
			        alert(event.target.tagName)
			      }*/
			    },
			    warn(message, event) {
				    // 现在我们可以访问原生事件对象
				   /* if (event) {
				      event.preventDefault()
				    }*/
				    alert(message)
				},	
			  	parentEvent(){
                    alert("我是父节点，被执行了！")
                },
			  	test01(){
                    alert("我是没有stop后缀的click（v-on:click）")
                },
				test01_stop(){
					alert('我是有stop后缀的click（v-on:click.stop）')
				},
				test02(){
                    alert("我是没有prevent后缀的click（v-on:click）")
                },
				test02_prevent() {
					alert('我是有prevent后缀的click（v-on:click.prevent）')
				},
				test02_01() {
                    alert("我是没有prevent后缀的submit（v-on:submit）,我要刷新页面啦")
                },
				test02_01_prevent() {
					alert('我是有prevent后缀的submit（v-on:submit.prevent），我不不不不刷新页面啦')
				},
				test03() {
                    alert("我是没有prevent.self后缀的click（v-on:click）")
                },
                test03_div() {
					alert("我是没有prevent.self后缀的click（v-on:click）,a标签里面的div")
				},
				test03_prevent_self() {
					alert('我是有prevent.self后缀的click（v-on:click.prevent.self）')
				},
				test03_prevent_self_div() {
					alert('我是有prevent.self后缀的click（v-on:click.prevent.self）,a标签里面的div')
				},
				test04() {
                    alert("我是没有self.prevent后缀的click（v-on:click）")
                },
                test04_div() {
					alert("我是没有self.prevent后缀的click（v-on:click）,a标签里面的div")
				},
				test04_self_prevent() {
					alert('我是有self.prevent后缀的click（v-on:click.self.prevent）')
				},
				test04_self_prevent_div() {
					alert('我是有self.prevent后缀的click（v-on:click.self.prevent）,a标签里面的div')
				},
				test05() {
                    alert("我是没有prevent后缀的click（v-on:click）")
                },
				test05_stop_prevent() {
					alert('我是有stop.prevent后缀的click（v-on:click.stop.prevent）')
				},
				test05_prevent_stop() {
					alert('我是有prevent.stop后缀的click（v-on:click.prevent.stop）')
				},
				test06() {
                    alert("我是没有capture后缀的click（v-on:click）")
                },
				test06_capture() {
					alert('我是有capture后缀的click（v-on:click.capture）')
				},
				test06_third() {
			      alert('我是测试capture第三层div的点击事件啦')
			    },
			    test07() {
                    alert("我是没有self后缀的click（v-on:click）")
                },
				test07_self() {
					alert('我是有self后缀的click（v-on:click.self）')
				},
				test07_third() {
			      alert('我是测试self第三层div的点击事件啦')
			    },
			    test08() {
                    alert("你点击我无数次次，我就只响应一次（v-on:click.once）")
                }	
            }
			})
		</script>
	</body>
</html>

以下是代码运行结果：

cielslove
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 事件处理操作实例详解
10-17
主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下
Vue.js学习笔记之修饰符详解
12-09
除了上述介绍的修饰符，Vue.js 还有其他的修饰符，如`.capture`(捕获模式)、`.self`(只处理自身触发的事件)、`.once`(只触发一次)等，它们都极大地增强了Vue的事件处理能力。理解并熟练运用这些修饰符，可以使你的...
使用 Vue 实例（指令 | 修饰符）
AI-fisher的博客
09-18 356
文章目录一、 指令1.1 更新元素的文本内容1.2 更新元素的HTML内容1.3 条件指令1.4 循环指令1.5 事件绑定1.6 属性绑定1.7 在表单上创建双向数据绑定1.8 插槽1.9 不编译，原样输出1.10 编译完成后再显示1.11 只渲染元素和组件一次二、修饰符2.1 .sync修饰符 一、 指令 指令系统是 Vue 的一大特色，DOM 的接管首先是由浏览器来完成的，浏览器不能识别指令，从而避开浏览器的接管，然后转入 Vue 的接管，指令里面可以写语句，它是一种特殊的 HTML 自定义属性，用来操
vue事件修饰符示例以及介绍
stars______的博客
10-10 374
加上 .self后,如果触发了div的click，那么只有event.target是这个div时才会执行这个方法，此时点击button之打印一次button。此时点击里层div（我是大聪明）先执行里层方法后，再执行外层方法（我是二聪明），故有两个弹窗。此时点击里层div（我是大聪明）先执行里层方法后，再执行外层方法（我是二聪明），故有两个弹窗。给父层加上.captrue后先执行外层方法（我是二聪明），再执行里层方法（我是大聪明）不加时，点击a标签后先执行方法，方法执行结束跳转链接。1vue中的事件修饰符。
vue事件修饰符的使用
nick_zhang的博客
01-20 684
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
【Vue笔记】Vue的事件修饰符
qiaoyangla的博客
02-07 560
事件的基本作用 1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名 2.事件的回调需要配置在methods对象中，最终在vm上 3.methods中配置的函数，不要用箭头函数！否则this就不是vm 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实调对象 5.@click=“demo”和@click="demo（$event）"效果一致，但后者可以传参 事...
vue事件修饰符01
DanielLeefu的博客
10-09 114
vue事件修饰符以及跑马灯小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
对vue事件的延迟执行实例讲解
10-18
在本篇讲解中，我们将深入探讨Vue事件的延迟执行，特别是如何利用`debounce`修饰符。 1. **事件绑定**：Vue中的事件绑定使用`v-on`或简写`@`，如`@keyup`，用于监听键盘抬起事件。在例子中，`<input>`元素绑定了`...
vue实现绑定事件的方法实例代码详解
10-16
下面将详细解释如何在Vue中实现事件绑定，以及一些常用的事件修饰符。 一、事件绑定方式 Vue.js 中的事件绑定使用`v-on`指令完成。基本语法是 `<element v-on:event="handler">`，其中 `event` 是要监听的事件类型...
Vue 框架之键盘事件、健值修饰符、双向数据绑定
10-17
Vue 框架是当前流行的前端开发工具，其在构建用户界面时提供了许多便捷的功能，如键盘事件处理、键值修饰符以及双向数据绑定。在本文中，我们将深入探讨这三个核心概念。 一、键盘事件 在 Vue 中，可以通过 `v-on`...
Vue-指令和事件修饰符及实例演示
MrLsss的博客
02-04 406
Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值(`{{}}`)之外还可以使用**指令**。在上一节中,我们主要学习和[探讨了Vue模板相关的知识](/...
vue 事件修饰符
魏晋-
06-12 406
在vue中很多功能的实现，都需要通过事件的触发，但有的事件触发出现的效果会在其他的元素上，或者只想触发触发一次，所以需要用到时间修饰符。 ①.stop阻止冒泡 ②.prevent阻止默认行为 ③.capture添加时间侦听时使用时间捕获机制 ④.self只当事件在该元素本身触发是回调 ⑤.once只触发一次 注意：.stop和.s...
vue中的事件修饰符
weixin_42490383的博客
07-18 83
哈哈哈哈
Vue系列教程（六）事件修饰符
Hit the keyboard hard
02-11 439
在讲解事件修饰符之前，大家先请看下面的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> </head> <style> .inner { ...
vue 中的事件修饰符介绍+示例说明
最新发布
lazy_tomato的博客
04-18 657
当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件，在 pc 端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给对移动端的滚动做一些优化。html 某些元素自带一些默认的事件，例如常见的:from 表单的提交；js 中事件默认是由内向外层冒泡传递的。修饰符是加在自定义组件的事件上，保证事件能执行.这三个修饰符分别是鼠标的左中右按键触发的事件。当我们并不想触发外层的事件时，我们可以用。修饰符的作用是，事件只执行一次。修饰符的作用是阻止默认事件。
Vue事件修饰符、代码演示
weixin_42686303的博客
08-10 83
1、.prevent（阻止默认行为）（常用） <div id="app"> <!-- .prevent：阻止默认事件发生 --> <a href="www.baidu.com" @click.prevent="showInfo">百度一下</a> </div> <script> const vm = new Vue({ el: '#app', data: { na
vue 启动项目时浏览器自动启动的四个方案（三种类型）。
仙途路漫漫其修远兮
05-10 5316
配置了不行那就自己手写个！！！
Vue常见的事件修饰符
见证自己学习,成长的记录
03-08 2392
vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料。
vue编写一个使用修饰符的实例
03-30
这里使用了自定义修饰符 这里使用了自定义修饰符 export default { directives: { ... el.style.fontWeight = 'bold';...注意，这些修饰符都是以 `v-` 开头的，这是 Vue.js 约定的命名规范。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值