本節(jié)將學(xué)習(xí)Vue的基礎(chǔ)語法，為了簡單，在html頁面中采用<script>標(biāo)簽的形式引入vue。

主要目錄：

（1）聲明書渲染

（2）條件渲染

（3）列表渲染

（4）屬性綁定

（5）雙向綁定

（6）事件處理

一善玫、聲明式渲染

聲明式渲染：采用簡潔的模板語法聲明式地將數(shù)據(jù)渲染進(jìn)DOM，包括{{Mustache}}和 v-bind密强、v-model茅郎。

如圖，通過{{}}雙大括號的形式展示data中的message或渤，當(dāng)message發(fā)生變化時(shí)系冗，渲染出的 dom 內(nèi)容也會同步發(fā)生改變。

聲明式渲染

但有個(gè)問題是劳坑，當(dāng)我們?nèi)ニ⑿马撁娴臅r(shí)候毕谴，聲明的 {{ message }}，會在 DOM 中一閃而過。這是因?yàn)樵?Vue 尚未編譯到關(guān)聯(lián)實(shí)例的時(shí)候涝开，我們的指令還無法被解析循帐。因此，最好采用v-cloak指令舀武，來解決{{}}閃爍的問題拄养。具體用法為：

v-cloak用法

二、條件渲染

v-if ：當(dāng)條件為true時(shí)银舱，DOM樹中才有該節(jié)點(diǎn)瘪匿，當(dāng)條件為false時(shí)，DOM樹將刪除該節(jié)點(diǎn)寻馏，因此是無法獲取到該元素信息的棋弥；

v-show：根據(jù)條件來控制元素的顯示或隱藏。當(dāng)條件為false時(shí)诚欠，display為none顽染，元素不顯示，但還存在在DOM中轰绵。

v-if/v-show

三粉寞、列表渲染

v-for：通過item in items方式指定列表渲染，其中 items 為數(shù)據(jù)源左腔，item 為每一條數(shù)據(jù)的別名唧垦。

如圖，其中index 為每一條數(shù)據(jù)的索引值液样，v-bind：key指令為每一條列表數(shù)據(jù)的唯一 id振亮。

v-for遍歷數(shù)組

v-for 指令不但可以遍歷數(shù)組，還可以遍歷 object 對象蓄愁。

v-for遍歷對象

當(dāng)以下場景時(shí)双炕，Vue 不能檢測到對象屬性的添加或刪除狞悲。

1. 利用索引去設(shè)置新的數(shù)據(jù)時(shí)：items[indexOfItem] = newItem;

2. 直接修改數(shù)組的長度時(shí)：items.length = newLength;

而是應(yīng)該通過下面的方法進(jìn)行數(shù)據(jù)修改：

1. 通過Vue.set(vm.items, indexOfItem, newValue);

2. push() 撮抓、pop()、shift()摇锋、unshift()丹拯、splice()等方法;

詳細(xì)信息參見https://cn.vuejs.org/v2/guide/list.html#數(shù)組更新檢測。

四荸恕、屬性綁定

Vue 中的屬性綁定一般會通過v-bind來執(zhí)行乖酬，因?yàn)閷τ趝{Mustache}}來說，它只能渲染?html 內(nèi)容模塊融求，而無法渲染到 html 屬性咬像。

如圖，通過v-bind 來綁定 span 中的 title 屬性、img 的 src 屬性和 alt 屬性县昂。v-bind:class="classProperty" 可縮寫為 :class="classProperty"

v-bind

v-bind的表達(dá)得到了增強(qiáng)肮柜，因此十分靈活。常見的有:class="{'red' : isActive, 'big-font': isBig}"倒彰、:style="isActive ? 'color: red' : 'color: blue'"等等审洞。

五、雙向綁定

v-model： 多用于<input >等表單標(biāo)簽中待讳，它會自動檢測用戶的變更事件芒澜，并且更新數(shù)據(jù)。

v-model

v-model.lazy?改變數(shù)據(jù)同步時(shí)機(jī)创淡。當(dāng)執(zhí)行 change 事件時(shí)進(jìn)行數(shù)據(jù)同步

v-model.number?同步數(shù)據(jù)將輸入的值改變?yōu)閚umber類型

v-model.trim??同步數(shù)據(jù)去掉輸入值前后的空格

六痴晦、事件處理

如點(diǎn)擊事件、鍵盤抬起事件琳彩。Vue 中定義的方法阅酪，需要定義到 methods 對象中。

事件處理

常用修飾符

常用修飾符