vue基礎(chǔ)難點(diǎn)總結(jié)

vue各種各樣的命令和語(yǔ)法的格式容易記混

vue指令-v-model修飾符

語(yǔ)法:

v-model.修飾符="vue數(shù)據(jù)變量"

• .number ? 以parseFloat轉(zhuǎn)成數(shù)字類型
• .trim ? ? ? ? ?去除首尾空白字符
• .lazy ? ? ? ? ? 在失去焦點(diǎn)時(shí)觸發(fā)更改而非inupt時(shí)

計(jì)算屬性

• 計(jì)算屬性有緩存，提高渲染性能。
• 如果在頁(yè)面上需要用到 對(duì)現(xiàn)有的數(shù)據(jù)進(jìn)行加工得到新數(shù)據(jù)，則時(shí)要使用計(jì)算屬性

普通寫(xiě)法

computed:?{
????????//屬性名字（計(jì)算屬性名稱）
????????//屬性的值（計(jì)算屬性處理函數(shù)）
????????計(jì)算屬性名1?()?{
????????????//?對(duì)依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行return
????????????return?
????????}，
復(fù)制代碼

完整寫(xiě)法

computed:?{
????"屬性名":?{
????????set(值){
????????????
????????},
????????get()?{
????????????return?"值"
????????}
????}
}
復(fù)制代碼

vue監(jiān)聽(tīng)器

可以監(jiān)聽(tīng)數(shù)據(jù)（data/computed等）的值的改變。數(shù)據(jù)的值有類型：基本數(shù)據(jù)類型，引用數(shù)據(jù)類型

深度監(jiān)聽(tīng)

watch:?{
????"要監(jiān)聽(tīng)的屬性名":?{
????????immediate:?true,?//?立即執(zhí)行
????????deep:?true,?//?深度監(jiān)聽(tīng)復(fù)雜類型內(nèi)變化
????????handler?(newVal,?oldVal)?{
????????????
????????}
????}
}
復(fù)制代碼

scoped實(shí)現(xiàn)組件的私有樣式

??h2?{}?//?樣式只會(huì)在當(dāng)前組件內(nèi)生效

復(fù)制代碼

父?jìng)髯?/span>

子傳父

vue組件生命周期

四個(gè)階段:

• 初始化 => 創(chuàng)建組件 ? => beforeCreate created
• 掛載 => 渲染顯示組件 => ?beforeMount mouted
• 更新 => 修改了變量 => 觸發(fā)視圖刷新 => beforeUpdate updated
• 銷毀 => 切換頁(yè)面 => 會(huì)把組件對(duì)象從內(nèi)存刪除 => beforeDestory destoryed

組件進(jìn)階-props校驗(yàn)

props:?{
????//?基礎(chǔ)的類型檢查?(`null`?和?`undefined`?會(huì)通過(guò)任何類型驗(yàn)證)
????propA:?Number,
????//?多個(gè)可能的類型
????propB:?[String,?Number],
????//?必填的字符串
????propC:?{
??????type:?String,
??????required:?true
????},
????//?帶有默認(rèn)值的數(shù)字
????propD:?{
??????type:?Number,
??????default:?100
????},
????//?帶有默認(rèn)值的對(duì)象
????propE:?{
??????type:?Object,
??????//?對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
??????default:?function?()?{
????????return?{?message:?'hello'?}
??????}
????},
????//?自定義驗(yàn)證函數(shù)
????propF:?{
??????validator:?function?(value)?{
????????//?這個(gè)值必須匹配下列字符串中的一個(gè)
????????return?['success',?'warning',?'danger'].indexOf(value)?!==?-1
??????}
????}
??}
復(fù)制代碼

組件進(jìn)階 - 動(dòng)態(tài)組件

"comName">?//comName是變量,值為需要切換的幾個(gè)組件名
復(fù)制代碼

組件進(jìn)階-keep-alive組件

用keep-alive內(nèi)置的vue組件, 讓動(dòng)態(tài)組件緩存而不是銷毀

????
????"comName">

復(fù)制代碼

組件進(jìn)階-keep-alive組件-指定緩存

語(yǔ)法

1. `include="組件名1,組件名2..."`

2. `:include="['組件名1'， '組件名2']"`

"name1,name2">
????
????"comName">

復(fù)制代碼

組件進(jìn)階-具名插槽

格式

定義：

使用：

• ;

自定義指令-基本使用

{
??data(){},
??methods:?{},
??directives:?{
????focus:?{?//?自定義指令名
????????inserted(el){?//?固定配置項(xiàng)?-?當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù)
????????????el.focus()
????????}
????},
??},
}
復(fù)制代碼

自定義指令-傳值和更新

目標(biāo): 使用自定義指令, 傳入一個(gè)值

需求: 定義color指令-傳入一個(gè)顏色, 給標(biāo)簽設(shè)置文字顏色

main.js定義處修改一下

directives:?{
??"color":{
????inserted(el,?binding){?//?插入時(shí)觸發(fā)此函數(shù)
??????el.style.color?=?binding.value;
????},
????update(el,?binding){?//?更新綁定的變量時(shí)觸發(fā)此函數(shù)=》手動(dòng)更新
??????el.style.color?=?binding.value;
????}
??}
}
復(fù)制代碼

Direct.vue處更改一下

"theColor"?@click="changeColor">使用v-color指令控制顏色,?點(diǎn)擊變藍(lán)



復(fù)制代碼

總結(jié): v-xxx, 自定義指令, 獲取原生DOM, 自定義操作

axios請(qǐng)求

?async?loadData(){
???????const?res=?await?axios.get("http://.......")
??????//??console.log(data);
????}
??},
?created(){
????this.loadData()
??}
復(fù)制代碼