VUE指令-事件绑定v-on

最新推荐文章于 2024-04-19 18:32:11 发布
最新推荐文章于 2024-04-19 18:32:11 发布
阅读量2.1k 收藏
点赞数
分类专栏： vue v-on 文章标签： vue v-on
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llzkkk12/article/details/78907937
版权
vue 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
v-on
1 篇文章 0 订阅
订阅专栏

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on:event

<!-- 格式v-on:keycode="方法(参数)" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v3.v-on:keycode="方法(参数)"</div>

     <hr />

     <div>

         <div>

              <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>

         </div>

     </div>

</div>

 

<!-- 格式v-on:click="方法(参数)" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v2.v-on:click="方法(参数)"</div>

     <hr />

     <div>

         <div>

              <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button>

         </div>

     </div>

</div>

 

<!-- 格式v-on:click="方法" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v1.格式v-on:click="方法"</div>

     <hr />

     <div>

         <div>

              <button v-on:click="add" style="font-size: 20px;">onClick</button>

         </div>

     </div>

</div>

 

<!-- 格式v-on:click="表达式" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v0.v-on:click="表达式"</div>

     <hr />

     <div>

         <div>

              <button v-on:click="count ++" style="font-size: 20px;">onClick</button>

              <p>{{count}}</p>

         </div>

     </div>

</div>

 

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
		<title>v-on</title>
	</head>

	<body style="height: 100%;">
		<style>
			.style0{
				font-size: 25px;
				color: green;
			}
			.style1{
				background: gold;
			}			
		</style>
		<!-- 
			VUE指令v-on事件绑定指令
				
			REF:
				http://www.runoob.com/vue2/vue-events.html
				https://cn.vuejs.org/v2/guide/events.html
		-->
		<div id="appVue">
			<!-- 格式v-on:keycode="方法(参数)" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v3.v-on:keycode="方法(参数)"</div>
				<hr />
				<div>
					<div>
						<input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>
					</div>				
				</div>
			</div>			
			
			<!-- 格式v-on:click="方法(参数)" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v2.v-on:click="方法(参数)"</div>
				<hr />
				<div>
					<div>
						<button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button>
					</div>				
				</div>
			</div>			
			
			<!-- 格式v-on:click="方法" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.格式v-on:click="方法"</div>
				<hr />
				<div>
					<div>
						<button v-on:click="add" style="font-size: 20px;">onClick</button>
					</div>				
				</div>
			</div>
			
			<!-- 格式v-on:click="表达式" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.v-on:click="表达式"</div>
				<hr />
				<div>
					<div>
						<button v-on:click="count ++" style="font-size: 20px;">onClick</button>
						<p>{{count}}</p>
					</div>				
				</div>
			</div>			
		</div>
		<script>
			new Vue({
					el: "#appVue",
					data: {
						count:999
					},
					methods:{
						add:function(){
							console.log("onClick")
						},
						mod:function(var0,var1){
							console.log(var0);
							console.log(var1);
						},
						commit:function(){
							console.log("commit");
						}
					}
				}

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

REF:

    http://www.runoob.com/vue2/vue-events.html

    https://cn.vuejs.org/v2/guide/events.html

llzkkk12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue事件绑定（v-on用法）
qq_65715980的博客
07-28 3782
ES6事件绑定，v-on的基本使用，v-on的参数传递，v-on的修饰词，阻止冒泡事件，添加事件监听器时使用事件捕获模式。 capture只当在 event.target 是当前元素自身时触发处理函数。 prevent点击事件将只会触发一次。 once .passive 修饰符尤其能够提升移动端的性能。 .passive.........
VUE指令-数据绑定v-model
12-27 1228
用 v-model 指令在表单  及  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 Java
Vue之事件处理（v-on）
浩泽学编程的博客
06-27 1502
v-on：事件绑定以上就是事件处理的讲解。
v-on详解(可绑定事件+修饰符+keyCode+vue按键别名)
weixin_44220680的博客
11-06 1197
v-on详解 事件句柄（可绑定事件） 属性 监听事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击对象 ondblclick 鼠标双击对象 onerror 当加载文档或图片时出现错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress ...
Vue之事件绑定（初识Vue事件）
最新发布
百赢出品，必属精品
04-19 1474
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
Vue源码阅读（24）：v-on 指令的源码解析
f18855666661的博客
08-30 2305
今天讲讲 v-on 指令的底层实现原理。在 Vue 中，v-on 指令有两种用法，第一种是将 v-on 指令使用在自定义组件上，例如：<my-component v-on:myEvent="doSomething"></my-component>，使用 v-on 指令监听了组件的 myEvent 事件，回调函数是doSomething，当在组件中执行 this.$emit('myEvent') 时，会触发执行 doSomething 函数，有没有发现这和我上一篇文章中的 vm.$o.
Vue的鼠标键盘事件
harvestUachieve的博客
08-18 2870
鼠标事件(将v-on简写为@)@click // 点击@dblclick // 双击@mousedown // 按下@mousemove // 移动@mouseleave // 离开@mouseout // 移出@mouseenter // 进入@mouseover // 鼠标悬浮键盘事件@keydown //键盘按下时触发@keypress //键盘按住时触发@keyup //键盘弹起@keyup.13 //回车。
对vue中v-on绑定自定事件的实例讲解
10-18
在Vue.js中，`v-on`指令用于监听和处理组件上的事件。本篇文章将通过一个实例深入解析如何使用`v-on`绑定自定义事件。首先，让我们了解Vue中事件的基本概念。 Vue事件机制遵循发布/订阅（Publish-Subscribe）模式，...
详解vue中v-on事件监听指令的基本用法
10-15
`v-on`指令用于绑定DOM事件监听器，它可以将DOM事件与Vue实例的方法关联起来，当事件触发时，执行相应的方法。这使得在Vue组件中处理用户交互变得简单且易于维护。 二、`v-on`的使用 1. 基本语法 `v-on`的基本...
对Vue.js之事件的绑定(v-on: 或者 @ )详解
10-18
在Vue中，事件绑定是通过`v-on`指令或其简写`@`来实现的。这篇文章将深入探讨这两种方法，以及如何在Vue组件中触发和响应事件。 1. **Vue.js事件绑定的一般格式** 在Vue中，事件绑定通常使用`v-on`指令，后面跟上...
vue.js绑定事件监听器示例【基于v-on事件绑定】
10-18
Vue.js 的 `v-on` 指令不仅可以绑定原生DOM事件，如 `click`、`mouseover` 和 `keydown`，还可以与自定义组件事件一起使用。此外，我们可以通过使用`.stop`、`.prevent`、`.capture`、`.self`和`.once`修饰符来改变...
浅谈Vue.js 组件中的v-on绑定自定义事件理解
10-18
主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue基本指令：v-on,v-if,v-mode
qi341500的博客
02-27 1358
Vue基本指令 1、v-text指令：设置标签的文本值 2、v-html指令：设置标签的innerHTML 3、v-on指令：为元素绑定事件 4、v-on:传参 5、v-show指令：根据真假切换元素的显示状态 6、v-if指令：根据表达式的真假切换元素的显示状态 7、v-bind：为元素绑定属性 8、v-for指令：根据数据生成列表结构 9、v-mode：便捷的设置和获取表单元素的值
vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
weixin_44415928的博客
03-16 6532
在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下 这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on 后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名 点击弹出警告就会弹出 代码如下 <body> <div id="app"> ...
Vue中的v-on
m0_72694993的博客
09-05 5040
1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码 即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
Vue.js基础-07-绑定事件（v-on）-02-键盘事件（keyup）
运维玄德公
06-04 859
1. 按键事件参数（keyup） 1.1 说明 1.2 完整示例 2. 按键修饰符别名 2.1 修饰符别名 2.2 示例 <input type="button" @keyup="warn" /> 1.2 完整示例 代码 <!DOCTYPE html> <html lang="en"&g
VUE初学---事件处理 v-on:click、v-on:keyup
qq_42970981的博客
11-22 3844
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处： 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 因为你无...
vue事件绑定
leva的博客
02-08 1648
Vue提供了v-on指令来监听DOM事件，在事件绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。
2. v-(bind、on)，绑定class、style
洪布斯的博客
12-26 185
vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
vue v-bind 与 v-on
01-18
Vue中的v-bind和v-on是两个常用的指令，用于属性绑定和事件绑定。 1. v-bind用于属性绑定，可以将Vue实例中的数据绑定到HTML元素的属性上。通过v-bind指令，可以动态地将Vue实例中的数据绑定到HTML元素的属性上，实现数据的动态更新。例如： ```html <div v-bind:class="className"></div> ``` 上述代码中，v-bind:class将Vue实例中的className属性绑定到div元素的class属性上。 2. v-on用于事件绑定，可以在HTML元素上监听指定的事件，并在触发事件时执行相应的方法。通过v-on指令，可以将Vue实例中的方法绑定到HTML元素的事件上。例如： ```html <button v-on:click="handleClick">点击按钮</button> ``` 上述代码中，v-on:click将Vue实例中的handleClick方法绑定到按钮的点击事件上。 综上所述，v-bind用于属性绑定，v-on用于事件绑定。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值