深入理解vue $refs的基本用法

我最近在研究vue 的路上，看到了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节点的消耗了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 2中ref属性的使用方法及注意事项

    Vue 2中ref属性的使用方法及注意事项

    发现问题 最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组 // html <ul> <li ref="refCon">1</li> <li ref="refCon">2</li> </ul> // js created: function() { this.$nextTick(() => { console.log(this.$refs.refCon) // 打印结果:

  • vue2里面ref的具体使用方法

    本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下. 1.我们先定义两个组件 html部分 <div id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </div> js部分 Vue.component('navbar',{ template:'<div>{{navs}}</div>', data:function

  • Vue中的ref作用详解(实现DOM的联动操作)

    Vue中的ref作用详解(实现DOM的联动操作)

    其实官网已经讲的很仔细了,只是我个人可能接受能力比较差,并没有立刻明白他的意思.不过使用之后就很明白了.这里主要举个例子来说明: 我想要的效果是点击保存的同时,也能点击重置这个按钮,触发reset,ref这个特性就帮我达到了DOM的一个联动效果. 总结

  • vue组件 $children,$refs，$parent的使用详解

    vue组件 $children,$refs，$parent的使用详解

    本文介绍了vue组件 $children,$refs,$parent的使用,分享给大家,也自己留个笔记 如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"></firstchild> 然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数 2)$children 他返回的是一个

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

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

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

  • 深入理解vue $refs的基本用法

    我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", metho

  • 深入理解js中this的用法

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 1.纯粹函数调用. function test() { this.x = 1; alert(x); } test(); 其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global.其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global. var x = 1; function test()

  • 深入理解 ES6中的 Reflect用法

    Reflect对象是一个全局的普通的对象.Reflect的原型就是Object. 我们首先来验证下 看看Reflect的原型是否是Object, 基本代码如下: let obj = {}; console.log(Reflect.__proto__ === Object.prototype); // true console.log(obj.__proto__ === Reflect.__proto__); // true let str = '111'; console.log(str.__p

  • 深入理解vue的使用

    深入理解vue的使用

    理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架. 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念. 那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开

  • 全面理解Python中self的用法

    刚开始学习Python的类写法的时候觉得很是麻烦,为什么定义时需要而调用时又不需要,为什么不能内部简化从而减少我们敲击键盘的次数?你看完这篇文章后就会明白所有的疑问. self代表类的实例,而非类. 实例来说明: class Test: def prt(self): print(self) print(self.__class__) t = Test() t.prt() 执行结果如下 <__main__.Test object at 0x000000000284E080> <class

  • 深入理解双指针的两种用法

    深入理解双指针的两种用法

    好久没有用过C/C++的二级指针了,总觉的它就是指针的指针,没什么大不了的,但是今天看到一道面试题,感觉自己对二级指针的理解还是不够深刻.于是,从网上找资料,学习了一番--题目是这样的: 复制代码 代码如下: #include "stdafx.h"#include <iostream>using namespace std;void GetMemory(char *p, int num){ p = (char *)malloc(sizeof(char) * num); //

  • 深入理解jquery中的each用法

    1种 通过each遍历li 可以获得所有li的内容 <!-- 1种 --> <ul class="one"> <li>11a</li> <li>22b</li> <li>33c</li> <li>44d</li> <li>55e</li> </ul> <button>输出每个li值</button> <

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

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

  • PHP单元测试利器 PHPUNIT深入用法(三)第1/2页

    PHP单元测试利器 PHPUNIT深入用法(三)第1/2页

    在本文中,笔者将为大家介绍phpunit中的两个高级概念和用法,尽管它不一定在你的日常单元测试中都用到,但理解和学会它们的用法对学习phpunit还是十分重要的. Phpunit中的Annotations 如果有其他编程语言经验的开发者,应该对Annotations(注解)不陌生,其实在phpunit中,一个简单的如下面的一段注释也可以认为是Annotations: #div_code img{border:0px;} <?phpclass MyTestClass extends PHPUnit

  • 基于pytorch中的Sequential用法说明

    class torch.nn.Sequential(* args) 一个时序容器.Modules 会以他们传入的顺序被添加到容器中.当然,也可以传入一个OrderedDict. 为了更容易的理解如何使用Sequential, 下面给出了一个例子: # Example of using Sequential model = nn.Sequential( nn.Conv2d(1,20,5), nn.ReLU(), nn.Conv2d(20,64,5), nn.ReLU() ) # Example o

随机推荐