我最近在研究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节点的消耗了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue组件 $children,$refs,$parent的使用详解
- 解决vue里碰到 $refs 的问题的方法
- vue中$refs的用法及作用详解
- Vue中$refs的用法详解
- 浅谈Vue.js中ref ($refs)用法举例总结
- Vue 2.0学习笔记之使用$refs访问Vue中的DOM
- vue中的ref和$refs的使用
- Vue $emit $refs子父组件间方法的调用实例
- vue.js $refs和$emit 父子组件交互的方法
- vue.js中ref和$refs的使用及示例讲解