Vue學(xué)習(xí)總結(jié)
模板語(yǔ)法
- Mustache語(yǔ)法: {{msg}}
- Html賦值: v-html=""
- 綁定屬性:v-bind:id=""
- 使用表達(dá)式: {{ok? 'YES':'NO'}}
- 文本賦值:v-text=""
- 指令:v-if=""
- 過(guò)濾器: {{message|capitalize}} & v-bind.id="rowId | formatId"
Class和Style綁定
- 對(duì)象語(yǔ)法: v-bind:class="{active:isActive,'text-danger':hasError}"
- 數(shù)組語(yǔ)法:
<div v-bind:class="[a,b]"></div>
data:{
a:'aClass',
b:'bClass'
}
- style綁定－對(duì)象語(yǔ)法: v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"
條件渲染
- v-if
- v-else
- v-else-if
- v-show
- v-cloak
vue 事件處理事件
Vue組件
全局組件和局部組件
父子組件通訊－數(shù)據(jù)傳遞
-
Slot
子組件操作父組件數(shù)據(jù)趟畏。通過(guò)給父組件綁定自定義事件贡歧，子組件方法中使用this.$emit('自定義事件名')（此方法相當(dāng)于jquery里面的trigger）來(lái)執(zhí)行父組件的函數(shù)，從而改變父組件數(shù)據(jù)赋秀。
如果想要子組件傳值給父組件利朵，通過(guò)this.$emit('自定義事件名','想傳的值'）傳遞給父組件，父組件的該自定義事件回調(diào)方法的入?yún)⒘粤礊槟阆雮鬟f的值绍弟。
路由基礎(chǔ)介紹
什么是前端路由？
路由是根據(jù)不同的url地址展示不同的內(nèi)容和頁(yè)面
前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁(yè)面的任務(wù)交給前端來(lái)做益眉，之前是通過(guò)服務(wù)端根據(jù)url的不同返回不同的頁(yè)面實(shí)現(xiàn)的
什么時(shí)候使用前端路由晌柬？
在單頁(yè)面應(yīng)用，大部分頁(yè)面結(jié)構(gòu)不變郭脂，只改變部分內(nèi)容的時(shí)候使用
前端路由有什么優(yōu)點(diǎn)和缺點(diǎn)年碘？
優(yōu)點(diǎn)：
用戶體驗(yàn)好，不需要每次從服務(wù)器全部獲取展鸡，快速展現(xiàn)給用戶
缺點(diǎn)：
不利于SEO
使用瀏覽器的前進(jìn)屿衅，后退的時(shí)候會(huì)重新發(fā)請(qǐng)求，沒(méi)有合理地利用緩存
單頁(yè)面無(wú)法記錄之前滾動(dòng)的位置莹弊，無(wú)法在前進(jìn)涤久，后退的時(shí)候紀(jì)錄滾動(dòng)條的位置
<router-link> this.$router.push({path:""}) 等于A標(biāo)簽做跳轉(zhuǎn)
<router-view> 跳轉(zhuǎn)之后渲染的位置
路由匹配
- 嵌套路由
- 編程式路由
- 命名路由和命名視圖
動(dòng)態(tài)路由匹配
