vue周期函数

2020-09-11  本文已影响0人  GaoXiaoGao

1.vue中的组件

-vue中所有页面由组件组成
-vue可以将公共的部分封装成组件在其他地方使用
-App.vue是根组件,其他组件挂载到App.vue上面(v-rounter路由可以动态挂载组件)

2.封装组件

-创建vue文件,vue文件就是一个组件
-在其他组件中引入组件
-然后挂载组件
-使用组件
例子如下

<template>
  <div>
  <router-view/>
  //3.在组件中使用
  <v-home></v-home>
  </div>
</template>

<script>
//1.引入组件
import Home from './components/Home.vue'
export default {
  name: 'App',
  data() {
    return{
    }
  },
//2.挂载组件
  components:{
    'v-home':Home
  }
}
</script>

<style>

</style>

3.生命周期函数

组件挂载,组件更新,组件销毁等触发的周期函数

beforeCreate(){}//实例创建之前
created(){} //实例创建完成
beforeMount(){} //编译之前
mounted(){} //编译完成, 一般可以请求数据,操作dom放在这个方法中
beforeUpdate(){} //更新之前
updated(){} //更新完成
beforeDestroy(){} //销毁之前
destroyed(){} //销毁完成

上一篇 下一篇

猜你喜欢

热点阅读