App.vue根组件
<template>
<div id="app">
<div class="aaa"></div>
<!--所有的组件都在Components文件下-->
<!--第一步:vue 中创建单文件组件(创建了Home组件) 左侧导航栏新建文件-->
<!--第四步:使用组件-->
<v-home></v-home>
<v-life v-if="com"></v-life>
<hr>
<button @click="changemsg">验证销毁组件</button>
<v-mock></v-mock>
<Axios></Axios>
<fetchjsonp></fetchjsonp>
</div>
</template>
<script>
//第二步:导入组件
import Home from './Components/home.vue';
import life from './Components/life.vue';
import mock from './Components/mock.vue';
import Axios from './Components/Axios.vue';
import fetchjsonp from './Components/Fetchjsonp.vue';
export default {
name: 'app',
//第三步:注册组件(哪里要用就注册在哪里)components
components:{
'v-home':Home, //'随便起个名字':此处为导入的组件名
'v-life':life,
'v-mock':mock,
'Axios':Axios,
'fetchjsonp':fetchjsonp
},
data () {
return {
com:false
}
},
methods:{
changemsg(){
this.com=!this.com;
}
}
}
</script>
<style>
</style>
Vue生命周期
beforeCreate----组件创建之前
created----组件创建之后
beforeMount-----虚拟dom渲染之前
mounted----虚拟dom渲染之
beforeUpdate----组件修改之前
updated----组件修改之后
beforeDestroy----组件销毁之前
destroyed----组件销毁之后
注:v-if其组件会被销毁重建,而v-show中组件一直存在,只是是否隐藏和显示。