Vue生命周期

main.js文件内容

Vue.config.productionTip=false
//设置为false来阻止在启动时生成生产提示

//创建Vue实例
new Vue({
	el:'#app',//element:绑定根元素,
    components:{App},//加载组件
    template:'<App/>'//呈现
})

//添加全局变量，
Vue.prototype.$hello = 'hello'

• 各个子组件中

• 可以通过

来访问全局变量，尽量不要修改全局变量，其他地方并不会动态响应改变

处理边界情况

$root

• 在main.js中添加的data（是对象，不是函数）

在子组件中都可以读到

$parent

• 在父组件中的data中添加内容，
  

• 子组件中可以读取父组件的内容

儿子读取父亲的数据 不仅仅有props的传递方案，还有$parent的读取方案

生命周期函数

<template>
	<div>组件声明周期函数</div>
</template>
<script>
	export default{
        name:"CL",
        data(){
			return{}
        },
		beforeCreate(){
			console.log("组件创建前")
        },
        created(){
			console.log("创建完成")
        },
    	beforeMount(){
			console.log("渲染之前")
        },
    	mounted(){
			console.log("渲染之后")
        },
        beforeUpdate(){
			console.log("数据更新前")
        },
    	updated(){
			console.log("数据更新后")
        },
        beforeDestroy(){
			console.log("销毁之前")
        },
        destroyed(){
			console.log("销毁之后")
        }
    }
</script>

单纯显示的话，只显示组件的创建和渲染，

• 组件的实例，是每调用一次，创建一个新的实例，分别是独立的

过渡&动画

• v-enter

• v-enter-active

• v-enter-to

• v-leave

• v-leave-active

• v-leave-to

这个v就代表transition中的name

<transition name="change">
    <p v-if="isFlag">hello</p>
</transition>
...
methods:{
	changeHandler(){
		this.isFlag = !this.isFlag
	}
}
...
<style>
    .change-enter{
        opacity:0
    }
    .change-enter-active{
        transition:opacity .5s
    }
    .change-enter-to{
		opacity:1
    }
</style>