vue this.$refs的使用
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值。
但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行。
在JavaScript里面通过this.$refs.input1去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗
html代码
<div id="app"> <input type="text" ref="input1" /> <button @click="add">添加</button> </div>
js代码
new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗 } } })