Vue.js（4）- 生命周期
阿新 • • 發佈：2018-11-13
pan {} tle fault del reat red mpat itl
https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
https://segmentfault.com/a/1190000008771768
https://www.cnblogs.com/happ0/p/8075562.html
MVVM框架
M：model層 —— 數據和業務邏輯
V：view層 —— 負責界面和顯示
VM：ViewModel層 —— 包括界面邏輯和模型數據封裝（雙向數據綁定）
lifecycle
var vm = new Vue({ el: ‘#app‘, data: {}, methods:{}, })
當new的時候，就創建了一個vue實例，這個實例就是vue框架的入口，也是VM層
<!DOCTYPE html> <html lang="en"> <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> <script src="./vue-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> <script> var vm = new Vue({ el: "#app", data: { message: ‘my words‘ }, beforeCreate() { console.group("beforeCreate"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, created() { console.group("created"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, beforeMount() { console.group("beforeMount"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, mounted() { console.group("mounted"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, beforeUpdate() { console.group("beforeUpdate"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, updated() { console.group("updated"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, beforeDestroy() { console.group("beforeDestroy"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, destroyed() { console.group("destroyed"); console.log("%c%s", "color:red", "el : " + this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) }, }) </script> </body> </html>
Vue.js（4）- 生命周期