小提示
- 文檔三遍及以上閱讀
- 難以理解的概念需要借助案例
- 手動(dòng)敲 Demo 必不可少
難點(diǎn)解惑
- 概念解惑
-
語(yǔ)法糖: 簡(jiǎn)化復(fù)雜的使用方式缴饭，提取出來(lái)較為簡(jiǎn)單的使用方式。總之竭贩，提供一種使用的捷徑。 -
特性attr和屬性prop: 文檔中莺禁，特性不僅指 HTML 元素上的特性留量，也兼指自定義組件上沒有被props聲明的。
<!-- todo 沒有被聲明為屬性，視為特性楼熄，在 this.$attrs 中 -->
<my-comp :id="id" todo="hi"></my-comp>
export default {
props: ['id']
}
- 文檔解惑
基礎(chǔ)
-
class和style使用方式靈活忆绰，并且組件上這兩個(gè)特性會(huì)合并根元素的特性而不是替換 -
v-for優(yōu)先級(jí)高于v-if，不僅可以綁定數(shù)組可岂，也可以綁定對(duì)象 - 數(shù)組或?qū)ο蟮母淖?
- 改變數(shù)組错敢，
$set和“數(shù)組七子” - 改變對(duì)象，
$set和Object.assign
- 改變數(shù)組错敢，
-
v-model與表單元素的使用
深入組件
- 組件名命分為局部注冊(cè)和全局注冊(cè)缕粹，屬性名命稚茅，事件名命
-
$event在原生事件中和自定義事件中- 原生事件中峰锁，
@click=handler，該形式默認(rèn)傳參event双戳。@click=handler('hi', $event)有附加參數(shù)虹蒋，需要顯示傳遞事件對(duì)象 - 自定義事件中
$event是第一個(gè)參數(shù)
- 原生事件中峰锁，
- 異步組件，動(dòng)態(tài)組件
- 異步組件指飒货，異步加載組件
- 動(dòng)態(tài)組件指魄衅，使用
component內(nèi)置組件和is特性切換展示組件
- 插槽，slot元素塘辅，slot特性晃虫，slot作用域和
slot-scope="slotProps" - 訪問根實(shí)例
this.$root，訪問父級(jí)組件實(shí)例this.$parent扣墩，訪問子組件實(shí)例或子元素this.$refs
過(guò)渡和動(dòng)畫
- 動(dòng)畫出現(xiàn)的地方
- 條件渲染 (使用 v-if)
- 條件展示 (使用 v-show)
- 動(dòng)態(tài)組件
- 組件根節(jié)點(diǎn)
- 狀態(tài)過(guò)渡 --- 數(shù)字哲银，顏色，元素大小等其它屬性
可復(fù)用性和組合
-
extend和mixin的異同- 同: 參數(shù)均是一個(gè)包含組件選項(xiàng)的對(duì)象呻惕，使用相同的合并策略
- 異: 前者為擴(kuò)展荆责，產(chǎn)生新的組件類型；后者為混入亚脆，將某些選項(xiàng)注入到組件中
- 選項(xiàng)合并策略 --- 數(shù)據(jù)
data, directive, components, filters都以組件本身選項(xiàng)為重做院，但是生命周期混入選項(xiàng)在前，組件本身選項(xiàng)在后 -
template在內(nèi)部解析濒持，并調(diào)用render方法使用解析結(jié)果键耕。因此，可以直接用render方法替代template選項(xiàng)柑营。- 子vnode唯一性
- 沒有便捷的指令和按鍵修飾符等屈雄，都需要用
js實(shí)現(xiàn)
