Vue实例生命周期

最新推荐文章于 2024-04-18 21:51:51 发布

Damon J

最新推荐文章于 2024-04-18 21:51:51 发布

阅读量171

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://www.bilibili.com/video/av74128420?p=4

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id='app'>
    	<App></App>
    </div>
    <script type="text/javascript" src="vue.min.js"></script>
    <script type="text/javascript">


    	/*
		beforeCreate
		created
		beforeMount
		mounted
		beforeUpdate
		updated
		activated
		deactivated
		beforeDestroy
		destroyed
		

    	*/
    	Vue.component('Test',{
    		data(){
    			return {
    				msg:"hello world",
    				data:{}
    			}
    		},
    		template:`
			<div>
				<div>{{msg}}</div>
				<button @click = 'changerHanlder'>改变</button>

			</div>
    		`,
    		methods:{
    			changerHanlder(){
    				this.msg = this.msg +'尴尬';
    			}
    		},
    		beforeCreate:function(){
    			// 组件创建之前 
    			console.log(this.msg); //undefine
    		},
		created:function(){
			//组件创建之后
			console.log(this.msg);
			//使用该组件，就会调用created方法
			// 在created这个方法中可以操作后端的数据  数据驱动视图
			// 应用： 发起ajax请求

		},
		beforeMount:function(){
			// 挂载数据到 DOM之前会调用
			console.log(document.getElementById('app'));
		},
		mounted:function(){
			// 挂载数据到 DOM之后会调用 Vue作用以后的DOM  操作DOM
			console.log(document.getElementById('app'));
		},
		beforeUpdate:function(){
			// 在更新DOM之前 调用该钩子，应用：可以获取原始的DOM
			console.log(document.getElementById('app').innerHTML);
		},
		updated:function(){
			// 在更新DOM之后调用该钩子，应用：可以获取最新的DOM
			console.log(document.getElementById('app').innerHTML);

		},
		beforeDestroy:function(){
			console.log('beforeDestroy');
		},
		destroyed:function(){
			console.log('destroyed');
		},
		activated:function(){
			console.log('组件被激活了');
		},
		deactivated:function(){
			console.log('组件被停用了');
		}
    	})

    	var App = {
    		data(){
    			return {
    				isShow:true
    			}
    		},
    		// vue内置组件<keep-alive></keep-alive> 能在组件的切换过程中将状态保留在内存中。防止重复渲染DOM
    		template:`
			<div class = 'app'>

				<keep-alive>
					<Test v-if ='isShow'/>
				</keep-alive>
				<button @click = 'isShow =!isShow'>改变生死</button>

			</div>
    		`
    	}
    new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        components: {
            App
        }
    });
    </script>
</body>
</html>