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

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

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

vue指令-v-model修飾符

語法:

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

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

計算屬性

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

普通寫法

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

完整寫法

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

vue監(jiān)聽器

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

深度監(jiān)聽

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

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

<stype scoped>
  h2 {} // 樣式只會在當(dāng)前組件內(nèi)生效
</style>
復(fù)制代碼

父傳子

子傳父

vue組件生命周期

四個階段:

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

組件進階-props校驗

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

組件進階 - 動態(tài)組件

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

組件進階-keep-alive組件

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

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

組件進階-keep-alive組件-指定緩存

語法

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

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

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

組件進階-具名插槽

格式

定義：<slot name="xxx">

使用：

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

自定義指令-基本使用

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

自定義指令-傳值和更新

目標: 使用自定義指令, 傳入一個值

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

main.js定義處修改一下

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

Direct.vue處更改一下

<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點擊變藍</p>

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

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

axios請求

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