我們學習一門新語言或者框架時，第一件事是什麼呢，那必然是向世界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!]