如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

ref和v-for在一起的情况

li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，

此时的$refs

 整个用下来就是比较方便取DOM，方便操作DOM

vue中的 ref 和 $refs的更多相关文章

  1. 理解Vue中的ref和$refs

    参考博客:https://www.cnblogs.com/xumqfaith/p/7743387.html

  2. Vue 中的 ref $refs

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

  3. vue中的ref属性

    1.什么是ref? ref是用于快速定位到dom结构,vue中一般不去操作dom结构,他是数据驱动的.jQuery会疯狂操作DOM {{msg}} mounted(){ let h = this.$r ...

  4. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  5. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  6. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

  7. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  8. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  9. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

随机推荐

  1. Java并发-容器

    同步容器类:同步容器类包括Vector和Hashtable.这些类实现线程安全的方式是:将它们的状态封装起来,并对每个公有方法进行同步,使得每次只有一个线程可以访问容器的状态.JDK1.2之后,提供了 ...

  2. NSURLSession 所有的都在这里(一)

    这篇文章会有什么? 在这篇文章中把NSURLSession.h文件集体梳理一遍,把里面的每个属性.代理和方法都拿出来说说,通过这篇文章我相信对于NSURLSession这一块的东西会梳理的比较全面一点 ...

  3. Hive入门学习--HIve简介

    现在想要应聘大数据分析或者数据挖掘岗位,很多都需要会使用Hive,Mapreduce,Hadoop等这些大数据分析技术.为了充实自己就先从简单的Hive开始吧.接下来的几篇文章是记录我如何入门学习Hi ...

  4. 解决iframe在移动端(主要iPhone)上的问题

    前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...

  5. Ubuntu编译安装crtmp-server

    下载源码 从GitHub上下载:https://github.com/j0sh/crtmpserver.git 编译安装 apt-get install cmake apt-get install l ...

  6. springboot~为Money类型添加最大值和最小值的注解校验

    在spring框架里,为我们集成了很多校验注解,直接在字段上添加对应的注解即可,这些注解基本都是简单保留类型的,即int,long,float,double,String等,而如果你自己封装了新的类, ...

  7. Intellij-Idea Maven SSH项目的搭建

    添加阿里云镜像 在.m2/settings.xml中, <mirror> <id>nexus-aliyun</id> <name>Nexus aliyu ...

  8. Python的logging日志

    日志级别:critical > error > warning > info > debug,notset级别越高打印的日志越少,反之亦然,即debug : 打印全部的日志(n ...

  9. Pycharm快捷键记录

    这里只记录自己用过的,记录而已 会慢慢添加进来,没有考虑分类和顺序,后期足够多了会整理 参考文章: 1. pycharm的一些快捷键 2. pycharm快捷键及一些常用设置 Ctrl+C  直接复制 ...

  10. 关于bootstrap-datetimepicker 插件的配置参数详解

    本人在网上查找的,  觉得还不错,就抄过来了... 有错误大家一起讨论,谢谢... 原地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 ...