最近在看其他项目的过程中,发现在dom节点上使用了ref="xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目.

这两天项目不忙了,有闲心来看别人做的项目了,就看到这个用法了,还是直接百度,有很多解释,大致的意思就是给dom节点绑定一个值value,将这个value值存储到vue的节点管理器refs中,后续要找到这个节点的话,直接调用$refs.value就可以找到这个节点了,我去,太方便了,傻傻的我之前要么自己写id,然后使用document.getElementById来获取,要么直接用jquery,简直是丧心病狂,为了获取节点方便竟然不惜牺牲性能使用jquery,想想真的太水了.还好及时发现了这个方法,以后还是得多通读官方api文档啊.

vue中refs的使用的更多相关文章

  1. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  2. vue中$refs、$slot、$nextTick相关的语法

    Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 1.$data和$el var data = { a: 1 } var vm = new Vue({ el ...

  3. Vue中$refs的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个 ...

  4. vue中\$refs、\$emit、$on的使用场景

    1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...

  5. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  6. vue中$refs、,$emit、$on

    $emit https://blog.csdn.net/sllailcp/article/details/78595077 $on https://www.jianshu.com/p/a544728b ...

  7. vue中 $refs的基本用法

    骚年,我看你骨骼惊奇,有撸代码的潜质,这里有324.57GB的前端学习资料传授于你!什么,你不信??? 先随便看几个图: 肯定没看够.再来个GIF图热个身??? 那么问题来了,如果你也想入坑前端或者学 ...

  8. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  9. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

随机推荐

  1. Web Api(4)

    参考原文链接https://www.cnblogs.com/JamelAr/,本文大部分内容是根据这位博主进行实验测试的,非常感谢分享,另外也参考了https://www.cnblogs.com/vi ...

  2. PHP类的设计模式

    单例模式 <?php class mysingle { private static $myinstance =null; private function __construct() { } ...

  3. vue中 请求拦截 响应拦截设置

    第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...

  4. vue项目中，点击按钮复制其内容

    <el-table-column label="推广链接" align="center"> <template slot-scope=&quo ...

  5. [人物存档]【AI少女】【捏脸数据】1223今日份的推荐

    点击下载(城通网盘):AISChaF_20191112214754919.png 点击下载(城通网盘):AISChaF_20191111205924765.png

  6. 简单的尝试下angr

    0x00:前言 之前接触到了符号执行,可以用于程序的自动化分析,感觉还是比较神奇,工业上的具体用法不是很清楚,不过在CTF中这个东西慢慢在流行...从defcon 2016就可以看出(有很多人解re用 ...

  7. 关于windows 设备驱动重要的事实

    1. windows采用设备树描述所有挂在系统总线上的设备,每个设备对应一个节点. 2.每个设备有自己的device object stack/driver stack. 一个物理上的设备对应多个de ...

  8. Linux网络编程三、 IO操作

    当从一个文件描述符进行读写操作时,accept.read.write这些函数会阻塞I/O.在这种会阻塞I/O的操作好处是不会占用cpu宝贵的时间片,但是如果需要对多个描述符操作时,阻塞会使同一时刻只能 ...

  9. 【知识库】-数据库_MySQL性能分析之Query Optimizer

    简书作者:Sio 文章出处: MySql优化之索引原理与 SQL 优化 Query Optimizer MySQL Optimizer是一个专门负责优化SELECT 语句的优化器模块,它主要的功能就是 ...

  10. [题解] [CF451E] Devu and Flowers

    题面 题解 就是一个求\(\sum_{i= 1}^{n}x _ i = m\)的不重复多重集的个数, 我们可以由容斥原理得到: \[ ans = C_{n + m - 1}^{n - 1} - \su ...