3-3 vue生命周期及实例的属性和方法-Vue实例的属性和实例方法/生命周期
目录:
- 实例属性
- 实例方法/生命周期
一、实例属性
Vue的属性由很多，我们首先来看看实例的属性，官方参考文档：Vue实例属性。
虽然Vue的属性很多，但是真正有用的不多，接下来就把经常用的一些属性来说下：
vm.$el => 获取vue实例关联的元素或者叫关联的选择器 vm.$data => 获取数据对象data vm.$options => 获取自定义属性 vm.$refs => 获取所有添加ref属性的元素(获取dom的元素)
1、vm.属性名 => 获取data中的属性
<body>
<div id="box">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vm实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.属性名 获取data中的属性
console.log(vm.msg);
</script>
</body>
console控制台输出：
欢迎来到高哥哥的博客园....
2、 vm.$el => 获取vue实例关联的元素或者叫关联的选择器
<body>
<div id="box">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.$el 获取vue实例关联的元素或者叫关联的选择器
console.log(vm.$el);
vm.$el.style.color = 'red';
</script>
</body>
console 控制台输出：
<div id="box" style="color: red;"><h2>欢迎来到高哥哥的博客园....</h2></div>
3、vm.$data => 获取数据对象data
<body>
<div id="box">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.$data 获取数据对象data
console.log(vm.$data);
console.log(vm.$data.msg);
</script>
</body>
console 控制台输出：
>{__ob__: Observer}
欢迎来到高哥哥的博客园....
4、vm.$options => 获取自定义属性
<body>
<div id="box">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
},
age:24, //自定义属性age
show:function(){ //自定义方法show
console.log("show");
}
});
//vm.$options获取自定义属性
console.log(vm.$options.age);
vm.$options.show();
</script>
</body>
console控制台输出：
24
show
5、vm.refs => 获取所有添加ref属性的元素(获取dom的元素)
<body>
<div id="box">
<h2>{{msg}}</h2>
<h2 ref="hello">你好</h2> <!--添加red属性元素-->
<h2 ref="china">中国</h2> <!--添加red属性元素-->
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.refs 获取所有添加ref属性的元素(获取dom的元素)
console.log(vm.$refs.hello);//获取dom对象
vm.$refs.hello.style.color = "blue";
console.log(vm.$refs); //获取所有的ref
</script>
</body>
console控制台输出：
<h2 style="color: blue;">你好</h2>
>{hello: h2, china: h2}
二、实例方法 / 生命周期
Vue的方法也很多，我们首先来看看实例的方法，官方参考文档：实例方法 / 生命周期。
实例方法/生命周期有很多，但是我们只学习以下常用的几个方法：
vm.$mount() vm.$destroy() vm.$nextTick(callback)
1、vm.mount() => 手动挂载vue实例
<body>
<div id="box">
<h2>{{msg}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
//el: "#box", //不挂载
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.mount() 手动挂载vue实例
vm.$mount("#box")
</script>
</body>
# 不挂载输出 => {{msg}}
# 挂载后输出 => 欢迎来到高哥哥的博客园...
除了通过vue实例对象挂载，也可以直接用vue实例来挂载：
let vm = new Vue({
data:{
msg: "欢迎来到高哥哥的博客园...."
}
}).$mount("#box"); //直接挂载，效果也一样的。
2、vm.$destroy() => 销毁实例
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
msg: "欢迎来到高哥哥的博客园...."
}
});
//vm.$destroy() 销毁实例
vm.$destroy();
3、vm.$nextTick(callback) => DOM更新完成，更新完成后再执行此callback代码
好奇怪啊，这个到底是干嘛用的呐，接下来我们看一个示例：
<body>
<div id="box">
<h2 ref="title">{{name}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
name: 'tom'
}
});
//vm.$nextTick(callback)
//修改数据
vm.name = "汤姆";
console.log(vm.$refs.title.textContent) //输出的还是tom
</script>
</body>
看输出效果：
这个到底是为啥？后来才知道：
当年vm的实例的属性被修改时，DOM还没更新，vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
所以就需要等你DOM更新完成，更新完成之后在去获取最新的值。这个时候就会用到vm.$nextTick(callback)
<body>
<div id="box">
<h2 ref="title">标题:{{name}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
Vue.config.devtools = false;
Vue.config.productionTip = false;
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
name: 'tom'
}
});
//vm.$nextTick(callback)
//修改数据
vm.name = "汤姆";
//DOM还没更新，vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
//console.log(vm.$refs.title.textContent) //输出的还是tom
vm.$nextTick(()=>{
//DOM更新完成，更新完成后再执行此代码
console.log(vm.$refs.title.textContent);
})
</script>
</body>
浙公网安备 33010602011771号