v-on的使用

最新推荐文章于 2024-07-19 10:52:30 发布
最新推荐文章于 2024-07-19 10:52:30 发布
阅读量285 收藏
点赞数 4
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59359854/article/details/126041582
版权

v-on的基本使用

<!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="app">
			<div @click="change()">点击</div>  
			<input @input="changeinput" />
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						
					}
				},
				methods:{
					change(){
						console.log('1111');
					},
					changeinput(){
						console.log('222');
					}
				}
				
			})
		</script>
	</body>
</html>

v-on的参数传递

  1. 事件没传参，可以省略()
  2. 事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
  3. 如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。

按钮4调用btnClick2(value){}，此时undefined。按钮5调用时省略了()，会自动传入原生event事件，如果我们需要event对象还需要传入其他参数，可以使用$event对象。

<!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="app">
			<!-- 事件没传参 -->
			<button @click="btnClick">按钮1</button>
			<button @click="btnClick()">按钮2</button>

			<!-- 事件传参 -->
			<button @click="btnClick(123)">按钮3</button>
			<button @click="btnClick()">按钮4</button>
			
			<!-- 注意
			如果我只要传递e事件 那么可以不写参数，当然也可以写一个参数叫$event
			<button @click="btnClick">按钮5</button>
            <button @click="btnClick($event)">按钮5</button> -->

			<!-- 事件传多个参 -->
           <!--  如果我要传递多个参数  那么既要写参数，也要写$event,方法中用e和形参进行接收
			<button @click="btnClick($event,123)">按钮6</button> -->

		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {

					}
				},
				methods: {
					/* btnClick() {
						console.log("点击XXX");
					}, */

					/* 	btnClick(val) {
							console.log(`点击了${val}`);
						} */

					/* btnClick(e) {
						console.log(e);
					} */
					
					btnClick(e,val) {
						console.log(e+'-----'+val);
					} 
				}

			})
		</script>
	</body>
</html>

v-on的事件修饰词

  1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
  2. .prevent 调用event.preeventDefault阻止默认行为。
  3. .enter监听键盘事件;
  4. once 事件只触发一次（常用）； 5.capture 使用事件的捕获模式； 6.self 只有event.target是当前操作的元素时才触发事件； 7.passive 事件的默认行为立即执行，无需等待事件回调执行完毕； 1.Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 4.也可以使用keyCode去指定具体的按键（不推荐） 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.div {
				width: 200px;
				height: 100px;
				background: #f00;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() 常用-->
			<div @click="divClick" class="div">
           	 <button type="button" @click.stop="btnClick">点击</button>
           </div>

			<!-- 2. .prevent 调用event.preventDefault阻止默认行为  常用-->
			<a href="http://www.baidu.com" @click.prevent="change">去百度</a>


			<!--3. 修饰符可以串联 常用-->
			<div @click="divClick" class="div">
					<a href="http://www.baidu.com" @click.stop.prevent="change2">去百度</a>
			</div>

			<!-- 4. 添加事件监听器时使用事件捕获模式 不常用-->
			<!-- <div class="box1" @click.capture="show(111)">
				div1外面
				<div class="box2" @click="show(222)">
					div2里面
				</div>
			</div> -->


			<!-- 5.   只当在 event.target 是当前元素自身时触发处理函数  不常用 -->
			<!-- <div class="div" @click.self.prevent="showself">
				<button @click.self.prevent="showself">点我</button>
			</div> -->

			<!-- 6.   点击事件将只会触发一次 不常用-->
			<!-- <a @click.once="doThis">点击触发</a> -->

			<!--   7. .passive 修饰符尤其能够提升移动端的性能。不常用 -->
			<!-- <div class="div" @wheel.passive="onScroll">
				滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发
			</div> -->

			<!-- <div @scroll="onScroll" class="div">滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发</div> -->
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {

					}
				},
				methods: {
					divClick() {
						console.log('点击了div');
					},
					btnClick() {
						console.log('点击了btn');
					},
					change() {
						console.log('阻止了默认行为');
					},
					change2() {
						console.log('阻止了默认行为也阻止了冒泡');
					},
					show(msg) {
						console.log(msg);
					},
					showself() {
						console.log('我是点击自身才触发');
					},
					doThis() {
						console.log('点击了a');
					},
                    onScroll(){
						for(let i = 0;i<5000;i++){
							console.log('@');
						}
						console.log('333333');
					}
					

					/* onScroll(){
						for (let i = 0; i < 10000; i++) {
							console.log('@');
						}
						console.log('333333');
					} */
				}

			})
		</script>
	</body>
</html>

v-on的按键修饰符

<!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="app">
			<form @submit.prevent='' action="psy.jsp">
				账号<input type="text" name="user" />
				<!-- 	密码<input type="text" name="password" @keyup.enter="submit" /> 常用-->
				<!-- 密码<input type="text" name="password" @keyup.13="submit" /> 不常用 不推荐-->
				密码<input type="text" name="password" @keyup.huiche="submit" /><!-- 不常用 不推荐 -->
				<input type="submit" value="登录" />
			</form>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
			Vue.config.keyCodes.huiche = 13//不常用 不推荐
			const vm = new Vue({
				el: '#app',
				data() {
					return {

					}
				},
				methods: {
					submit() {
						console.log('keyup点击');
					}
				}

			})
		</script>
	</body>
</html>

 

 失去焦点时登录

<!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="app">
			<form @submit.prevent=''>
				账号<input type="text" name="user" />
				密码<input type="text" name="password"  @keyup.enter="submit" />
				<input type="submit" value="登录" @keyup.enter="submit" />
			</form>

		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
                     
					}
				},
				methods:{
					submit(){
						console.log('keyup点了');
					}
				},
				created() {//生命周期
					document.onkeydown = (e)=>{
						 e = window.event || e;
						 console.log(e);
						 if(e.code == 'Enter'||e.code=='enter'){
							 this.submit()
						 }
					}
				}

			})
		</script>
	</body>
</html>

北风吹画州
关注
Vue v-on v-model v-if 语法示例演示代码
07-17
Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v...
Vue中v-on的基础用法、参数传递和修饰符
yzq0820的博客
07-29 4202
一、v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。二、v-on的参数传递三、v-on的修饰词.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。.prevent调event.preeventDefault阻止默认行为。.enter监听键盘事件; .onc......
【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符
YK菌的博客
01-19 2069
学习Vue事件处理
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
最新发布
lph159的博客
07-19 729
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
V-on指令的使用
ADC06的博客
03-15 5261
一.V-on指令 (一) .1. v-on 的作用 用来给元素注册点击事件的 2.v-on 的语法 (1).v_on:事件名 ="事件函数" (2).v-on:click 可以简写 @click (3).v-on:mouseenter 可以简写 @mouseenter 3.v-on的注意点 (1).注册事件需要一个事件的函数 (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法 （二）.案例： 代码部分如下: <div ...
Vue事件绑定（v-on用法）
qq_65715980的博客
07-28 4070
ES6事件绑定，v-on的基本使用，v-on的参数传递，v-on的修饰词，阻止冒泡事件，添加事件监听器时使用事件捕获模式。 capture只当在 event.target 是当前元素自身时触发处理函数。 prevent点击事件将只会触发一次。 once .passive 修饰符尤其能够提升移动端的性能。 .passive.........
vue 中监听监听按键
qq_19323867的专栏
04-23 3329
按键修饰 在监听键盘事件时，我们经常需要检查详细的按键.vue允许为v-on在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 按键码 使用keyCode的特性也是允许的： <input v-on:keyup.1...
vue v-on:click传递动态参数的步骤
10-14
本文将介绍如何在Vue中使用v-on:click事件绑定器传递动态参数，这个过程不仅涉及到Vue框架的事件处理机制，还包括了与jQuery结合使用的技巧。 首先，我们来了解Vue中的事件绑定方法。在Vue中，我们使用v-on指令（或...
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
VueJS事件处理器v-on的使用方法
10-19
VueJS事件处理器v-on是Vue框架中用于绑定DOM事件的关键指令。它允许我们在Vue实例的模板中轻松地处理用户交互，比如点击按钮、输入文本等。以下是对v-on的详细说明： 1. **基本用法**： 使用v-on:click指令来监听...
vue.js学习笔记之v-bind和v-on解析
10-18
主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧
13.Vue事件监听，事件修饰符，按键监听，精准监听
cxrlover的博客
05-08 591
事件监听事件修饰符按键修饰符按键别名常用按键系统修饰符鼠标按键修饰符.exact 准确修饰 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用简单写法 @click="methodName" 要想传递原生的DOM事件的话，需要借助Vue的内置变量 $event 。 事件绑定还支持多方法调用，只需要将方法使用, 隔开即可。 请看代码 导入Vue <script src=
v-on指令
热门推荐
fushan2012的博客
02-22 1万+
v-on
Vue之事件处理（v-on）
浩泽学编程的博客
06-27 1778
v-on：事件绑定以上就是事件处理的讲解。
V-on的简单使用（VUE学习3）
b312738566的博客
12-26 536
2.将Vue应用程序挂载到具有id="app"的div元素上 3.包含一个具有id="lightDiv"的div元素，其中包含一个v-show指令和一个图像元素， 4.使用v-show指令根据lightOn的值来动态显示或隐藏元素，并显示一个表示灯泡的图像 5.包含一个按钮元素，使用v-on指令监听点击事件，并执行切换lightOn状态的操作 6.引入 Vue.js 的全局脚本 7.创建 Vue 应用程序 8.定义数据对象，这里包含一个名为lightOn的属性
v-on: 事件处理简写@，及修饰符
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-22 1098
v-on 是 Vue中用于绑定事件的指令。它可以绑定许多不同的事件
Vue指令之v-on
ShadyPi的IT笔记
12-13 1776
v-on指令用于注册事件，作用是添加监听与提供事件触发后对应的处理函数。
vue中使用v-on监听多个方法
子玉的博客
03-16 441
3. **使用修饰符 `.stop` 和 `.prevent`**：你可以在事件处理中使用修饰符 `.stop` 和 `.prevent` 来阻止事件冒泡和默认行为，并在事件处理中触发多个方法。这样当点击按钮时，只需调用 `handleClick` 方法，它会依次调用 `method1`、`method2` 和 `method3` 这三个方法。这样当点击按钮时，会依次触发 `method1`、`method2` 和 `method3` 这三个方法，并阻止事件冒泡和默认行为。
v-on v-bind
08-16
你也可以使用简写形式@:事件名来表示v-on指令。 例如，在模板中使用v-on指令监听按钮的点击事件： ```html <button v-on:click="handleClick">点击我 ``` 在Vue实例中，定义handleClick方法： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值