vue中$refs的用法及作用详解

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

用法如下:

HTML:

<div id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</div>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

下面给大家介绍下vue $refs的基本用法，具体代码如下所示：

<div id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</div>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

总结

以上所述是小编给大家介绍的vue中$refs的用法及作用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会

及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • vue中的ref和$refs的使用

    ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上.如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素. ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <div id="app7">

  • 解决vue里碰到 $refs 的问题的方法

    解决vue里碰到 $refs 的问题的方法

    本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题 记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

  • Vue编译器源码分析compileToFunctions作用详解

    Vue编译器源码分析compileToFunctions作用详解

    目录 引言 Vue.prototype.$mount函数体 源码出处 options.delimiters & options.comments compileToFunctions函数逐行分析 createFunction 函数源码 引言 Vue编译器源码分析 接上篇文章我们来分析:compileToFunctions的作用. 经过前面的讲解,我们已经知道了 compileToFunctions 的真正来源你可能会问为什么要弄的这么复杂?为了搞清楚这个问题,我们还需要继续接触完整的代码. 下面

  • Vue常用的修饰符的作用详解

    目录 一.Vue的修饰符是什么 二.修饰符的作用 1.表单修饰符 2.事件修饰符 3.鼠标按钮修饰符 4.键盘修饰符 5.v-bind修饰符 三.常用的应用场景 一.Vue的修饰符是什么 Vue中的修饰符分为以下五种: 表单修饰符: 事件修饰符: 鼠标按键修饰符: 键值修饰符: v-bind修饰符. 二.修饰符的作用 1.表单修饰符 修饰符 作用 使用 lazy 填完信息,光标离开标签的时候,才会将值赋予给value <input type="text" v-model.lazy

  • Vue开发实例探究key的作用详解

    目录 前言 为什么不推荐使用 index 作为 key? 如果 key 重复会导致什么样的错误? 使用 key 和不使用 key 有什么差别? key的实际应用 上述结论在Vue3中也成立吗? 总结 使用key 不使用key 前言 一提到 vue 中的 key,你会想到什么?使用v-for时需要使用 key ?key 不能重复?建议不要使用 index 来做key的值?这究竟是为什么呢?就下来我们就一起来通过实例来一探究竟. 为什么不推荐使用 index 作为 key? 我们先来看两个例子 为了

  • Vue作用域插槽实现方法及作用详解

    默认插槽和具名插槽的概念比较好理解,这里主要以官方文档的案例来讲解一下作用域插槽. 首先是有一个currentUser的组件: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • vue 中的 render 函数作用详解

    render 函数作用 vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了.建议配合文档阅读,本文也是根据文档加上自己的理解. 注:本文代码都是在单文件组件中编写.代码地址 render 函数作用 render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数. 官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几.具体代码可以看文档.

  • vue组件historyApiFallback作用详解

    vue组件historyApiFallback作用详解

    本篇博客主要是详细总结一下vue中的historyApiFallback的作用. 当我们在浏览器中输入一个网址(比如说是:http://www.edit.com),此时会经过dns解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(html,css,js). 如果我们在前端设置了重定向,此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上.此时如果我们刷新页面的话,浏览器会发送新的请求ht

  • vue中v-model的应用及使用详解

    vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

随机推荐