目录
- 工作笔记-知识碎片-2020-3
-
- 1.子组件动态调用父组件方法(vue)
- 2.ajax\axios\fecth区别
- 3.同步异步区分
- 4.nuxt路由切换加载动画设置
- 5.循环遍历方法for...in\for...of\forEach
- 6.Web页面渲染历程
- 7.正则匹配替换所有空格
- 8.css3多列布局流式布局
- 9.vue组件常用通信方式
工作笔记-知识碎片-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页面渲染历程
- 构建DOM树
- 渲染CSS规则树
-
合成1、2构建渲染树
详细:浏览器渲染机制的原理和过程
7.正则匹配替换所有空格
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组件常用通信方式