vue的生命周期
2019-05-21 本文已影响0人
瑟闻风倾
Vue官网
Vue GitHub
Vue1下载地址
Vue1.0 在线文档
Vue2下载地址
Vue2.0 在线文档
vue的生命周期函数.png
1. vue1.0的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../../first/vue1026.js"></script>
</head>
<body>
<!-- view -->
<div id="app">
{{name}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"hello liy"
},
//生命周期函数：vue1.0主要有6个页面初始化相关的函数。created及以后才能获取data中数据,一般优先选择在created中进行ajax请求操作。
init:function(){
console.log("1 init:",this.name);
},
created:function(){
console.log("2 created:",this.name);
},
beforeCompile:function(){
console.log("3 beforeCompile:",this.name);
},
compiled:function(){
console.log("4 compiled:",this.name);
},
attached:function(){
console.log("5 attached:",this.name);
},
ready:function(){
console.log("6 ready:",this.name);
}
});
</script>
</html>
2. vue2.0的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../../first/vue221.js"></script>
</head>
<body>
<!-- view -->
<div id="app">
{{name}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"hello liy"
},
//生命周期函数：vue2.0主要有4个页面初始化相关的函数。created及以后才能获取data中数据,一般优先选择在created中进行ajax请求操作。
beforeCreate:function(){
console.log("1 beforeCreate:",this.name);
},
created:function(){
console.log("2 created:",this.name);
},
beforeMount:function(){
console.log("3 beforeMount:",this.name);
},
mounted:function(){
console.log("4 mounted:",this.name);
}
});
</script>
</html>
