- 技术
- vue 的生命周期初次尝试
vue 生命周期
效果显示图
全部代码
<!--
* @Descripttion
: 🐉vue生命周期
* @Author
: xinxinp
* @Date
: 2020-07-01 05:47:25
* @LastEditTime
: 2020-07-01 09:14:37
-->
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>vue生命周期演示
</title
>
<script src
="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script
>
</head
>
<body
>
<div id
="box">
<input type
="text" name
="" v
-model
="msg" id
="">
{{ msg
}}
<button @click
="destoryCom">销毁组件
</button
>
</div
>
</body
>
<script
>
const app
= new Vue({
el
:"#box",
data
:{
msg
:'123'
},
methods
: {
destoryCom(){
this.$destroy()
}
},
beforeCreate() {
console
.log(`%c beforeCreate`, "color:red;font-size:20px");
},
created() {
console
.log(`%c created`, "color:green;font-size:20px");
},
beforeMount(){
console
.log(`%c beforeMount`, "color:red;font-size:20px");
},
mounted() {
console
.log(`%c mounted`, "color:green;font-size:20px");
},
beforeUpdate() {
console
.log(`%c beforeUpdate`, "color:red;font-size:20px");
},
updated() {
console
.log(`%c updated`, "color:blue;font-size:20px");
},
beforeDestroy() {
console
.log(`%c beforeDestroy`, "color:red;font-size:20px");
},
destroyed() {
console
.log(`%c destroyed`, "color:green;font-size:20px");
},
});
</script
>
</html
>
关注我，了解更多有趣的小工具
欢迎你的宝贵建议 github地址
Processed:
0.018, SQL:
9
