Vue 擴(kuò)展插件、雙大括號(hào)表達(dá)式、強(qiáng)制數(shù)據(jù)綁定、綁定事件監(jiān)聽(tīng)、計(jì)算屬性、監(jiān)視屬性、計(jì)算屬性高級(jí)、class 與 style 綁定、條件渲染、列表渲染

1、Vue 擴(kuò)展插件:

*vue-cli: vue 腳手架

*vue-resource(axios): ajax 請(qǐng)求

*vue-router: 路由

*vuex: 狀態(tài)管理

*vue-lazyload: 圖片懶加載

*vue-scroller: 頁(yè)面滑動(dòng)相關(guān)

*mint-ui: 基于 vue 的 UI 組件庫(kù)(移動(dòng)端)

*element-ui: 基于 vue 的 UI 組件庫(kù)(PC 端)

*它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫(kù)開(kāi)發(fā)項(xiàng)目

2、雙大括號(hào)表達(dá)式

*語(yǔ)法:{{exp}}

*功能: 向頁(yè)面輸出數(shù)據(jù)

*可以調(diào)用對(duì)象的方法

3、強(qiáng)制數(shù)據(jù)綁定:

指定變化的屬性值

寫(xiě)法:v-bind:xxx='yyy'?? //yyy 會(huì)作為表達(dá)式解析執(zhí)行

簡(jiǎn)介寫(xiě)法::xxx='yyy'

4、綁定事件監(jiān)聽(tīng):

綁定指定之間名的回調(diào)函數(shù)

完整寫(xiě)法:v-on:keyup='xxx'

v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'

簡(jiǎn)潔寫(xiě)法:@keyup='xxx' @keyup.enter='xxx'

5、計(jì)算屬性:

*在 computed 屬性對(duì)象中定義計(jì)算屬性的方法

*在頁(yè)面中使用{{方法名}}來(lái)顯示計(jì)算的結(jié)果

6、監(jiān)視屬性:

*通過(guò)通過(guò) vm 對(duì)象的$watch()或 watch 配置來(lái)監(jiān)視指定的屬性

*當(dāng)屬性變化時(shí), 回調(diào)函數(shù)自動(dòng)調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計(jì)算

7、計(jì)算屬性高級(jí)

*通過(guò) getter/setter 實(shí)現(xiàn)對(duì)屬性數(shù)據(jù)的顯示和監(jiān)視

*計(jì)算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計(jì)算

8、class 與 style 綁定:

class/style 綁定是專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)

class綁定:*:class='xxx'

*表達(dá)式是字符串: 'classA'

*表達(dá)式是對(duì)象: {classA:isA, classB: isB}

*表達(dá)式是數(shù)組: ['classA', 'classB']

style綁定::style="{ color: activeColor, fontSize: fontSize + 'px' }"(其中 activeColor/fontSize 是 data 屬性)

9、條件渲染:

指令:v-if 與 v-else及v-show

注意點(diǎn):如果需要頻繁切換 v-show 較好

當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析

10、列表渲染:

指令:數(shù)組: v-for / index ; 對(duì)象: v-for / key

更新顯示:刪除 item ; 替換 item

高級(jí)處理:列表過(guò)濾 ; 列表排序

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容