我們學(xué)習(xí)一門新語言或者框架時(shí)思劳，第一件事是什么呢呆细，那必然是向世界say Hello。
創(chuàng)建一個(gè)Vue應(yīng)用
話不多說臭挽，先上代碼捂襟，讓我們感受一下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實(shí)例的掛在對象
data: {
message: "Hello world" // 字面量
}
})
</script>
</body>
</html>
當(dāng)修改輸入框內(nèi)容時(shí)，h1標(biāo)簽內(nèi)容也做相應(yīng)改變欢峰，雖然代碼很簡單葬荷，還是能體會(huì)到雙向綁定的精髓涨共。
雙向綁定（面試考點(diǎn)）
- 通過構(gòu)造函數(shù)創(chuàng)建一個(gè)Vue實(shí)例 new Vue()，此時(shí)app就相當(dāng)于 new Vue宠漩；
- 傳入el举反，el是Vue對象中必不可少的，需要把el掛載到頁面已存在的DOM（可以是DOM元素扒吁，或者是CSS選擇器）上火鼻；
var app = new Vue({ el: '#app', // 或者document.getElementById('app') }) - 在input標(biāo)簽上有一個(gè)v-model指令，它的值和Vue實(shí)例中data里的message對應(yīng)雕崩，input可以修改message的值魁索，同時(shí)當(dāng)message改變時(shí)也可以體現(xiàn)在視圖上；
生命周期（開發(fā)時(shí)必了解）
每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個(gè)過程就Vue的生命周期晨逝。下面是Vue的幾個(gè)鉤子函數(shù)：
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
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 創(chuàng)建完畢狀態(tài)===============》');
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 掛載前狀態(tài)===============》');
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 () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
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 更新前狀態(tài)===============》');
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 更新完成狀態(tài)===============》');
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 銷毀前狀態(tài)===============》');
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 銷毀完成狀態(tài)===============》');
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字段的變化
1.png
2.png
以上是本期全部內(nèi)容懦铺，欲知后事如何捉貌，請聽下回分解<(￣︶￣)↗[GO!]
