vm是什么?

• 是一個(gè)調(diào)度者,監(jiān)聽(tīng)數(shù)據(jù),渲染頁(yè)面

插值表達(dá)式可用來(lái)干什么的?

• 渲染數(shù)據(jù)

v-text使用:

1. 更新元素的 textContent
2. 只能被使用在元素的屬性節(jié)點(diǎn)上,不能用在元素的內(nèi)容區(qū)域
3. 會(huì)覆蓋掉元素之前的內(nèi)容
4. 會(huì)把元素內(nèi)部的內(nèi)容都替換掉
5. 在網(wǎng)速慢的情況下,存在閃爍的問(wèn)題

v-html使用:

• 更新元素的 innerHTML, 渲染帶標(biāo)簽的文本

v-bind使用:

• 綁定屬性

v-for使用:

• 渲染數(shù)組

  1. v-for="item in arr", item是數(shù)組中的每一項(xiàng),arr是需要循環(huán)的數(shù)組
  2. v-for="(item, index) in arr", index是索引

• 渲染對(duì)象

  1. v-for="value in obj", value是對(duì)象鍵的值,obj表示需要遍歷的對(duì)象
  2. v-for="(value, key, index) in obj", index表示索引

• v-for能夠根據(jù)數(shù)據(jù)的變化自動(dòng)刷新視圖

• 注意,以下兩種情況不會(huì)觸發(fā)視圖更新

  1. 當(dāng)使用數(shù)組的length屬性去改變數(shù)組的時(shí)候，不會(huì)觸發(fā)視圖更新
  2. 使用數(shù)組下標(biāo)(索引)的方式去改變數(shù)組的時(shí)候，也不會(huì)觸發(fā)視圖更新

• 解決上述問(wèn)題

  1. 使用Vue.set(arr, index, newVal), arr是需要改變的數(shù)組，index是數(shù)組里面的項(xiàng)， newVal是改變后的值
  2. Array.prototype.splice()

• :key

  1. v-for必須結(jié)合key屬性來(lái)使用，它會(huì)唯一標(biāo)識(shí)數(shù)組中的每一項(xiàng)，未來(lái)當(dāng)數(shù)組中的那一項(xiàng)改變的時(shí)候，它會(huì)只更新那一項(xiàng)
  2. 好處就是提升性能
  3. 注意key的值唯一,不能重復(fù)

v-model使用:

• 雙向數(shù)據(jù)綁定
• v-model只能在input/textarea/selet使用

v-on使用: (監(jiān)聽(tīng)DOM事件)

• 使用方法：

  1. 在標(biāo)簽的屬性位置寫上v-on:任意的事件類型="執(zhí)行的函數(shù)"
  2. 簡(jiǎn)寫：@任意的事件類型="執(zhí)行的函數(shù)" （推薦）
  3. 通過(guò)執(zhí)行函數(shù)添加參數(shù)
  4. 通過(guò)執(zhí)行函數(shù)中添加$event參數(shù)傳遞事件對(duì)象，注意只能是$event,并且不能加引號(hào)
  5. 事件修飾符可以給事件添加特殊功能 .stop, .prevent
  6. 可以給和按鍵相關(guān)的事件添加按鍵修飾符 常用的有 .enter

v-if和v-show使用:

• v-if和v-show指令可以用來(lái)控制元素的顯示和隱藏 v-if="布爾值", v-show="布爾值", 布爾值為true元素顯示，false隱藏

• 區(qū)別：

  1. v-if通過(guò)控制dom來(lái)控制元素的顯示和隱藏
  2. v-show通過(guò)控制樣式display:none來(lái)控制元素的顯示與隱藏

• 使用場(chǎng)景區(qū)別

  1. 涉及到大量dom操作的時(shí)候，我們需要使用v-show
  2. 涉及到異步數(shù)據(jù)渲染的時(shí)候就要使用v-if