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

我們學(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))

  1. 通過構(gòu)造函數(shù)創(chuàng)建一個(gè)Vue實(shí)例 new Vue(),此時(shí)app就相當(dāng)于 new Vue宠漩;
  2. 傳入el举反,el是Vue對象中必不可少的,需要把el掛載到頁面已存在的DOM(可以是DOM元素扒吁,或者是CSS選擇器)上火鼻;
     var app = new Vue({
         el: '#app', // 或者document.getElementById('app')
     })
    
  3. 在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!]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市冬念,隨后出現(xiàn)的幾起案子趁窃,更是在濱河造成了極大的恐慌,老刑警劉巖急前,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件醒陆,死亡現(xiàn)場離奇詭異,居然都是意外死亡裆针,警方通過查閱死者的電腦和手機(jī)刨摩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來世吨,“玉大人澡刹,你說我怎么就攤上這事≡呕椋” “怎么了罢浇?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長沐祷。 經(jīng)常有香客問我嚷闭,道長,這世上最難降的妖魔是什么赖临? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任胞锰,我火速辦了婚禮,結(jié)果婚禮上兢榨,老公的妹妹穿的比我還像新娘嗅榕。我一直安慰自己挠进,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布誊册。 她就那樣靜靜地躺著领突,像睡著了一般。 火紅的嫁衣襯著肌膚如雪案怯。 梳的紋絲不亂的頭發(fā)上君旦,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音嘲碱,去河邊找鬼金砍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛麦锯,可吹牛的內(nèi)容都是我干的恕稠。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼扶欣,長吁一口氣:“原來是場噩夢啊……” “哼鹅巍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起料祠,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤骆捧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后髓绽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體敛苇,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年顺呕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枫攀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡株茶,死狀恐怖来涨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情忌卤,我是刑警寧澤扫夜,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站驰徊,受9級特大地震影響笤闯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜棍厂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一颗味、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧牺弹,春花似錦浦马、人聲如沸时呀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谨娜。三九已至,卻和暖如春磺陡,著一層夾襖步出監(jiān)牢的瞬間趴梢,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工币他, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坞靶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓蝴悉,卻偏偏與公主長得像彰阴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子拍冠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容