Vue 组件及生命周期

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中组件一直存在，只是是否隐藏和显示。