一 vue的生命周期
1>beforeCreate
2>created
3>beforeMount
4>Mounted===>window.onload
5>beforeUpdate
6>updated
7>beforeDestory
8>destoryed
例子1
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="run">按钮</button> {{msg}}
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: 123
},
methods: {
run: function() {
this.msg = this.msg + 5;
}
},
beforeCreate: function() {
console.log("创建之前")
},
created: function() {
console.log("创建之后")
},
beforeMount: function() {
console.log("有el之前")
},
mounted: function() {
console.log("有el之后")
},
beforeUpdate: function() {
// this.msg = "hhaha"
console.log("改变之前")
},
updated: function() {
console.log("改变之后");
},
beforeDestory: function() {
console.log("销毁之前")
},
destoryed: function() {
console.log("销毁之后");
}
})
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="str">
<p>{{str}}</p>
<button @click="run">按钮</button>
<ul>
<li v-for="(item , index) in res">
{{item}} --- {{index}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
new Vue({
el: "#app",
data: {
str: "",
res: []
},
mounted: function() {
this.run();
},
methods: {
run: function() {
this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
params: {
str: this.str
}
}).then(function(res) {
console.log(res)
if (res.data == null) {
this.res = res.bodyText
} else {
this.res.push(res.data);
}
}, function(err) {
console.log(err);
})
}
},
})
</script>
</body>
</html>
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)