vue.js v-on事件使用，vue.js event事件绑定

最新推荐文章于 2023-11-25 16:18:40 发布
最新推荐文章于 2023-11-25 16:18:40 发布
阅读量890 收藏 1
点赞数
分类专栏： vue.js js 蕃薯耀分享 文章标签： vue.js v-on事件使用 vue.js event事件绑定 vue.js 回车事件 @click.prevent 蕃薯耀
蕃薯耀分享 同时被 3 个专栏收录
409 篇文章 1 订阅
订阅专栏
js
92 篇文章 0 订阅
订阅专栏
vue.js
15 篇文章 0 订阅
订阅专栏

vue.js v-on事件使用，vue.js event事件绑定

 

================================

©Copyright 蕃薯耀 2018年12月04日

http://fanshuyao.iteye.com/

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue 事件绑定</title>
</head>
<body>
	
	<div id="vue-div">
		使用v-on:click
		<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" v-on:click="imgClick"/>
		使用 @click
		<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick2"/>
		使用 @click，带参数
		<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3('张三')"/>
		使用 @click，带Vue变量值
		<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3(msg)"/>
		使用 @click，默认带event
		<button @click="click4">测试按钮</button>
		使用 @click，带event
		<button @click="click5($event)">测试按钮$event</button>
		
		<div style="margin-top : 30px;">
			<div>事件冒泡：点击内层div，内层会提示，外层也会提示，即提示2次</div>
			<div @click="outerClick" style="width:300px;height: 300px;background-color: red;">
				<div @click="innerClick" style="width:100px;height: 100px;background-color: blue;"></div>
			</div>
		</div>
		<div style="margin-top : 30px;">
			<div>阻止事件冒泡：点击内层div，只提示一次（@click.stop）</div>
			<div @click="outerClick2" style="width:300px;height: 300px;background-color: red;">
				<div @click.stop="innerClick2" style="width:100px;height: 100px;background-color: blue;"></div>
			</div>
		</div>
		
		<div style="margin-top : 30px;">
			<div>阻止事件，即点击链接不跳转</div>
			<a href="www.baidu.com" @click.prevent="preventGo">我要去百度</a>
		</div>
		
		<div style="margin-top : 30px;">
			<div>keyup 回车事件</div>
			第一种写法（@keyup.enter）：
			<input type="text"  @keyup.enter="enter"/>
			第二种写法（@keyup.13）：
			<input type="text"  @keyup.13="enter"/>
		</div>
	</div>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
	el: "#vue-div",
	data: {
		msg : "aabbdDD-Hello-World",
		imgUrl : "https://cn.vuejs.org/images/logo.png"
	},
	methods : {
		imgClick(){
			alert("imgClick()");
		},
		imgClick2(){
			alert("22()");
		},
		imgClick3(params){
			alert("参数："+params);
		},
		click4(event){
			alert("参数："+event.target.innerHTML);
		},
		click5(event){
			alert("参数："+event.target.innerHTML);
		},
		outerClick(event){
			alert("outerClick");
		},
		innerClick(event){
			alert("innerClick");
		},
		outerClick2(event){
			alert("outerClick-22222222222222");
		},
		innerClick2(event){
			alert("innerClick-222222222222222");
		},
		preventGo(){
			alert("preventGo");
		},
		enter(event){
			alert(event.target.value);
		}
	}
});
</script>
</body>
</html>

 

 

================================

©Copyright 蕃薯耀 2018年12月04日

http://fanshuyao.iteye.com/

蕃薯耀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue语法 事件监听(v-on)
富有知识的小窝
07-21 1169
我们监听按键的使用，我们将上一个监听输入的案例，变成按回车抬起后才输出内容。点击按钮我们发现并没有什么改变，我们并没有把函数与我们的按钮进行绑定。刷新启动过的项目页面，再点击按钮可以发现可以改变计数。我们刷新启动的项目页面，在输入框输入内容并按下。在网站中存在很多按钮，点击会触发不同的功能。我们编写一个计数器，更好的理解监听事件。我们刷新启动的项目页面，在输入框输入内容。我们可以看到当我们按下回车键输出了内容。中怎么实现这一功能呢，使用到了。绑定函数时，如果我们没有写。中，我们编写如下代码。......
Vue.js源码学习三 —— 事件 Event 学习
violetjack的专栏
02-19 2979
早上好！继续学习Vue源码~这次我们来学习 event 事件。 源码简析 其实看了前两篇的同学已经知道源码怎么找了，这里再提一下。 先找到Vue核心源码index方法 src/core/instance/index.js function Vue (options) { if (process.env.NODE_ENV !== 'production' &amp;&am...
ESLint vue/v-on-event-hyphenation 提示错误
m0_62410131的博客
06-29 2476
请注意，具体的配置方法可能因您的ESLint版本和其他相关设置而有所不同。确保参考官方文档或相关资源以获取更准确的信息。在代码中临时禁用规则：您可以在特定位置的代码行上添加注释来临时禁用该规则。配置文件中永久禁用规则：如果您希望在整个项目中禁用该规则，可以编辑。文件（或者其他相应的配置文件）并添加一个规则配置。相关的规则，并将其设置为。
VSCode 警告：v-on event ‘@toggleClick‘ must be hyphenated
最新发布
有来技术
11-25 970
v-on event '@xxx' must be hyphenated 警告问题原因分析和解决。
VUE学习笔记：4.vue的计算属性和v-on绑定监听事件
ouyicnm的博客
06-05 458
一.计算属性 1.什么是计算属性 2.计算属性的基本使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--可以像使用data中的数据一样，获取计算属性中的数据内容--> <h2
浅谈Vue.js 组件中的v-on绑定自定义事件理解
12-29
每个 Vue 实例都实现了事件接口...另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子： 2017年4月11日更新 <div id=counter-event-example> <p>{{ total }
vue3-touch-events:对vue.js 3的简单触摸事件支持
05-12
将v-touch事件添加到元素时，它会使用完全声明性的语法在台式机和移动设备上运行。 与其他库不同，您无需在组件中添加任何特殊代码即可完成此工作。 您只需要全局注册库，它就可以在整个应用程序中启用新事件。 ...
vue-event-manager:Vue.js的事件管理器
05-14
它使用Vue生命周期自动绑定和取消绑定所有事件。 特征 支持事件优先级和基于的异步事件 支持最新的Firefox，Chrome，Safari，Opera和IE9 + 支持Vue 2.0 紧凑的大小3KB（压缩后的1.5KB） 安装 您可以通过或安装它...
vue实现在v-html的html字符串中绑定事件
12-30
需求： 需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue...在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去
VueEventProxy让Vuejs支持全局事件
08-10
Vue Event Proxy：让Vue.js支持全局事件
vue非父子界面传值（广播方式）需要使用的vueEvent.js
04-01
采用广播方式对非父子界进行传值，需要依赖的vueEvent.js
Vue的学习v-on和event
weixin_43288858的博客
03-23 1286
事件处理：v-on 完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)” 缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号 event ：函数中的默认形参，代表原生 DOM 事件 当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入 作用：用于监听 DOM 事件 v-on:cli...
绑定事件监听 v-on指令与其参数传递和修饰符
qiutian24的博客
10-04 471
v-on 1.基础 官方文档链接 https://cn.vuejs.org/v2/api/#v-on 作用：绑定事件监听。 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 预期：Function | Inline Statement | Object 语法： <div id="app"> <!--eventA()是自己定义的方法--> <button v-on:click="eventA()">A1
已解决：v-on event ‘@saveApi‘ must be hyphenated
热门推荐
IU
01-21 1万+
v-on event '@saveApi' must be hyphenated 针对驼峰的错误提示，修改为连字符即可 解决方法 @saveAPI ------- > @save-api
html img onclick传src,<img>添加onclick（点击查看大图）的问题
weixin_42520661的博客
06-16 783
第一个是总是最后一张的原因如下：var不像let、const,没有块级作用域的概念，会变量提升。并且还允许重复申明。所以你的代码，实际执行的效果是这样var imgSrc, i;for(i=0;i < in_pic.length;i++){imgSrc = in_pic[i];// ...}然后可以改一下由event来获取srcobj.onclick = function(ev){if (f...
vue3学习2：vue 的指令v-on，event
weixin_43788986的博客
07-08 1791
作用：如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令，v-on就是用于绑定事件的，通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明。 简写：@举个栗子 v-on 指令所绑定的事件处理函数中，可以接收到事件对象 event。 event是vue提供的特殊变量，用来表示原生的事件参数对象event。event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。event是vue提供的特殊变量，用来表示原生的事件参数对象event。event
vue事件绑定详解
nuanxiasuiyuan的博客
05-31 4343
在上篇中，我们说到了Vue时间绑定用v-on，今天我们就来详细说说。缩写：@修饰符：.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAl
vue echarts组件 option以及on事件设置
黄大仙儿的专栏
12-13 1万+
&lt;template&gt; &lt;div ref="dom"&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import echarts from 'echarts' import {on, off} from '@/libs/tools' export default { name: 'eChart', props: ...
5. v-model是什么？怎么使用？vue中标签怎么绑定事件？
04-19
5. v-model是Vue中的一个指令，通常用于双向数据绑定。...你也可以使用动态事件名来监听事件，例如：v-on:[eventName]="handler"，其中eventName是一个动态变量，它的值将作为事件名来绑定事件处理函数handler。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值