Web学习——vue的基本使用之事件对象

已于 2022-02-14 12:34:59 修改
阅读量1k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2022-02-10 18:57:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43496491/article/details/122867237
版权

目录

1.事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- vue传递事件对象 $event 
			有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
			-->
			<button type="button" @click="change($event)">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				change(e){
					//alert(e.type);
					e.target.style.background="red";
				}
			}
		})
	</script>
</html>

2.使用事件对象阻止冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<div id="wai" @click="wai($event)">
				<button @click="nei($event)" type="button">按钮</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				wai(e){
					//调用事件对象中的方法，来阻止冒泡
					e.stopPropagation();
					alert("外")
				},
				nei(e){
					e.stopPropagation();
					alert("内")
				}
			}
		})
	</script>
</html>

3.使用vue的方式来阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
			为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的 -->。
			<!-- stop 事件修饰 stop 可以阻止冒泡 -->
			<div id="wai" @click.stop="wai()">
				<button @click.stop="nei()" type="button">按钮</button>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				wai(){
					alert("外")
				},
				nei(){
					alert("内")
				}
			}
		})
	</script>
</html>

4.阻止元素的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 阻止a标签默认跳转页面的行为 -->
			<a href="http://www.163.com" @click="intoPage($event)">进入网易</a>
			<!-- 阻止表单默认的同步提交行为 -->
			<form action="123.html" method="get" @submit="tijiao($event)">
				<input type="text" name="username" id="" value="" />
				<input type="submit" value="提交表单"/>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				intoPage(e){
					//调用事件对象的方法，来阻止元素的more行为
					e.preventDefault();
					alert("执行点击事件");
				},
				tijiao(e){
					e.preventDefault();
					alert("异步提交");
				}
			}
		})
	</script>
</html>

5.使用vue的方式阻止元素的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 阻止a标签默认跳转页面的行为
			 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
			 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
			 修饰符可以串联
			 <a v-on:click.stop.prevent="doThat"></a>
			 -->
			<a href="http://www.163.com" @click.prevent="intoPage()">进入网易</a>
			<!-- 阻止表单默认的同步提交行为 -->
			<form action="123.html" method="get" @submit.prevent="tijiao()">
				<input type="text" name="username" id="" value="" />
				<input type="submit" value="提交表单"/>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				intoPage(){
				
					alert("执行点击事件");
				},
				tijiao(){
					alert("异步提交");
				}
			}
		})
	</script>
</html>

6.让事件执行一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- .once 事件修饰符，让事件只执行一次  -->
			<button type="button" @click.once="show()">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(){
					alert("弹出一次");
				}
			}
		})
	</script>
</html>

7.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" name="" id="" value="" @keypress="show($event)"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(e){
					//使用事件对象来获取键码进行判断，但是太繁琐
					if(e.keyCode==13){
						alert("开始搜索");
					}
				}
			}
		})
	</script>
</html>

8.用vue的方式来监听键盘事件某个键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 按键修饰符
			 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
			     .enter
			     .tab
			     .delete (捕获“删除”和“退格”键)
			     .esc
			     .space
			     .up
			     .down
			     .left
			     .right
			 使用 keyCode attribute 也是允许的：
			 <input v-on:keyup.13="submit">
			 -->
			<input type="text" name="" id="" value="" @keypress.enter="show($event)" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'hello'
			},
			methods: {
				show() {
					alert("开始搜索");
				}
			}
		})
	</script>
</html>

9.鼠标事件的按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 鼠标按钮修饰符
			    2.2.0 新增
			    .left
			    .right
			    .middle -->
			<button type="button" @mousedown.left="show($event)">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(e){
					/* //e.button==0   0 1 2
					if(e.button==0){
						alert("鼠标按下");
					} */
					alert("鼠标按下");
				}
			}
		})
	</script>
</html>
Geek Li
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue事件对象讲解
qq_45378970的博客
09-21 2179
事件对象$event <button @click='fn($event)'></button> **** 在vue中,如点击事件/鼠标移入移出事件等等,事件的回调函数第一个参数默认都为$event(事件对象), 通过事件对象可以用于获取dom元素或者修改dom中的属性. 下面看一下事件对象$event的详解图 e.target.value 可用于获取dom元素的value值(如input框) e.srcElement 表示当前标签 下面来说一下事件对象中括号问题 1.绑定
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素
weixin_44867717的博客
07-07 9029
vue
6.VUE事件对象event
休息休息夏的博客
05-22 309
案例1 <div id="app"> <!--直接调用的为传参方法，方法中默认会有第一个参数传递进去，就是event对象--> <button type="button" @click="show">show</button> </div> /*vue中使用event对象时，禁止使用event这个单词表示event对象**/ show(e){ console.log(e); }, 点击“show1” 案例二
在 vue 中使用 事件对象e
miracle_linlei的博客
09-28 844
在 vue 中使用 事件对象e
详解vue事件对象、冒泡、阻止默认行为
08-31
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。
Vue基本使用之对象提供的属性功能
10-17
主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Web开发——Vue + Spring Boot 项目（一）
01-07
在看了Evan-Nightly大佬的博客之后发现一直没有系统的写过或者说记录过一些项目从搭建到完成直到使用的一个过程，所以决定写一个系统的过程记录一下，在学习的过程中搭建一个web前后端分离项目。 选用 Vue.js + ...
vue源码学习之Object.defineProperty对象属性监听
01-21
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下： 参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上...
解决vue 绑定对象内点击事件失效问题
12-12
仔细观察才发现，这段代码内的元素都在 vue 绑定对象中。...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue.js如何获得兄弟元素，子元素，父元素（DOM操作）
热门推荐
qq_15256443的博客
09-10 5万+
&lt;button @click = “clickfun($event)”&gt;点击&lt;/button&gt; methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.i...
vue事件对象、冒泡、阻止默认行为
小牛牛的博客
02-15 2万+
事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
vue事件(事件指令、事件对象、事件修饰符)
此鱼非闲鱼也的博客
04-22 1219
vue事件 1、事件指令： 两种写法： (1) v-on:事件名.修饰符="执行的函数名或表达式" (2) @事件名="执行的函数名或表达式" 注意: (1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中 (2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。 在普通js函数中，加小括号是调用此函数 (3) this指向...
Vue中使用事件方法时显示传递事件对象
weixin_44588201的博客
09-16 1195
$event对象 事件方法显示传递自定义参数、事件对象 html部分 <div v-for="(item, itemIdx) in arrList"> <label :contenteditable="item.isContentEditable" @dblclick="handleEdit(itemIdx)" @keydown="handleCloseEdit(i...
vue事件中如何使用event对象？
asteriaV的博客
11-19 1594
注意在事件中要使用 $ 符号 //html部分 <a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a> //js部分 showEvent(event){ //获取自定义data-id console.log(event.target.dataset.i...
Vue事件的基本使用
李公子的博客
07-26 308
事件的基本使用： 1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象； 5.@click="demo"和@click="...
vue中如何使用event对象
Future1994的博客
10-10 722
一、event 对象 （一）事件的 event 对象 你说你是搞前端的，那么你肯定就知道事件，知道事件，你就肯定知道 event 对象吧？各种的库、框架多少都有针对 event 对象的处理。比如 jquery，通过它内部进行一定的封装，我们开发的时候，就无需关注 event 对象的部分兼容性问题。最典型的，如果我们要阻止默认事件，在 chrome 等浏览器中，我们可能要写一个： event.preventDefault(); 而在 IE 中，我们则需要写： event.retur..
修改webpack的配置 ，vue的组件及使用，模板语法，指令事件对象，事件修饰符
Yanxiaona111的博客
11-14 229
002 1. 修改webpack 的配置 官网打开 Vue CLI 目录结构   src ： 开发时编写代码的位置   main.js 入口文件 App.vue 首屏加载的页面    如果需要修改webpack的配置，需要在项目根目录下创建 vue.config.js   具体的配置参考：https://cli.vuejs.org/zh/config/ 2. vue的组件   1. 组件是以 .vue 结尾的   2. 组件的结构： <template><template&gt
Vue 获取事件的 event 对象(2种方式)
前端技术
02-23 1万+
方式一：默认获取 不填写时，默认第一个参数就是 event 对象。 <template> <div> <button @click="onClick">点击</button> </div> </template> <script> export default { methods: { onClick(e) { console.log(e
Vue的事件对象
做一个有知识的流氓
02-19 189
我想见你，不远万里 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 我的github: 李大玄 我的私人博客: 李大玄 我的简书: 李大玄 我的CSDN: 李大玄
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
最新发布
05-19
在Vue2.0中渲染HTML有两种方式：v-html指令和使用组件。 1. v-html指令 v-html指令可以将一个字符串解析成HTML并渲染到页面上。例如： ``` <p v-html="content"></p> export default { data() { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Geek Li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值