vue基础总结
vue基礎(chǔ)知識總結(jié)
?指令
-?v-model??數(shù)據(jù)雙向綁定
-?v-for?????循環(huán)渲染
-?v-if??????渲染與銷毀
-?v-show????顯示與隱藏
-?v-bind????綁定屬性
-?v-on??????綁定事件
-?v-once?????讓渲染的值執(zhí)行一次
-?v-html??????渲染dom片段
-?v-text??????渲染文本
-?v-slot?????插槽
?屬性
-?props:原生的標(biāo)簽上分為自有屬性和自定義屬性。自定義組件上的屬性使用props接收，屬于父傳子的數(shù)據(jù)傳遞方式。
v-bind綁定，props接收
?事件
概念：?用戶操作程序交互頁面等一系列行為叫事件
?鼠標(biāo)事件
click，dbclick，
?鍵盤事件
keyDown?，keyUp
?事件綁定
v-on綁定事件類型，給一個執(zhí)行函數(shù)。
?自定義事件綁定
v-on：focus='focus'
讓程序控制自己的函數(shù)在特定情況下被使用
?修飾符
?指令修飾符
-?trim????去掉內(nèi)容兩端的空格
-?number??嘗試轉(zhuǎn)換輸入內(nèi)容為數(shù)字
-?lazy?讓元素失去焦點后更新數(shù)據(jù)
?屬性修飾符
-?sync?讓自定義屬性值可以被子組件直接修改
?事件修飾符
-?stop?禁止事件冒泡
-?prevent?禁止默認(rèn)事件
-?native?綁定原生事件
?組件通信???`*`
?父傳子
-?父組件用v-bind傳遞數(shù)據(jù)?子組件用props接受
-?$children獲取頁面上所有子組件
-?$root?獲取根組件
-?父組件使用sync修飾符綁定的屬性，子組件用特定語法`$emit('update:prop')`
?子傳父
-?父組件用v-on傳遞函數(shù)，子組件用$emit調(diào)用函數(shù)進(jìn)行通信
-?$parent獲取最近的父組件
?父子互相通信
-?sync?偽雙向綁定
-?v-model?父組件向子組件注入一個value數(shù)據(jù)和一個input方法
?內(nèi)置組件?
-?component??動態(tài)加載組件
-?keep-alive????緩存組件狀態(tài)
-?slot????????插槽
-?template????模板
?插槽
-?匿名插槽
??使用slot?標(biāo)簽接受即可
- 具名插槽
使用template包裹內(nèi)容，使用v-slot屬性設(shè)置名稱
在slot組件上使用name屬性匹配名稱
-?插槽傳參
```js
//?插槽傳參
<slot?name='header'?:data="data"></slot>
子組件
<template?v-slot:header="data"></template>
```
?生命周期
?組件的生命周期
-?beforeCreate???創(chuàng)建前
-?created????????創(chuàng)建成功
-?beforeMount?????掛載前
-?mounted????????掛載成功（自動發(fā)起ajax）?
-?beforeUpdate??????更新前
-?updated????????????更新完成
-?beforeDestroy?????銷毀前?（銷毀常駐值）
-?destroyed?????????銷毀成功
?緩存組件狀態(tài)的生命周期
keep-alive?的生命周期
-?activated??激活
-?deactivated??停用緩存
?計算屬性和監(jiān)聽
?compute
-?對一個值進(jìn)行監(jiān)聽并返回一個新值。有緩存回對比新舊值，如果一致則不會執(zhí)行
?watch
只對值進(jìn)行監(jiān)聽，默認(rèn)只在數(shù)據(jù)發(fā)生變化時執(zhí)行
如果監(jiān)聽的是對象或數(shù)組需要開啟深度監(jiān)聽
deep:true?????深度監(jiān)聽
immediate:true??自動執(zhí)行一次
?
?自定義-過濾器-指令
?filter過濾器
分為全局組件過濾器和局部組件過濾器
對一個數(shù)據(jù)進(jìn)行處理返會新數(shù)據(jù)。
語法：?值?管道符?過濾器
多個過濾器用管道符隔開
`vlaue?|?filter`
?directive指令
在某些情況下需要獲取dom元素比如在元素渲染到頁面上后獲取元素
例如??頁面打開后input自動獲取焦點
核心api：?inserted函數(shù)表示元素渲染完成后的生命周期，使用被注入的el對象進(jìn)行操作。
?插件
用于更大化的重復(fù)使用代碼，將功能性的代碼封裝成插件
vue的插件核心是一個對象使用install方法，該方法被注入一個全局Vue，使用它去掛在添加公共的方法或組件
?
?
?
總結(jié)
- 上一篇： 如何制作简单的DIY家居墙面装饰？
- 下一篇： vue知识总结