一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值。

但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行。

在JavaScript里面通过this.$refs.input1去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗。

HTML

<div id="app">
<input type="text" ref="input1" />
<button @click="add">添加</button>
</div>

JavaScript

new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
}
}
})

这里的$refs可以看做是ref的选择器,这个$ref是一个对象,通过key可以获取到其中存放的对象。

当然了,既然是对象,也可以使用方括号运算符去访问,具体是this.$refs[input1]。

"我只是怕我再也见不到你了。"

vue中$refs的用法及作用详解的更多相关文章

  1. shell脚本中常见的一些特殊符号和作用详解

    这篇文章主要介绍了shell脚本中常见的一些特殊符号和它的作用详解,总结的很简洁,容易看懂,需要的朋友可以参考下   在编写Shell脚本时,我们需要会用到各种各样的特殊符号,通过这些特殊符号可以使我 ...

  2. Vue实例初始化的选项配置对象详解

    Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...

  3. Linux(centos)系统各个目录的作用详解

    Linux(centos)系统各个目录的作用详解 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码 ...

  4. linux(CENTOS)系统各个目录的作用详解

    Linux(CentOS)系统各个目录的作用详解 文件的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.S ...

  5. MySQL中的主键,外键有什么作用详解

    MySQL中的主键,外键有什么作用详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 学关系型数据库的同学,尤其在学习主键和外键时会产生一定的困惑.那么今天我们就把这个困惑连根拔起 ...

  6. Python中__init__.py文件的作用详解

    转自http://www.jb51.net/article/92863.htm Python中__init__.py文件的作用详解 http://www.jb51.net/article/86580. ...

  7. jsp九大内置对象和其作用详解

    jsp九大内置对象和其作用详解 JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.p ...

  8. [转载]java中import作用详解

    [转载]java中import作用详解 来源: https://blog.csdn.net/qq_25665807/article/details/74747868 这篇博客讲的真的很清楚,这个作者很 ...

  9. [转]Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...

随机推荐

  1. MQ脚本回放报错2059

    1.响应2059错误 1.1.   涉及协议 MQ,调试回放阶段 1.2.   错误信息 完成码2原因为2059:未能为 '10.200.100.75:QMEMBFE' 创建 MQQueueManag ...

  2. openstack Glance安装与配置

    一.实验目的: 1.理解glance镜像服务在OpenStack框架中的作用 2.掌握glance服务安装的基本方法 3.掌握glance的配置基本方法 二.实验步骤: 1.在controller节点 ...

  3. Java面试准备基础篇_11.24

    Java类加载机制 Java内存模型JMM 为什么 Redis 单线程能支撑高并发? 高并发下的接口幂等性解决方案! 面试官问:平常你是怎么对 Java 服务进行调优的? JAVA虚拟机(JVM)六: ...

  4. ReactNative: 创建自定义List列表组件

    一.介绍 在App中,很多数据消息显示都是一行行动态展示的,例如新闻标题,其实每一条新闻标题都可以独立成一个简单的列表组件,之前我们使用Text组件将数据都写死了,为了提高组件的灵活性,我们可以使用T ...

  5. C语言程序设计100例之(16):巧解算式

    例16  巧解算式 问题描述 在1.2.3.4.5.6.7.8.9.10个数中间加上加号或减号,使得到的表达式的值为自然数N,如果中间没有符号,则认为前后为一个数,如1 2 3认为是一百二十三(123 ...

  6. ETCD:文档

    原文地址:Documentation 文档 etcd是一个分布式键值对存储,被设计为可靠的,快速的保存并提供对关键数据的访问.通过分布式锁,领导选举和写屏障使能分布式一致性.一个etcd集群旨在实现高 ...

  7. Razor_01 第一个应用程序

    自己开始从头深造 自己看了一下,开头真的不适合初学者,没有重点,对不起各位了 . 但你可以在5 分钟以后看,对于初学者还时有深大的用处的 链 接: https://pan.baidu.com/s/1V ...

  8. SimpleDateFormat类简单学习

    一.简介 SimpleDateFormat是一个格式化和解析日期的具体类,其可以将时间转化为指定格式的日期字符串,也可以将具有格式的日期字符串转换为时间. formatting (date → tex ...

  9. 使用adb命令操控Android手机(adb命令)

    1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...

  10. 【转】Kotlin的inline内联函数

    原文链接:https://blog.csdn.net/Jaden_hool/article/details/78437947 方法调用流程 调用一个方法是一个压栈和出栈的过程,调用方法时将栈针压入方法 ...