文章目录
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
如何使用:见下图