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

　　

　　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元素的方法确实还是很方便呢，希望我的博客能够帮助您更好的理解vue语法的使用。

vue.js中ref及$refs的使用及讲解的更多相关文章

  1. Vue.js中ref ($refs)用法举例总结

    原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...

  2. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  3. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  4. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  7. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  8. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  9. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

随机推荐

  1. 我在生产项目里是如何使用Redis发布订阅的？（二）Java版代码实现（含源码）

    上篇文章讲了在实际项目里的哪些业务场景用到Redis发布订阅,这篇文章就讲一下,在Java中如何实现的. 图解代码结构 发布订阅的理论以及使用场景大家都已经有了大致了解了,但是怎么用代码实现发布订阅呢 ...

  2. Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用

    Client与Server的网络通信协议传输使用google protobuf,服务器端使用的是Java 一. Protocol Buffersprotobuf全称Google Protocol Bu ...

  3. 17.Linux命令

    1.网络配置 setup       配置 ifup eth0  启动网卡 文件保存在  /etc/sysconfig/network-scripts/ifcfg-eth0,修改ifcfg-eth0配 ...

  4. Java设计模式学习笔记(三) 工厂方法模式

    前言 本篇是设计模式学习笔记的其中一篇文章,如对其他模式有兴趣,可从该地址查找设计模式学习笔记汇总地址 1. 简介 上一篇博客介绍了简单工厂模式,简单工厂模式存在一个很严重的问题: 就是当系统需要引入 ...

  5. 使用wincc C脚本查找窗口句柄的方法

    关于窗口句柄的用法,网上可以搜到很多相关的文章,本文以windows API接口函数为例,简单介绍一下基本使用,主要包括找到此窗体,在找到的窗体写入数据,对窗体进行关闭,最大化,最小化的操作: 1.利 ...

  6. 数据结构-树以及深度、广度优先遍历（递归和非递归，python实现）

    前面我们介绍了队列.堆栈.链表,你亲自动手实践了吗?今天我们来到了树的部分,树在数据结构中是非常重要的一部分,树的应用有很多很多,树的种类也有很多很多,今天我们就先来创建一个普通的树.其他各种各样的树 ...

  7. python 写入excel数据而不改变excel原有样式

    目标:python写数据到excel,不改变原有样式 解决:在打开excel时,加入该参数formatting_info=True

  8. Docker+Maven+Jenkins在Devops中完整应用

    过去与现在 很早之前,当我们需要一个部署环境的时候,我们可能指的是一台PowerEdge R710 2U服务器,走一系列冗长的申请流程,然后上架到机房.调试网络.安装系统.调试环境.最终部署应用,就这 ...

  9. kali换源

    在/tec/apt/sources.list加入以下内容 #中科大更新源 deb https://mirrors.ustc.edu.cn/kali kali-rolling main non-free ...

  10. 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...