一、属性
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!!!
网友评论