1. 程式人生 > >Vue.js(4)- 生命周期

Vue.js(4)- 生命周期

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)- 生命周期