zoukankan      html  css  js  c++  java
  • Vue实例-实现生命周期钩子

    Vue官网: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

    生命周期钩子的API:https://cn.vuejs.org/v2/api/#选项-生命周期钩子

    学习官网教程。纪录练习。

    生命周期钩子需要写在new Vue()时传递的对象内,以属性的方式进行声明。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{{msg}}
    		</div>
    		<script>
    			var vm = new Vue({
    				el:'#app',
    				data:{
    					msg: 'hi vue'
    				},
    				//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    				beforeCreate: function(){
    					console.log('beforeCreate');
    				},
    				/*在实例创建完成后被立即调用。
    				在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。
    				然而,挂载阶段还没开始,$el property 目前尚不可用。*/
    				created: function(){
    					console.log('created');
    				},
    				//在挂在开始之前被调用,相关的渲染函数首次别调用
    				beforeMount: function(){
    					console.log('mounted');
    				},
    				//el被新创建的vm.$el替换,挂载成功
    				mounted: function(){
    					console.log('mounted');
    				},
    				//数据更新时调用
    				beforeUpdate: function(){
    					console.log('beforeUpdate');
    				},
    				//组件DOM已经更新,组件更新完毕
    				updated: function(){
    					console.log('updated');
    				}
    			});
    			setTimeout(function(){
    				vm.msg = "change..."
    			}, 3000);
    		</script>
    	</body>
    </html>
    

    运行代码:

    三秒之后:

  • 相关阅读:
    java--exceptions
    java-interface
    Java笔记
    memcpy
    const 关键字
    LeeCode整数 反转
    函数调用运算符笔记
    cvCreateImage
    c++继承笔记1
    虚拟机下的debian无法登陆
  • 原文地址:https://www.cnblogs.com/xiaoxuStudy/p/13072349.html
Copyright © 2011-2022 走看看