插值表達(dá)式{{}}
vue指令:
v-cloak:解決頁面閃動(dòng)問題 【v-cloak】{display :none}
v-text:填充純文本 相比插值表達(dá)式更簡潔,不存在閃動(dòng)問題
v-html:填充HTML片段 存在安全隱患击费,本網(wǎng)站內(nèi)部數(shù)據(jù)可用酵幕,第三方數(shù)據(jù)不可用
v-pre:顯示原始信息皿哨,跳過編譯
數(shù)據(jù)響應(yīng)式 數(shù)據(jù)的變化導(dǎo)致頁面內(nèi)容變化
數(shù)據(jù)綁定:將數(shù)據(jù)填充到標(biāo)簽中
v-once:只編譯一次(顯示數(shù)據(jù)后不再具有響應(yīng)式) 應(yīng)用場景:如果顯示后的信息不需要再修改,可以提高性能
雙向數(shù)據(jù)綁定 v-model
底層實(shí)現(xiàn)原理:<input v-bind:value="msg" v-on:input="msg=$event.target.value">
用到了v-on 與v-bind
MVVM設(shè)計(jì)思想
M(model) V(view) VM(view-model)
事件綁定
v-on 簡寫@
事件修飾符 .stop 阻止冒泡 .prevent 阻止默認(rèn)行為
屬性綁定
v-bind 簡寫:
表單域修飾符
number 轉(zhuǎn)化為數(shù)值
trim 去掉開始和結(jié)尾的空格’
lazy 將input事件(只要內(nèi)容變化就觸發(fā))切換為change事件(失去焦點(diǎn)觸發(fā))
自定義指令 Vue.directive
計(jì)算屬性
表達(dá)式計(jì)算邏輯復(fù)雜,使用計(jì)算屬性使模板更加簡潔
computed:{ }
計(jì)算屬性與方法的區(qū)別 計(jì)算屬性基于依賴進(jìn)行緩存 方法不存在緩存
偵聽器(數(shù)據(jù)一旦發(fā)生變化通知偵聽器綁定的方法)
應(yīng)用場景:數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作
watch: { }
過濾器
格式化數(shù)據(jù)腌逢,如日期格式化等
filter