【索引/学习笔记】前端资源链接

VUE

1.父子组件通信

父子组件通信通过 props/$emit()
参考视频： 父子组件通信

---

uniapp

1.axios 网络请求（第三方包）

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API功能较为简单，不支持拦截器等全局定制的功能。建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求

官方文档： @escook/request-miniprogram

---

2.字符串分割 split（）

语法：str.split(x,y)
x:必需。从该参数指定的地方分割字符串 str 。
y:可选。该参数指定返回的数组的最大长度。

split（）的返回值是一个字符串数组。举例来说：

// 将 str 字符串以 ? 为界进行分割
var str = "/pages/goods_list?query=服饰"
str.split('?')[0] = "/pages/goods_list"
str.split('?')[1] = "query=服饰"

参考文章： JavaScript split()方法

---

JS

1.const 面试题

const 定义一个对象，可以修改对象里面属性的值（不支持直接修改，支持间接修改）
比如说：

// const 虽然是定义常量，但如果是对象，里面的属性值是可以修改的
const person = {
	name: 'zxz'
}
person.name = 'cz26'

参考视频： 4分钟全面掌握var\let\const区别

---

CSS

1.如何居中

要实现这样的块居中，直接父盒子---->

display:flex;

align-item:center;

justify-content:center;

参考文章： 详解transform:translate(-50%,-50%)

---

2.图片与文字一列

要实现这样的效果（图片与文字一列）

直接父盒子---->

// 这两项使图片与文字在一列
display: flex;
flex-direction: column;
// 这两项使整体居中
justify-content: center;
align-items: center;

纵向居中： align-items: center
横向居中： justify-content：center
参考链接： align-content、justify-content、align-items三个属性的作用和效果
参考链接： align-items容器属性

3.响应式布局

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

@media screen and (max-width: 300px) {
    body {
        background-color: red;
    }
}

参考文章： HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程

---

4.相对定位与绝对定位

relative：相对自身定位
absolute ：相对最近的一层父级元素定位

---

第三方库

1.在网页加载时加进度条

官方文档： Nprogress
介绍文章： Nprogress——页面加载的虚假进度条

如何使用：先安装包（依赖项），再引入Nprogress的JS和CSS文件即可

---

2.树形控件

官方文档： 树形控件TreeTable

如何使用：见下图