千锋扣丁学堂HTML5培训vue.js中ref和$refs的使用及示例讲解

2019-08-14 15:26:58 3418浏览

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于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

上面图片就是我们this.$refs.mobile的输出结果，vue.js提供的获取DOM元素的方法确实还是很方便。

以上就是关于千锋扣丁学堂HTML5培训vue.js中ref和$refs的使用及示例讲解的全部内容，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

                             

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>