資訊專欄INFORMATION COLUMN
摘要：創(chuàng)建一個(gè)應(yīng)用話不多說(shuō)，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對(duì)象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡(jiǎn)單，還是能體會(huì)到雙向綁定的精髓。
我們學(xué)習(xí)一門新語(yǔ)言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。
創(chuàng)建一個(gè)Vue應(yīng)用話不多說(shuō)，先上代碼，讓我們感受一下Vue的核心功能
Document
{{message}}
// {{message}}模板的輸出方式
當(dāng)修改輸入框內(nèi)容時(shí)，h1標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡(jiǎn)單，還是能體會(huì)到雙向綁定的精髓。
雙向綁定（面試考點(diǎn)）通過(guò)構(gòu)造函數(shù)創(chuàng)建一個(gè)Vue實(shí)例 new Vue()，此時(shí)app就相當(dāng)于 new Vue；
傳入el，el是Vue對(duì)象中必不可少的，需要把el掛載到頁(yè)面已存在的DOM（可以是DOM元素，或者是CSS選擇器）上；
var app = new Vue({
el: "#app", // 或者document.getElementById("app")
})
在input標(biāo)簽上有一個(gè)v-model指令，它的值和Vue實(shí)例中data里的message對(duì)應(yīng)，input可以修改message的值，同時(shí)當(dāng)message改變時(shí)也可以體現(xiàn)在視圖上；
生命周期（開發(fā)時(shí)必了解）每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程,這個(gè)過(guò)程就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生命周期過(guò)程中el、data以及data里面的message字段的變化
以上是本期全部?jī)?nèi)容，欲知后事如何，請(qǐng)聽下回分解<(￣︶￣)↗[GO!]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53610.html
摘要：創(chuàng)建一個(gè)應(yīng)用話不多說(shuō)，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對(duì)象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡(jiǎn)單，還是能體會(huì)到雙向綁定的精髓。 我們學(xué)習(xí)一門新語(yǔ)言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。 創(chuàng)建一個(gè)Vue應(yīng)用 話不多說(shuō)，先上代碼，讓我們感受一下Vue的核心功能 Docu...
摘要：創(chuàng)建一個(gè)應(yīng)用話不多說(shuō)，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對(duì)象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡(jiǎn)單，還是能體會(huì)到雙向綁定的精髓。 我們學(xué)習(xí)一門新語(yǔ)言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。 創(chuàng)建一個(gè)Vue應(yīng)用 話不多說(shuō)，先上代碼，讓我們感受一下Vue的核心功能 Docu...
摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于，是的語(yǔ)法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來(lái)觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對(duì)象 data: { ...
摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于，是的語(yǔ)法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來(lái)觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對(duì)象 data: { ...
閱讀 705·2023-04-25 22:50
閱讀 1536·2021-10-08 10:05
閱讀 988·2021-09-30 09:47
閱讀 1925·2021-09-28 09:35
閱讀 827·2021-09-26 09:55
閱讀 3420·2021-09-10 10:51
閱讀 3433·2021-09-02 15:15
閱讀 3300·2021-08-05 09:57
