Vue基礎之數據綁定

pingan8787 發布于2019-08-02 14:09 / 3119人閱讀

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

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

創建一個Vue應用

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




    
    
    
    Document


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

當修改輸入框內容時，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 () {
    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!]

GPU云服務器云服務器 django vue 數據綁定 vue綁定之基礎篇 vue基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53610.html

Vue基礎之數據綁定

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

Rindia 2019-08-30 15:55 評論0 收藏0
Vue基礎之數據綁定

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

Fourierr 2019-08-23 14:51 評論0 收藏0
Vue基礎之內部指令（下）

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

maybe_009 2019-08-30 15:55 評論0 收藏0
Vue基礎之內部指令（下）

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

2bdenny 2019-08-02 14:11 評論0 收藏0