Vue基礎之數據綁定
阿新 • • 發佈：2019-01-21
下回 感受 reat 數據綁定 input 框架 fin 之前 imageview
我們學習一門新語言或者框架時，第一件事是什麽呢，那必然是向世界say Hello。
創建一個Vue應用
話不多說，先上代碼，讓我們感受一下Vue的核心功能
<!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> </head> <body> <div id="app"> <input type="text" v-model="message"> <h1>{{message}}</h1> // {{message}}模板的輸出方式 </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: ‘#app‘, // app是Vue實例的掛在對象 data: { message: "Hello world" // 字面量 } }) </script> </body> </html>
當修改輸入框內容時，h1標簽內容也做相應改變，雖然代碼很簡單，還是能體會到雙向綁定的精髓。
雙向綁定（面試考點）
- 通過構造函數創建一個Vue實例 new Vue()，此時app就相當於 new Vue；
傳入el，el是Vue對象中必不可少的，需要把el掛載到頁面已存在的DOM（可以是DOM元素，或者是CSS選擇器）上；
var app = new Vue({ el: ‘#app‘, // 或者document.getElementById(‘app‘) })在input標簽上有一個v-model指令，它的值和Vue實例中data裏的message對應，input可以修改message的值，同時當message改變時也可以體現在視圖上；
生命周期（開發時必了解）
每個Vue實例在被創建之前都要經過一系列的初始化過程,這個過程就Vue的生命周期。下面是Vue的幾個鉤子函數：
beforeCreate: function () { console.group(‘beforeCreate 創建前狀態===============》‘); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function () { console.group(‘created 創建完畢狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function () { console.group(‘beforeMount 掛載前狀態===============》‘); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function () { Vue.this = app // 在瀏覽器裏調試 console.group(‘mounted 掛載結束狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group(‘beforeUpdate 更新前狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group(‘updated 更新完成狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group(‘beforeDestroy 銷毀前狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group(‘destroyed 銷毀完成狀態===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }
下圖是Vue生命周期過程中el、data以及data裏面的message字段的變化
以上是本期全部內容，欲知後事如何，請聽下回分解<(￣︶￣)↗[GO!]
Vue基礎之數據綁定