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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php验证码生成代码
2015/11/11 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
什么是JavaScript
2009/08/13 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python中的sort方法使用详解
2014/07/25 Python
python中异常捕获方法详解
2017/03/03 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python 对象和json互相转换方法
2018/03/22 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
销售个人求职信范文
2014/04/28 职场文书
医生个人年度总结
2015/02/28 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书