1. 程式人生 > 實用技巧 >vue中所有帶$的那些方法和用法

vue中所有帶$的那些方法和用法

說一下vue中所有帶$的方法

<div id="example">
    <p ref="myp">{{msg}}</p>
<div ref="warp">
   <div v-for="a in arr" ref="mydiv">a</div>
</div> </div>
let vm = new Vue({
        el:'#example',

        data:{msg:'hello',arr:[1,2,3]},
        mounted(){
            this.$nextTick(()=>{
                console.log(vm);
            })

console.log(this.$refs.myp)//無論有多少個只能拿到一個

console.log(this.$refs.mydiv)//可以拿到一個數組

this.arr=[1,2,3,4]
console.log(this.$refs.wrap)
debugger //這裡debugger的話只能看到warp打印出來的是有3個,因為dom渲染是非同步的。所以如果資料變化後想獲取真實的資料的話需要等頁面渲染
完畢後在獲取,就用$nextTick
} })
vm.$watch('msg', function (newValue, oldValue) {  // 這個回撥將在 `vm.msg` 改變後呼叫 })

//this.$data: vm上的資料

//this.$el:當前el元素

//this.$nextTick :非同步方法,等待渲染dom完成後來獲取vm

//this.$watch:監控

//this.$set:後加的屬性實現響應式變化

//this.$refs:被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的$refs物件上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子元件上,引用就指向元件例項