<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Vue实例生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">Vue实例生命周期函数</div>
<script>
var vm=new Vue({
el:"#app",
template:"<div>{{test}}</div>",
data:{
test:"Vue实例生命周期函数x"
},
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("Created")
},
//数据传递
beforeMount:function(){
console.log(this.$el)
},
mounted:function(){
console.log(this.$el)
},
//vm.$destroy()销毁
beforeDestroy:function(){
console.log("beforeDestroy")
},
destroyed:function(){
console.log("Destroyed")
},
//vm.test="dell"改变数据
beforeUpdate:function(){
console.log("beforeUpdate")
},
updated:function(){
console.log("updated")
},
})
</script>
</body>
</html>
页面创建+数据传递
改变数据
销毁
网友评论