Vue的生命周期钩子
lifecycle.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期钩子</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">hello world</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#root',
template:"",
beforeCreate:function () {
console.log("基础的初始化之后");
},
created:function () {
console.log("基础的外部注入或是绑定之类的");
},
//vue实例是否有el属性
//vue实例是否有template属性,如果有就渲染,没有就把el对应的
//<div id="root"></div>中的内容当做模板来使用
beforeMount:function () {
console.log("1.页面渲染之前,页面和数据即将结合渲染到页面之前");
},
mounted:function () {
console.log("页面和数据即将结合渲染到页面之上后");
},
beforeDestroy:function () {
console.log("当destory()执行的时候先执行这个");
},
destroyed:function () {
console.log("destory()执行的时候在执行这个");
},
beforeUpdate:function () {
console.log("当数据发生改变,但是还没有渲染页面");
},
updated:function () {
console.log("渲染页面之后");
}
})
</script>
</body>
</html>
网友评论