vue 实例的生命周期
每个 Vue 实例 在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听（el）、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，(系统预留函数)
这给了用户在不同阶段添加自己的代码的机会。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button type="button" @click="num++" >垒加</button> {{num}}
<p></p>
<input type="text" v-model="name" placeholder="请输入姓名"/>
<button @click="call">Call API</button>
<p></p>
<ul>
<li v-for="item in resoult">{{item}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue-resource.js"></script>
<script>
new Vue({
beforeCreate:function(){
console.log("beforeCreate")
},
created() {
console.log("created")
},
beforeMount:function(){
console.log(" 有 beforeMount 之前")
},
mounted:function(){
console.log("有 mounted 之后"),
this.call()//=================================================
},
beforeUpdate:function(){
console.log("改变之前")
},
updated:function(){
console.log("改变之后")
},
beforeDestroy:function(){
console.log("销毁之前")
},
destroyed:function(){
console.log("销毁之后")
},
el:"#app",
data:{
num:0,
name:"",
resoult:[],
},
methods:{
call:function(){
this.$http.get("server.php", {
paeams:{
userName:this.name,
},
}).then(function(res){
console.log("服务器返回："+res.data)
this.resoult = res.data;
})
},
},
})
</script>
</body>
</html>
这里用到了 <script src="vue-resource.js"></script>
可以通过 : npm install vue-resource
安装
小结 ：
生命周期