vue 实例的属性和方法

vue实例的属性和方法

1.属性

• vm.$el ===> 用于获取vue实例内el指定的dom对象
• vm.$data ===> 用于获取vue实例内的数据对象 data
• vm.$options ===> 用于获取vue实例内的自定义属性或方法

vm.$options方法实例：

    var vm = new Vue({
        el: "#app",
        data:{
            msg:"hello vue!"
        },
        name:"yang",
        age:27,
        show:function(){
            console.log("自定义show方法");
        }
    })
    console.log(vm.$el);    // 获得了el的dom对象
    console.log(vm.$data);  // 获得了data对象
    console.log(vm.$options);   // 获得了自定义的属性对象
    console.log(vm.$options.name);  // 获得了自定义的name，值为：yang
    vm.$options.show();  // 获取了自定义的show方法，并执行值为：自定义show方法

• vm.$refs ===> 用于所有添加过ref属性的元素

vm.$refs方法实例：

    <div class="box" id="app">
        <div class="hehe" ref="divDom"></div>
        <p class="hehe" ref="pDom"></p>
    </div>

    var vm = new Vue({
        el: "#app",
        data:{
            
        }
    })
    console.log(vm.$refs)   // 获取到了所有带有 ref的dom标签
    console.log(vm.$refs.pDom) // 获取到了带有ref属性并且值为pDom的标签
    console.log(vm.$refs.divDom) // 获取到了带有ref属性并且值为divDom的标签

    // 可以这样设置
    vm.$refs.pDom.style.color = "red";

2.方法

• vm.$mount ===> 手动挂载vue实例
  有两种写法分别为：

1)、

    var vm = new Vue({
        // el: "#app",      // 注释了挂载到dom对象
        data:{
            msg:"hello vue!"
        }
    })
    vm.$mount("#app");   // 这样也可以挂载到dom对象

2)、

    var vm = new Vue({
        // el: "#app",      // 注释了挂载到dom对象
        data:{
            msg:"hello vue!"
        }
    }).$mount("#app");      // 在实例最后调用$mount("需要挂载的dom");
    

• vm.$destroy() ===> 用于销毁vue实例
• vm.$nextTick(callback) ===> 用于数据更改，dom更新完成后执行

    var vm = new Vue({
        // el: "#app",      // 注释了挂载到dom对象
        data:{
            msg:"hello vue!"
        }
    }).$mount("#app");

    vm.msg = "hello world!";      // 这里更改了数据

    // 这里获取DOM的内容为：hello vue！，因为dom数据还没更新完成
    console.log(vm.$refs.pDom.innerHTML);   

    // 这里获取DOM的内容为：hello world！，因为dom数据已经更新完成
    vm.$nextTick(function(){
        console.log(vm.$refs.pDom.innerHTML);   
    });
    

• vm.$set(object,key,value)动态地为对象新增一个值，并且页面上的模版会实时地动态更新渲染值vm.$set 实例用法

    <div class="box" id="app">
        <button @click="addFn">添加一个属性</button>
        {{user.name}}
        {{user.num}}
    </div>
    
    var vm = new Vue({
        el: "#app",
        data:{
            user:{
                name:"yang"
            }
        },
        methods:{
            addFn:function(){
                /* this.user.num = "9527";      // 页面上的模版无法渲染
                console.log(this.user);     // 能打印出来，但是也页面上的模版未渲染出来 */
                // this.$set(this.user, "num", "9527");        // 页面上的模版渲染出来了值
                Vue.set(this.user, "num", "9527")       //vm.$set 的全局写法
            }
        }
    })
    

• vm.$delete(object, value)
  删除一个已有的属性，dom也会实时更新

  vm.$delete 实例用法

    <div class="box" id="app">
        <button @click="deleteFn">删除一个属性</button>
        {{user.name}}
    </div>
    
    var vm = new Vue({
        el: "#app",
        data:{
            user:{
                name:"yang"
            }
        },
        methods:{
            deleteFn: function(){
                // vm.$delete(this.user, "name");      // 删除页面上已有的一个属性，dom也会实时更新
                Vue.delete(this.user, "name");      // vm.$delete 全局写法
            }
        }
    })

• vm.$watch(data, callback(newValue,oldValue), [option])
  监视数据的变化

    <input type="text" v-model="msg">   // 绑定 vm.$watch 写法1
    {{msg}}

    <input type="text" v-model="id">    // 绑定 watch 写法2
    {{id}}

    <input type="text" v-model="user.name">    // 绑定 watch 写法2
    {{user.name}}
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello vue!",
            id:"1001",
            user:{
                name:"yang"
            }
        },
        /* watch:{     // 写法2:vue实例提供的一个选项 - 普通监视数据变化
            id:function(newValue, oldValue){
                console.log("id更改之后的值"+ newValue +"，id更改之前的值"+ oldValue);
            }
        } */
        watch:{     // 写法2:vue实例提供的一个选项 - 深度监视对象数据变化
            user:{
                handler:function(newValue, oldValue){
                    console.log("user更改之后的值"+ newValue +"，user更改之前的值"+ oldValue);
                },
                deep: true
            }
        }
    })

    // 写法1:vue实例提供的$watch方法 - 普通监视数据变化
    vm.$watch("msg",function(newValue, oldValue){      
        console.log("msg更改之后的值"+ newValue +"，msg更改之前的值"+ oldValue);
    })  

    // 写法1:vue实例提供的$watch方法 - 深度监视对象数据变化
    vm.$watch("user",function(newValue, oldValue){
        // 监视一个对象后，这里的newValue 和 oldValue将会指向同一指针，也就是指向了同一个值，更改前后值会一样
        console.log("user更改之后的值"+ newValue +"，user更改之前的值"+ oldValue);    
    },{
        deep:true
    })