工作筆記-知識碎片-20120-3

工作筆記-知識碎片-2020-3

1.子組件動態調用父組件方法（vue）

• 問題：子組件動態調用父組件方法，也就是子組件調用父組件的方法是可配置的，實現可複用面板佈局時按鈕方法實現可配置。
• 解決：props可直接傳方法，字組件直接調用就行

props:{
	methods:{
		type:Function,
		default:null
	}
}
//調用
this.methods

2.ajax\axios\fecth區別

ajax、axios、fetch之間的詳細區別以及優缺點-WebCandy

3.同步異步區分

同步：再同一時間，只能做一件事情
異步：在做一件事情時，等待完成的過程中可以先處理其他事情

4.nuxt路由切換加載動畫設置

在nuxt.config.js中配置
自定義加載組件=>直接配置引用路徑
自定義組件需要實現以下接口方法：

• start() 路由更新（即瀏覽器地址變化）時調用, 請在該方法內顯示組件。
• finish() 路由更新完畢（即asyncData方法調用完成且頁面加載完）時調用，請在該方法內隱藏組件。

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

5.循環遍歷方法for…in\for…of\forEach

• for…in ：可用break中斷
• for…of ：可用rerurn\break中斷循環
• forEach ：不可用rerurn\break中斷循環

6.Web頁面渲染歷程

1. 構建DOM樹
2. 渲染CSS規則樹
3. 合成1、2構建渲染樹
   詳細：瀏覽器渲染機制的原理和過程

7.正則匹配替換所有空格

name.replace(/\s+/g,"");

8.css3多列布局流式佈局

• colum-count：屬性設置列的具體個數
• colum-width：屬性控制列的寬度
• column-gap：兩列之間的列間距
• column-rule：規定列之間的分割線的寬度、樣式和顏色
• column-span：規定元素應橫跨多少列（1：不跨列（默認）；all：跨所有列）
• break-inside: avoid：瀑布流；子元素屬性

9.vue組件常用通信方式

• 父子組件通信：props；$parent/$children；provide/inject；$ref；$attrs/$listeners
• 兄弟組件通信：EventBus；Vuex
• 跨級通信：EventBus；Vuex；provide/inject；$attrs/$listeners
  詳細：vue組件常用通信方式