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節點的消耗了