- 博客(49)
- 收藏
- 关注
RSS订阅原创 axios 请求数据，以及和ajax的区别
相同点：axios 和 ajax 都是用于请求数据渲染页面不同点：（1）ajax 实现了网页的局部数据刷新；axios实现了对ajax的封装，使用了promise模式，使用then链，来处理JS异步编程在vue项目中，使用axios来获取本地数据：上面8个图标文字，存储在本地数据中，用axios来获取（1）打开项目终端，下载axiosnpm install axios --save（2）在vue项目入口文件main.js中，引入axios//引入axiosimport axios fr
2020-06-17 02:12:23
1526
原创 Vuex 实现组件传值
Vuex 是什么？Vuex 类似于一个“前端数据库”，让各个页面的数据实现共享。简单来说Vuex就像一个商店，各个页面需要什么数据就去商店找如下：要实现两个页面的数据传值。首页和城市列表页，当点击列表的某个城市，比如武汉，会跳转到首页，首页城市由上海更改为武汉。具体实现：（1）在src目录，新建一个store目录，store里再新建一个index.js文件（2）在入口文件main.js中挂载 store，使store可以被全局访问（3）终端下载vuex，并在store目录下的index.
2020-06-17 01:41:10
1008
原创 Vue使用keep-alive包裹组件，保存组件状态
keep-alive是什么？keep-alive是Vue的内置组件，包裹动态组件时，会将不活动的组件实例留在内存中，优化请求，防止DOM重新渲染比如：在APP.vue中单纯使用keep-alive组件包裹，会直接缓存所有页面...
2020-06-17 00:37:59
870
原创 CSS中link和@import的区别
区别：（1）link属于HTML标签，而@import是CSS提供的语法规则（2）@import存在兼容性问题，IE5以上才能识别；link是HTML标签，没有兼容性问题（3）link引入样式的权重要高于@import引入样式的权重
2020-06-12 00:15:35
78
原创 常见的设计模式有哪些
1、JS工厂模式2、JS构造函数模式3、JS原型模式4、构造函数+原型的JS混合模式5、构造函数+原型的动态原型模式6、观察者模式7、发布订阅模式
2020-06-11 18:58:54
187
原创 = == 和 === 的区别
= 代表赋值== 用于判断是否相等，返回一个布尔值，相等返回true，不相等返回false== 允许不同数据类型之间的比较=== 用于判断是否绝对相等，只要数据类型不一样，就返回false
2020-06-11 18:56:50
280
原创 使元素隐藏消失的方法
visibility：hidden；元素隐藏，但保留位置，不改变页面布局display：none；元素隐藏后不保留位置，会改变页面布局，相当于元素被删掉z-index：-1；opacity：0；元素隐藏，但不会改变页面布局
2020-06-11 18:52:30
169
原创 typeof 和 instance of 检测数据类型
相同点：都常用来判断一个变量是否为空，或者是什么类型的不同点：typeof 返回值是一个字符串，用来说明变量的数据类型instanceof 用于判断一个变量是否属于某个对象的实例
2020-06-11 18:48:25
234
原创 CSS优先级、权重
排序：！important > 作为style属性写在元素内的样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承样式 > 浏览器默认属性注意：属性后面加 !important 会覆盖页面内任何位置定义的元素样式同一级别的样式，后写的会覆盖先写的...
2020-06-11 18:45:29
125
原创 transition和animation的区别
animation和transition大部分属性是相同的，，都是随时间改变元素的属性值主要的区别是 transition需要触发一个事件才能改变属性，而animation不需要触发任何事件，就可以随时间改变属性值transition规定动画的名字，规定完成过渡效果需要多少秒或毫秒，规定速度效果，定义过渡效果何时开始animation指定要绑定到选择器的关键帧的名称...
2020-06-11 18:41:17
446
原创 img中 alt 和 title的区别
图片中的alt属性是在图片不能正常显示时出现的文本提示，alt有利于SEO优化图片中的title属性，是在鼠标移动到元素上的文本提示
2020-06-11 18:31:27
172
原创 display：none 和 visibility:hidden的区别
display：none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在visibility：hidden;隐藏对应的元素，但是在文档布局中仍保留原来的空间
2020-06-11 18:27:40
183
原创 BFC规则以及如何触发
BFC是什么？块级格式上下文，一个独立的渲染区域，BFC也可以看作是一种规则，触发了BFC规则的元素，就像是一个独立的容器，容器里面的元素不会在布局上影响外面的元素，就像被隔离了一样BFC规则：1、...
2020-06-10 19:17:34
1020
原创 请添加CSS代码，绘制出一个600像素宽，400像素高，水平垂直居中的模态框
请添加CSS代码，绘制出一个600像素宽，400像素高，水平垂直居中的模态框？<body> <div class="modal-wrapper"> <div class="modal"></div> </div></body>body { margin: 0; padding: 0;}.modal-wrapper { position: fixed; top:
2020-06-08 15:43:13
630
原创 渐进增强与优雅降级
渐进增强：渐进增强一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器追加各种功能达到更好的用户体验，以实现最基础功能为基本，向上兼容。优雅降级：优雅降级一开始针对一个高版本的浏览器构建页面，先完善所有的功能，然后针对各个不同的浏览器进行测试、修复，保证低级浏览器也有基本功能，以高要求，高版本为基准，向下兼容。...
2020-06-07 20:48:07
109
原创 CSS 清除浮动
当父元素不给高度的时候，且内部元素不浮动，父元素的高度由子元素的高度撑开；内部元素浮动的时候，父元素会变成一条线。为什么要清除浮动？为了解决父元素因为子元素浮动引起的高度塌陷为0的问题清除浮动的方法：（1）额外标签法（添加无意义标签，语义化差）在最后一个浮动标签后面，新加一个标签，并设置clear：both；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-06-06 22:03:37
65
原创 如何实现左右两栏一定比例，左栏高度随右栏高度自适应？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现左
2020-06-06 21:29:46
688
原创 CSS实现宽度自适应100%，宽高比例为16: 9的矩形？
宽度自适应100%，宽高比为16：9，即100%：h = 16：9，计算出来矩形高度 h = 56.25%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
2020-06-06 17:15:44
1573
原创 CSS 垂直、水平居中
一、垂直居中1、line-height适用：单行文字，下拉框，按钮等办法：设置单行行内元素的 行高 = 盒子的高度2、absolute + margin 负值要求：已知该元素高度办法：父元素设置position：relative；子元素设置position：absolute；top：50%；margin-top：负的子元素自身高度的一半；3、absolute + margin：auto要求：已知该元素高度办法：父元素添加 position：relative；子元素设置pos
2020-06-06 15:37:06
66
原创 flex布局
概念：flex布局表示弹性布局，即弹性盒模型，任何一种元素都可以指定为flex布局。flex布局的核心概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。容器：父容器可以统一设置子容器的排列方式；子元素也可以单独设置自身的排列方式；如果两者同时设置，以子容器的设置为准。使用flex布局要注意：如果是webkit内核的浏览器，需要加上-webkit前缀；在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用fl
2020-06-06 11:37:48
101
原创 小程序本地缓存以及获取缓存的数据
最近在做一个搜索页面，想要利用小程序本地缓存减少数据库请求次数.当用户进入页面，页面会自动从数据库加载数据，并缓存到本地，页面提供了搜索功能，当用户取消搜索时，页面会调取本地缓存的数据，而不是再次从数据库获取数据，小程序采用的是云开发...
2020-05-22 11:23:51
2305
1
原创 小程序使用swiper做选项卡切换 并且高度自适应
点击/滑动的页面切换效果，可以使用swiper来实现，但是swiper默认高度为150，所以会出现页面数据过多，超过了页面可视区域，会出现无法上下滑动的情况，swiper不会自适应高度解决办法：使用scroll-view包裹页面元素，并且动态设置swiper的高度，让其根据内容的高度自适应js部分：// 获取应用实例var app = getApp()Page({ data: { currentTab: 0, loveList: [], // 定义一个空数组,用来.
2020-05-21 11:54:02
1124
原创 小程序页面如何直接调用云存储中的图片
如上，小程序页面有swiper轮播图展示，由于图片直接放在本地，内存过大，所以使用小程序云开发的云存储存放图片，让小程序轮播图图片直接从云存储中进行获取（1）在小程序云开发控制台，点击存储，新建一个swiper文件夹，点击swiper文件夹，点击上传文件，swiper里存放页面轮播图所需的图片（2）复制每一张图片的File ID，粘贴到wxml页面的src中这样页面就可以直接获取到云存储中的图片了。试过把云存储图片地址不写在src里，放在JS中，再让页面循环JS里数组获取，但是运行的时候出.
2020-05-21 09:47:10
15132
6
原创 Vue中使用 better-scroll 插件
（1）终端下载 better-scroll 插件：npm install better-scroll --save 如下：（2）引入并使用 better-scroll 插件：增加style样式：（3）最终效果：
2019-10-08 13:58:29
113
原创 Vue 项目中 Swiper 轮播图无法显示 swiper-pagination 分页小圆点
在 Vue 项目中使用Swiper组件，虽然添加了分页器，如下：但是最后只有轮播图片显示，上面没有自动切换的小圆点解决：把 pagination: “.swiper-pagination” 换成如下写法此时有小圆点分页器：...
2019-10-06 20:49:48
8188
11
原创 在 Vue 中使用Swiper组件
第一步：在终端执行命令：npm install vue-awesome-swiper --savenpm run dev如下：第二步：进入 main.js 文件，三行代码引入Swiper组件第三步：在需要轮播图的文件中使用Swiper组件，Swiper.vue 文件内容如下：<template> <!-- 轮播图开始 --> <div...
2019-10-06 17:14:31
3936
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人