一般来讲,获取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. 记录python上传文件的坑(2)

    描述: 1.之前在写项目mock代码时,碰到一个上传文件的接口,但项目接口本身有token保护机制,碰到token失效时,需要重新获取一次token后,再次对上传文件发起请求,在实际调用中发现,第一次 ...

  2. C++ std::list 基本用法

    #include <iostream> #include <string> #include <list> using namespace std; // http ...

  3. File Zilla server安装完报错could not load TLS libraries. aborting start of administration interface

    问题描述: 系统:Windows2008R2x64 安装完filezillaserver以后出现这个问题 解决方法: 需要安装个系统补丁:Windows6.1-KB2533623-x64 安装完重启服 ...

  4. SQL查询语法30例

    学好SQL查询:无他,概手熟耳. 1. 基础表: 学生表: 老师表: 课程表: 成绩表: 2. 题目: 1.查询名字中含有"华"字的学生信息 select * from 学生 wh ...

  5. C++ 课程设计——电梯调度系统

    这是我在本学期C++课程最后的课程设计报告,源代码将会上传到GitHub上. 一.背景 随着经济的不断发展,越来越多的摩天大楼拔地而起,而电梯作为高层建筑物种的运送人员货物的设备也越来越被广泛使用.电 ...

  6. [转]为什么group by后面不能使用别名(除MySQL)

    同事工作中遇到一个问题: select   count(billingdate),to_char(billingdate,'YYYYmm') month from tu_trade where to_ ...

  7. C# 从图片中截取一部分图片,并返回所截取的图片

    /// <summary> /// 从图片中截取一部分图片 /// </summary> /// <param name="fromImagePath" ...

  8. 周会材料:高并发程序设计<二>

    第三章 JDK并发包https://www.cnblogs.com/sean-zeng/p/11957569.html JDK内部提供了大量实用的API和框架.本章主要介绍这些JDK内部功能,主要分为 ...

  9. (转)阿里 RocketMQ 安装与简介

    原文:阿里 RocketMQ 安装与简介 一.简介 官方简介: l  RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: l  能够保证严格的消息顺序 l  提供丰富的消息拉取模式 l ...

  10. CAD编辑器哪个好用?如何使用CAD编辑器

    说起CAD图纸很多的朋友都很熟悉,因为CAD图纸在很多领域都有广泛的应用.那CAD图纸都是使用CAD编辑器制图软件来进行绘制的,图纸的格式都是为dxf格式或者是dwg格式的.对于才接触CAD的伙伴们来 ...