Vue实例的属性和方法

2019-07-25  本文已影响0人  念念碎平安夜

一、属性

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

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

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

<div id="hello">world</div>
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({});
<h1 ref="hello">你好</h1>
console.log(vm.$refs);
console.log(vm.$refs.hello); //DOM对象
vm.$refs.hello.style.color = 'blue';

二、方法

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

<div id="hello">
    <h1>{{name}}</h1>
</div>
 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

<div id="hello">
    <h1 ref="title">{{name}}</h1>
</div>
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!!!

上一篇下一篇

猜你喜欢

热点阅读