1. 程式人生 > >Vue $refs的基本用法

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>