成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue基礎(chǔ)之?dāng)?shù)據(jù)綁定

Rindia / 2797人閱讀

摘要：創(chuàng)建一個(gè)應(yīng)用話不多說，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡單，還是能體會到雙向綁定的精髓。

我們學(xué)習(xí)一門新語言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。

創(chuàng)建一個(gè)Vue應(yīng)用

話不多說，先上代碼，讓我們感受一下Vue的核心功能




    
    
    
    Document


    

        
        
{{message}}
 // {{message}}模板的輸出方式

當(dāng)修改輸入框內(nèi)容時(shí)，h1標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡單，還是能體會到雙向綁定的精髓。

雙向綁定（面試考點(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字段的變化

以上是本期全部內(nèi)容，欲知后事如何，請聽下回分解<(￣︶￣)↗[GO!]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117278.html

相關(guān)文章

  • Vue基礎(chǔ)之數(shù)據(jù)綁定

    摘要：創(chuàng)建一個(gè)應(yīng)用話不多說，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡單，還是能體會到雙向綁定的精髓。 我們學(xué)習(xí)一門新語言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。 創(chuàng)建一個(gè)Vue應(yīng)用 話不多說，先上代碼，讓我們感受一下Vue的核心功能 Docu...

    Fourierr 評論0 收藏0

  • Vue基礎(chǔ)之數(shù)據(jù)綁定

    摘要：創(chuàng)建一個(gè)應(yīng)用話不多說，先上代碼，讓我們感受一下的核心功能模板的輸出方式是實(shí)例的掛在對象字面量當(dāng)修改輸入框內(nèi)容時(shí)，標(biāo)簽內(nèi)容也做相應(yīng)改變，雖然代碼很簡單，還是能體會到雙向綁定的精髓。 我們學(xué)習(xí)一門新語言或者框架時(shí)，第一件事是什么呢，那必然是向世界say Hello。 創(chuàng)建一個(gè)Vue應(yīng)用 話不多說，先上代碼，讓我們感受一下Vue的核心功能 Docu...

    pingan8787 評論0 收藏0

  • Vue基礎(chǔ)之內(nèi)部指令（下）

    摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對象等同于，是的語法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對象 data: { ...

    maybe_009 評論0 收藏0

  • Vue基礎(chǔ)之內(nèi)部指令（下）

    摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對象等同于，是的語法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對象 data: { ...

    2bdenny 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<