一般来讲,获取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>
JavaScript
new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗 } } })
这里的$refs可以看做是ref的选择器,这个$ref是一个对象,通过key可以获取到其中存放的对象。
当然了,既然是对象,也可以使用方括号运算符去访问,具体是this.$refs[input1]。
"我只是怕我再也见不到你了。"