Vue $refs的基本用法

html:
        <div id="app">
            <div ref = "box">{{msg}}</div>
            <button @click="change">点我改变msg的值</button>
        </div>
js:
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                change(){
                    this.$refs.box.innerHTML = "hello world"     
                    //好处：this.$refs 可减少获取dom节点的消耗了
                    //一般来讲，获取DOM元素，需document.querySelector（".box"）获取这个dom节点，然后再获取元素的值。
                    //但是用ref绑定之后，就不需要再获取dom节点了，在js里面直接this.$refs.box里调用就行。
                }
            }    
        })
    </script>