Vue实例的属性和方法

一、属性

1、vm.属性名 => 获取data中的属性

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
});
console.log(vm.msg);

2、vm.$el => 获取vue实例关联的元素,对其进行操作

world
var vm = new Vue({
    el: '#hello',
})
console.log(vm.$el); //DOM对象
vm.$el.style.color='red';

3、vm.$data => 获取数据对象data

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
});
console.log(vm.$data);
console.log(vm.$data.msg);

4、vm.$options => 获取自定义属性

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
    name: 'tom',
    age: 24,
    show: function() {
        console.log('show');
    }
});
console.log(vm.$options.name);
console.log(vm.$options.age);
vm.$options.show();

5、vm.$refs => 获取所有添加ref属性的元素，对其进行操作

var vm = new Vue({});
你好
console.log(vm.$refs);
console.log(vm.$refs.hello); //DOM对象
vm.$refs.hello.style.color = 'blue';

二、方法

1、vm.$mount() => 手动挂载vue实例

    
{{name}}

 vm.$mount('#hello');
-----------------------------------------------
var vm = new Vue({
    data: {
        name: 'zhang'
    }
}).$mount('#hello');

2、vm.$destroy() => 销毁实例

var vm = new Vue({});
vm.$destroy();

3、vm.$nextTick(callback) => 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM

    
{{name}}

var vm = new Vue({
    data: {
        name: 'zhang'
    }
}).$mount('#hello');

我们现在要对name的数据进行修改，使name的值等于cheng

vm.name="cheng";

并且立即打印出页面数据绑定的值

vm.name="cheng";
console.log(vm.$refs.title.textContent);

这个时候发现结果并不是改变之后的cheng,这是因为DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
所以我们需要等待DOM更新完成，更新完成后再执行此代码

vm.name="cheng";
vm.$nextTick(function() {
    console.log(vm.$refs.title.textContent);
});

此时打印出来的数据为期望值cheng！！！