vue.js中ref及$refs的使用方法解析


Posted in Javascript onOctober 08, 2019

关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的:

vue.js中ref及$refs的使用方法解析

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件;

vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的;类似于jquey中的$(".xxx");

那么我们如何使用ref和$refs呢?

ref可以直接加在HTML标签上,作为一个属性存在于HTML标签中,如图

<input title="手机号" name="mobile" ref="mobile" placeholder="手机号" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>

这样,我们就是给input输入框元素注册了引用信息,那么我们如何获取这个DOM元素呢?

同样,vue.js也给我们提供了特定的方法:

this.$refs.mobile

vue.js中ref及$refs的使用方法解析

vue.js中ref及$refs的使用方法解析

上面图片就是我们this.$refs.mobile的输出结果 ,vue.js提供的获取DOM元素的方法确实还是很方便呢,希望我的博客能够帮助您更好的理解vue语法的使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 #Javascript
新手入门js闭包学习过程解析
Oct 08 #Javascript
关于JSON解析的实现过程解析
Oct 08 #Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 #Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 #Javascript
webpack HappyPack实战详解
Oct 08 #Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 #Javascript
You might like
PHP 输出缓存详解
2009/06/20 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
python二分法实现实例
2013/11/21 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python实现顺时针打印矩阵
2019/03/02 Python
学习python分支结构
2019/05/17 Python
使用python求解二次规划的问题
2020/02/29 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
介绍一下Linux文件的记录形式
2012/04/18 面试题
检察官就职演讲稿
2014/01/13 职场文书
爱护公共设施标语
2014/06/24 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
高三物理教学反思
2016/02/20 职场文书
创业计划书之农家乐
2019/10/09 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python