vm是什么?
- 是一個調度者,監(jiān)聽數(shù)據(jù),渲染頁面
插值表達式可用來干什么的?
- 渲染數(shù)據(jù)
v-text使用:
- 更新元素的
textContent - 只能被使用在元素的屬性節(jié)點上,不能用在元素的內容區(qū)域
- 會覆蓋掉元素之前的內容
- 會把元素內部的內容都替換掉
- 在網速慢的情況下,存在閃爍的問題
v-html使用:
- 更新元素的
innerHTML, 渲染帶標簽的文本
v-bind使用:
- 綁定屬性
v-for使用:
-
渲染數(shù)組
-
v-for="item in arr",item是數(shù)組中的每一項,arr是需要循環(huán)的數(shù)組 -
v-for="(item, index) in arr",index是索引
-
-
渲染對象
-
v-for="value in obj",value是對象鍵的值,obj表示需要遍歷的對象 -
v-for="(value, key, index) in obj",index表示索引
-
v-for能夠根據(jù)數(shù)據(jù)的變化自動刷新視圖-
注意,以下兩種情況不會觸發(fā)視圖更新
- 當使用數(shù)組的
length屬性去改變數(shù)組的時候巡扇，不會觸發(fā)視圖更新 - 使用數(shù)組下標(索引)的方式去改變數(shù)組的時候仑氛，也不會觸發(fā)視圖更新
- 當使用數(shù)組的
-
解決上述問題
- 使用
Vue.set(arr, index, newVal),arr是需要改變的數(shù)組蔽介，index是數(shù)組里面的項，newVal是改變后的值 Array.prototype.splice()
- 使用
-
:key-
v-for必須結合key屬性來使用凉袱，它會唯一標識數(shù)組中的每一項，未來當數(shù)組中的那一項改變的時候，它會只更新那一項 - 好處就是提升性能
- 注意
key的值唯一,不能重復
-
v-model使用:
- 雙向數(shù)據(jù)綁定
-
v-model只能在input/textarea/selet使用
v-on使用: (監(jiān)聽DOM事件)
-
使用方法：
- 在標簽的屬性位置寫上
v-on:任意的事件類型="執(zhí)行的函數(shù)" - 簡寫：
@任意的事件類型="執(zhí)行的函數(shù)"（推薦） - 通過執(zhí)行函數(shù)添加參數(shù)
- 通過執(zhí)行函數(shù)中添加
$event參數(shù)傳遞事件對象唾糯，注意只能是$event,并且不能加引號 - 事件修飾符可以給事件添加特殊功能
.stop,.prevent - 可以給和按鍵相關的事件添加按鍵修飾符 常用的有
.enter
- 在標簽的屬性位置寫上
v-if和v-show使用:
v-if和v-show指令可以用來控制元素的顯示和隱藏v-if="布爾值",v-show="布爾值", 布爾值為true元素顯示诚啃，false隱藏-
區(qū)別：
-
v-if通過控制dom來控制元素的顯示和隱藏 -
v-show通過控制樣式display:none來控制元素的顯示與隱藏
-
-
使用場景區(qū)別
- 涉及到大量
dom操作的時候淮摔，我們需要使用v-show - 涉及到異步數(shù)據(jù)渲染的時候就要使用
v-if
- 涉及到大量
