1.1. vue實(shí)例和數(shù)據(jù)綁定

1. 必不可少的一個(gè)選項(xiàng)就是el忱嘹。 el 用于指定一個(gè)頁面中己存在的 DOM 元素來掛載 Vue實(shí)例,可以是標(biāo)簽慢蜓。也可以是css語法毁嗦。

2. 通過Vue實(shí)例的 data 選項(xiàng)卵蛉，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)瓜挽。建議所有會(huì)用到的數(shù)據(jù)都預(yù)先在 data 內(nèi) 聲明盹廷，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護(hù)久橙。也可以指向一個(gè)已經(jīng)有的變量俄占。注意只有當(dāng)實(shí)例被創(chuàng)建時(shí)?data?中存在的屬性才是響應(yīng)式（當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”剥汤，即匹配更新為新的值）的。也就是說如果你在實(shí)例外新添加一個(gè)屬性排惨，那么這個(gè)屬性值一開始不會(huì)被渲染吭敢，并且它的值的改動(dòng)也不會(huì)觸發(fā)試圖的更新，除非你對(duì)data里已經(jīng)有的數(shù)據(jù)進(jìn)行改動(dòng)暮芭，那么這個(gè)新添加的屬性值才會(huì)顯示和渲染鹿驼。比如：

上面代碼中{{obj.b}}并不會(huì)顯示在頁面中，除非當(dāng)你原來data里的a發(fā)生改變的時(shí)候它才會(huì)去渲染辕宏，

上面的情況在實(shí)例創(chuàng)建完成后畜晰，直接更改了a的值，所以頁面進(jìn)行了一次渲染瑞筐，所以頁面中也會(huì)顯示b的值

要理解為什么 span-b 會(huì)更新凄鼻，要點(diǎn)是理解視圖更新其實(shí)是異步的。

當(dāng)我們讓 a 從 'a1' 變成 'a2' 時(shí)聚假，Vue 會(huì)監(jiān)聽到這個(gè)變化块蚌，但是 Vue 并不能馬上更新視圖，因?yàn)?Vue 是使用 Object.defineProperty 這樣的方式來監(jiān)聽變化的膘格，監(jiān)聽到變化后會(huì)創(chuàng)建一個(gè)視圖更新任務(wù)到任務(wù)隊(duì)列里峭范。（文檔有寫）

所以在視圖更新之前，要先把余下的代碼運(yùn)行完才行瘪贱，也就是會(huì)運(yùn)行 b = 'b'纱控。

等到視圖更新的時(shí)候辆毡，由于 Vue 會(huì)去做 diff（文檔有寫），于是 Vue 就會(huì)發(fā)現(xiàn) a 和 b 都變了甜害，自然會(huì)去更新 span-a 和 span-b舶掖。

3. 掛載成功后，我們可以通過

app.$el來訪問該元素唾那。

訪問vue實(shí)例的屬性：都是以$開頭访锻，如app.$el

訪問data元素的屬性-- 直接app.屬性名，app.msg

1.2. 生命周期鉤子

jquery---$(document).ready()

*?beforeCreate:在實(shí)例初始化之后闹获，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用期犬，也就是說這時(shí)候拿不到data里的數(shù)據(jù)和不能監(jiān)聽事件。

* created實(shí)例創(chuàng)建完成后調(diào)用避诽，此階段完成了數(shù)據(jù)的觀測(cè)（可以拿到data里的數(shù)據(jù)）等龟虎，但尚未掛載， $el 還不可用沙庐。需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用----還未掛載

* mounted el掛載到實(shí)例上后調(diào)用鲤妥，一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開始 。相當(dāng)于 $(document).ready()---剛剛掛載

*beforeDestroy實(shí)例銷毀之前調(diào)用拱雏。主要解綁一些使用 addEventListener 監(jiān)聽的事件等

當(dāng)運(yùn)行上面代碼

一開始先彈出created里的內(nèi)容棉安，這時(shí)候頁面中沒有顯示msg里的內(nèi)容，因?yàn)檫€未掛載到頁面中铸抑，當(dāng)點(diǎn)擊確定贡耽，再次彈出mounted里的內(nèi)容，再次確定就渲染到了頁面中

1.3.文本插值和表達(dá)式

語法：使用雙大括號(hào)（Mustache語法）“｛｛｝｝”是最基本的文本插值方法鹊汛，它會(huì)自動(dòng)將我們雙向綁定的數(shù)據(jù)實(shí)時(shí)顯示出來

比如：你在控制臺(tái)對(duì)它的數(shù)據(jù)進(jìn)行更新蒲赂，它的視圖層也會(huì)同步的更新

在｛｛｝｝中，除了簡(jiǎn)單的綁定屬性值外刁憋，還可以使用JavaScript表達(dá)式進(jìn)行簡(jiǎn)單的運(yùn)算 滥嘴、 三元運(yùn)算等

---實(shí)例

Vue .js只支持單個(gè)表達(dá)式，不支持語句和流控制至耻。

{{ 6+6 *3}}---可以進(jìn)行簡(jiǎn)單的運(yùn)算

{{ 6<3 ? msg :a}}---可以用三元運(yùn)算符

{{if(6>3){}}-----注意：文本插值的形式若皱，其中不能書寫表達(dá)式,支持單個(gè)表達(dá)式