vue 笔记,ref 及 $event 事件对象
本文仅用作简单记录
ref : 在标签上添加 ref = “name” ,表示获取当前元素节点
<input type="text" ref="info">
获取
this.$refs.info.value
获取事件对象 , 方法参数传递 $event
<button @click="Event($event)">事件对象</button>
获取
Event(e){
console.log(e)
}
打印结果:
也可以获取执行事件的节点
e.srcElement
比如,我想给 button 按钮 添加背景颜色
e.srcElement.style.backgroundColor = "red"
也可以通过事件对象获取自定义属性:
比如,button 按钮上自定义一个属性:
<button data-aid="123" @click="getInfo($event)">通过事件对象获取自定义属性</button>
getInfo(e){
console.log(e);
console.log(e.srcElement.dataset.aid)
}
结果:
vue 笔记,ref 及 $event 事件对象的更多相关文章
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- trigger()的event事件对象之坑
问题引入,先贴一段有问题的代码,如果你对 trigger() 这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- Python多线程-Event(事件对象)
Event 事件对象管理一个内部标志,通过set()方法将其设置为True,并使用clear()方法将其设置为False.wait()方法阻塞,直到标志为True.该标志初始为False. 方法: i ...
- 第53天:鼠标事件、event事件对象
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- event事件对象
事件对象event: 在触发DOM事件的时候都会产生一个对象 1.type:获取事件类型 2.target:获取事件目标 3.stopPropagation():组织事件冒泡 4.preventDef ...
- event事件对象和clientX,clientY
一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须 ...
- jquery之event与originalEvent的关系、event事件对象用法浅析
在jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中, 每个 even ...
- (转)内核线程对象--Event事件对象
在所有的内核对象中,事件内核对象是个最基本的对象.事件能够通知一个操作已经完成. 客户机和一个服务器,它们之间需要互相进行通信例子(vs2008 ) 事件内核对象的组成 一个使用计数(与所有内核对象一 ...
随机推荐
- jQuery 删除行(带跨行的表格)
jQuery 删除行(带跨行的表格) 实现效果,点击删除按钮后,在保证原来表格结构的基础上,移除当前行. 代码原理: 1.点击行后判断当前行的第一个<td>,是否包含rowspan属性,如 ...
- VTemplate模板引擎的使用--入门篇
1.什么是VTemplate模板引擎? 详细请点击这里. 2.怎样使用VTemplate模板引擎? 第1步: 下载VTemplate模板引擎的最新库文件(从这里下载),下载回来后将库文件引入到你的项目 ...
- Struts1.3——DispatchAction、DynamicForm和全局跳转
1.DispatchAction-分派Action 1.1 为什么需要DispatchAction 如果每个请求都对应一个Action,就会造成action过多,程序显得比较臃肿,所以可以把一类请求写 ...
- [转]关于Unity中文件读取 - 大世界
原文 http://www.cnblogs.com/ThreeThousandBigWorld/p/3199245.html 存储: 在程序发布后文件的存放有两种,第一种是打包到Uniyt的资源包 ...
- Prometheus 详解
Prometheus 章节 1.Prometheus 简介 2.Prometheus 安装与配置 3.Exporter 4.Pushgateway 5.本地存储和远程存储 6.高可用方案 7.报警插件 ...
- 运维01 VMware与Centos系统安装
VMware与Centos系统安装 今日任务 1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) ...
- Config JAVA evironment for LoadRunner
1. Install jdk 2. Set system variables eg. JAVA_HOME = C:\Program Files (x86)\Java\jdk1.6.0_43 class ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- Python判断一个字符串中是否存在多个子串中的一个
在使用python的开发过程中,常常需要判断,字符串中是否存在子串的问题, 但判断一个字符串中是否存在多个字串中的一个时,如if (a or b) in c或者if x contains a|b|c| ...
- JS window对象 返回浏览历史中的其他页面 go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。 语法: window.history.go(number);
返回浏览历史中的其他页面 go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面. 语法: window.history.go(number); 参数: 浏览器中,返回当前页面 ...