一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 修改代码
要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ └── Lify.vue
App.vue
<template>
<div id="app">
<v-home></v-home>
<hr>
</div>
</template>
<script>
/*
import components
Local Registration components
use in template
*/
import Home from './components/Home.vue';
export default {
name: "app",
data() {
return {
msg:'hello vue world!',
};
},
components:{
'v-home':Home
},
mounted(){
console.log("i an a life Cycle function ")
}
};
</script>
<style>
</style>
Header.vue
<template>
<div class="header">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:'this is a head component'
}
},
methods :{
}
}
</script>
<style>
.header{
background:#000;
color: #fff;
}
</style>
Home.vue
<template>
<!-- all content need in root-->
<div id="home">
<v-header></v-header>
<h2>{{msg}}</h2>
<br>
<hr>
<v-life v-if="!flag"></v-life>
<br>
<hr>
<button @click="flag=!flag">switch mount or destroy Lify components</button>
</div>
</template>
<script>
import Header from './Header.vue'
import Life from './Lify.vue'
export default {
data(){
return {
msg:'i am home component!',
flag: true
}
},
methods :{
},
components:{
'v-header':Header,
'v-life': Life
}
}
</script>
<style>
#home h2{
color: red;
}
</style>
Lify.vue
<template>
<!-- all content need in root-->
<div id="home">
<h2>this is a life Cycle show: -- {{msg}} </h2>
<button>run and change msg</button>
</div>
</template>
<script>
export default {
data(){
return {
msg:'i am a life Cycle component.'
}
},
methods:{
setMsg(){
this.msg = 'i am the data after change!'
}
},
beforeCreate(){
console.log('before Instance create 1');
},
created(){
console.log('after Instance create 2');
},
beforeMount(){
console.log('before template Compile 3');
},
mounted(){//you can request data, Operat dom in mounted
console.log('after template Compile 4');
},
beforeUpdate(){
console.log('before data update 5');
},
updated(){
console.log('after data update 6');
},
beforeDestroy(){//you can save data before destroy
console.log('before Instance destroy 7');
},
destroyed(){
console.log('after Instance destroy 8')
}
}
</script>
五 运行
npm run dev
image.png
六 总结
1 温习控件的生命周期及钩子函数
