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

本文特別福利，贈(zèng)送JS新書，循序漸進(jìn)Vue.js 3前端開(kāi)發(fā)實(shí)戰(zhàn)，規(guī)則見(jiàn)文末～

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ì)算屬性

普通寫法

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

完整寫法

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)組件的私有樣式

<stype scoped>
  h2 {} // 樣式只會(huì)在當(dāng)前組件內(nèi)生效
</style>
復(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)組件

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

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

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

<keep-alive>
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>
復(fù)制代碼

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

語(yǔ)法

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

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

<keep-alive include="name1,name2">
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>
復(fù)制代碼

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

格式

定義：<slot name="xxx">

使用：

• <template #xxx></template>;
• <template v-slot:xxx></template>

自定義指令-基本使用

{
  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處更改一下

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

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>
復(fù)制代碼

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

axios請(qǐng)求

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