vue例項的屬性和方法

Dus發表於2018-10-30
Vue

vue例項的屬性和方法

1. 屬性

vm.$el
#指定要繫結的元素

vm.$data
#Vue 例項的資料物件

vm.$options
#獲取自定義屬性的值
new Vue({
    customOption: 'foo',  自定義屬性
    created: function () {
    console.log(this.$options.customOption) // => 'foo'
    }
        })
vm.$refs
#獲取所有ref屬性的標籤
    <h2 ref="hello">你好</h2>
    <p ref="world">世界</p>
    console.log(vm.$refs);
     //{hello: h2, world: p}
     
     // vm.$refs.hello.style.color='blue'; 給標籤新增style

2. 方法

vm.$mount()
#手動掛載
//vm.$mount('#itany');

vm.$destroy()
#銷燬例項

vm.$nextTick(callback)
#將回撥延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。
data:{
            user:{
                id:1001,
                name:'tom'
            }
        },

vm.$set(object,key,value)
#新增屬性值
Vue.set(this.user,'age',1)


vm.$delete(object,key)
#刪除屬性值
Vue.delete(this.user,'age')

vm.$watch(data,callback[,options])
#更新屬性值

vm.$watch(data,callback[,options])
#監測數值變化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監視資料的變化：$watch</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <input type="text" v-model="name">
        <h3>{{name}}</h3>
        <hr>
        
        <input type="text" v-model="age">
        <h3>{{age}}</h3>
        <hr>

        <input type="text" v-model="user.name">
        <h3>{{user.name}}</h3>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom',
                age:23,
                user:{
                    id:1001,
                    name:'alice'
                }
            },
            watch:{ //方式2：使用vue例項提供的watch選項
                age:(newValue,oldValue) => {
                    console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
                },
                user:{
                    handler:(newValue,oldValue) => {
                        console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
                    },
                    deep:true //深度監視，當物件中的屬性發生變化時也會監視
                }
            }
        });

        //方式1：使用vue例項提供的$watch()方法
        vm.$watch('name',function(newValue,oldValue){
            console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue);
        });

    </script>
    
</body>
</html>

相關文章