本文仅用作简单记录

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 事件对象的更多相关文章

  1. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  2. trigger()的event事件对象之坑

    问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...

  3. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  4. Python多线程-Event(事件对象)

    Event 事件对象管理一个内部标志,通过set()方法将其设置为True,并使用clear()方法将其设置为False.wait()方法阻塞,直到标志为True.该标志初始为False. 方法: i ...

  5. 第53天:鼠标事件、event事件对象

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  6. event事件对象

    事件对象event: 在触发DOM事件的时候都会产生一个对象 1.type:获取事件类型 2.target:获取事件目标 3.stopPropagation():组织事件冒泡 4.preventDef ...

  7. event事件对象和clientX,clientY

    一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须 ...

  8. jquery之event与originalEvent的关系、event事件对象用法浅析

    在jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中, 每个 even ...

  9. (转)内核线程对象--Event事件对象

    在所有的内核对象中,事件内核对象是个最基本的对象.事件能够通知一个操作已经完成. 客户机和一个服务器,它们之间需要互相进行通信例子(vs2008 ) 事件内核对象的组成 一个使用计数(与所有内核对象一 ...

随机推荐

  1. angular5引入sass

    angular/cli支持使用sass新建工程:如果是新建一个angular工程采用sass:ng new My_New_Project --style=sass这样所有样式的地方都将采用sass样式 ...

  2. toString()方法,与call()方法结合;用来进行数据类型检测

    ​ //toString()方法,与call()方法结合;用来进行数据类型检测 console.log(Object.prototype.toString.call([]));//'[object A ...

  3. JS对象中属性的增删改查

    对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性 对象的分类:           1.内建对象                 -在ES标准中定义的对象,在任何的ES的实现中都可以 ...

  4. jmeter 不同线程组之间传递变量1

    一 采用全局变量在不同线程组之间传递变量的坑 ${__setProperty(newcompanyId,${companyId},)}; 不采用全局变量传递参数,请求报文格式如下: 正确的报文: {& ...

  5. python获取Linux发行版名称

    我必须从Python脚本中获取Linux发行版名称.dist平台模块中有一个方法: import platform platform.dist() 但在我的Arch Linux下它返回: >&g ...

  6. 在MVC4.5.1中使用Ninject

    看完Pro ASP.NET MVC5的前14章之后,终于开始了自己的项目搭建. 打算在实际项目中使用Ninject 但是总是出现各种问题.这里记录一下 在书中使用的Ninject的版本是: Insta ...

  7. IDEA Caused by: java.lang.OutOfMemoryError: PermGen space

    错误:OutOfMemoryError: PermGen space 非堆溢出(永久保存区域溢出) 解决方法: 在Run/Debug configuration 的你要运行行的tomcat里面的 vm ...

  8. KiCAD的一些快捷操作(类比于AD)

    一.原理图快捷操作 二.PCB快捷操作 Q: 在布线过程中,用来编辑线宽,和AD中布线时“Tab”的作用相似 W: 选择设定好的线宽,线宽减小 Shift+W: 选择设定好的线宽,线宽变大 /: 改变 ...

  9. hdu 5792 树状数组+离散化+思维

    题目大意: Given a sequence A with length n,count how many quadruple (a,b,c,d) satisfies: a≠b≠c≠d,1≤a< ...

  10. Java中使用try-catch-finally处理IO流中的异常

    我们使用try-catch-finally来接收IO流的异常 finally是最后执行的步骤,非常适合最后存放close来关闭IO流,而且编程中我们不可以随意抛出异常,必须对异常进行处理. 从try- ...