前端
cq-wangyong
记录所学;
不做框架的搬运工,学做框架的创造者
展开
-
typescript学习记录
变量类型:boolean,string,number数组 :number[] :Array<number>、元组:已知类型和数量的数组object,any,枚举 enum Color{red='red',blue='blue'}null,undefined,void,never类型断言(as语法,尖括号语法)变量声明:let const 解构 ...接口:可选属性只读属性(与const区别)额外的属性检查(接口定义参数时,用字符串索引签名或类型断言)原创 2021-01-18 08:34:19 · 121 阅读 · 0 评论 -
vue插槽
vue插槽内容简单总结原创 2020-11-17 00:15:20 · 208 阅读 · 0 评论 -
浏览器渲染过程及性能优化
渲染网页,浏览器需要处理一系列的中间过程,优化性能就是了解这个过程中发生了生什么-即CRP(critical rendering path,关键渲染路径)浏览器渲染流程: 先生成dom树 请求css,构建css对象模型,即cssOM dom树和cssOM树组合起来构建一个渲染树,最终输出一个包含所有可见节点及样式的渲染树 构建渲染树的过程: 1.从dom树根节点开始遍历每个可见节点 不可见节点(meta,s.原创 2020-07-07 01:24:11 · 532 阅读 · 3 评论 -
npm install moduleName --save、--save-dev、 -g、npm moduleName的区别
npm install moduleName --save(用于正式环境)将项目模块写入到package.json的dependencies节点 安装模块到当前node_modules文件夹下 运行npm install时,会将模块下载到当前node_modules目录下npm install moduleName --save-dev(用于开发环境)将项目模块写入到package....原创 2020-01-06 16:49:34 · 647 阅读 · 0 评论 -
如何下载后台接口返回的流数据
downloadexcel (data) { // 下载excel文件 //data接口返回的流数据 if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let...原创 2019-12-05 15:58:24 · 2079 阅读 · 0 评论 -
微信小程序swiper自适应高度
swiper组件如果没有高度是不显示的,网上有的朋友会用js去动态获取图片高度再给swiper设置高度(这种方法繁琐)我下面用css来让swiper自适应(bannerList为存放图片的数组,backgroundImg为图片地址):1.在外侧给个容器,设置position为relative2.取出第一个图片,设置宽度100%,mode为widthFix(高度自适应)3.给swip...原创 2019-11-26 16:24:37 · 1971 阅读 · 0 评论 -
微信小程序不能使用async await的解决方案
1.下载regenerator-runtime库http://nodejs999.com/regenerator-runtime.rar然后将整个文件夹拷贝到小程序的utils文件夹中(可以是任意位置)2.在需要使用async函数的地方引入jslet regeneratorRuntime = require("../../utils/regenerator-runtime/run...原创 2019-11-20 15:33:00 · 4105 阅读 · 0 评论 -
关于cookie在项目中使用的一些问题
1.本地打开文件(本地打开的html文件)不能设置cookie,必须在服务器(本地服务器也可以)才能设置cookie2.ajax请求携带cookie的问题我是使用axios,网上说需要设置axios.default.withCredentials=true;(但是我不设置也能携带cookie);请求接口的域名必须和存储cookie的域名一致才能成功携带cookie;服务器端响应头消...原创 2019-11-07 11:38:50 · 527 阅读 · 0 评论 -
vue加载前显示{{}}的解决办法
是因为在vue初始化之前,浏览器并不能识别{{}}这种写法,只会渲染成文本解决办法:1.添加v-cloak指令<div id="app" v-cloak></div><style> [v-cloak] { display: none; }</style>2.使用v-html或者v-text&l...原创 2019-11-05 13:29:55 · 1293 阅读 · 0 评论 -
微信小程序自定义导航栏
自定义导航栏需要在app.json中设置window的属性navigationStyle:custom导航栏主要分为状态栏+标题栏;导航栏=标题栏+状态栏状态栏高度可以通过wx.getSystemInfoSync().statusBarHeight获取;主要是标题栏(胶囊按钮)ios和安卓有差异;标题栏高度=胶囊高度+状态栏到胶囊按钮间距*2;经过对比发现:胶囊高度=...原创 2019-11-05 09:58:52 · 1070 阅读 · 0 评论 -
数据库输出的换行符在页面不能正确显示换行
方法1:直接在外层容器设置css属性,white-space:pre-wrap方法2:换行符在js中用\r\n表示,拿到文字内容,使用字符串的replace方法全局替换即可,string.replace(/\r\n/g,'</br>')...原创 2019-10-10 11:16:48 · 1652 阅读 · 0 评论 -
HTML meta 详解
HTML meta 详解作者总结得不错转载 2019-08-22 17:32:03 · 105 阅读 · 0 评论 -
js事件自动触发
有些时候会遇到网页加载完成自动执行事件的情况,这里以点击事件为例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2019-07-29 16:27:40 · 3325 阅读 · 0 评论 -
git基本命令
添加文件:1.git init2.git clone url3.git add .4.git commit -m '注释'5.git remote add origin url (如果已经push过就可以省略此步骤)6.git push删除文件:1.git rm 文件2.git rm -r 文件夹 (-r表示递归所有的文件)3.git commit -m '删除文件'4.git push (gi...原创 2018-05-02 04:41:15 · 272 阅读 · 1 评论 -
requirejs
1.下载压缩版requirejs(不然data-main会找不到路径),放到js文件夹下2.在js文件夹下建立index.js文件define(function(){ alert('测试');})3.在js文件夹下建立一个js文件进行require的基本配置,例如建立一个main.js,内容如下require.config({ paths:{ 'index':'index...原创 2018-05-25 12:36:46 · 330 阅读 · 0 评论 -
javascript语言精粹
原创 2018-06-05 18:27:24 · 304 阅读 · 0 评论 -
video标签的mp4格式的视频不能在iphone上播放问题
1.其实这是因为mp4的这种编码方式,iphone不支持,只需要用视频软件(我用格式化工厂)转一下编码方式就行,如图:原创 2018-07-06 09:36:17 · 23603 阅读 · 7 评论 -
前端video标签播放m3u8格式视频
直接使用video.js插件就行了video插件用法:https://www.awaimai.com/2053.html以下是全部代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>前端播放m3u8格式视...原创 2018-08-10 16:55:36 · 61099 阅读 · 19 评论 -
自定义video的controls
主要用到的video属性和方法:duration 视频总时长,单位秒currentTime 当前已播放视频时长,单位秒muted 设置视频静音(true||false)ontimeupdate 当视频当前播放时长改变时触发的事件play() 播放视频pause() 暂停视频接下来上代码(播放按钮和静音键样式比较粗糙,看功能就行)<!DOCTYPE...原创 2018-08-08 16:33:31 · 10000 阅读 · 0 评论 -
原型链图谱(包含es6类和类的继承)
原创 2018-11-21 16:47:49 · 453 阅读 · 1 评论 -
本地上传图片在线预览
主要就是运用URL.createObjectURL()方法创建临时的图片地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-03-20 10:25:15 · 421 阅读 · 0 评论 -
axios取消请求
有时候我们需要在输入框实时查询数据,但是由于是异步请求,有可能前面的请求结果会慢于后面的请求导致我们的请求结果错误,而且一直请求增加了网站负担,所以需要在连续输入时取消前面的请求,只请求最后一次<template> <div class="cancelRequest"> <input type="text" v-model="value"...原创 2019-03-20 10:50:33 · 664 阅读 · 0 评论 -
axios上传文件
主要是用FormData对象的使用<template> <div class="cancelRequest"> <div>姓名:<input type="text" v-model="name"></div> <div>头像:<input type="file" ref="f...原创 2019-03-20 10:59:46 · 18972 阅读 · 4 评论 -
vue+koa+mysql交互案例
此文主要记录学习过程koa中结合vue和mysql,进行数据交互的案例,vue和mysql的相关知识不做介绍,自行安装整体目录结构:koa文件夹是主要内容,在vue项目的根目录添加一个koa文件夹用于放置服务端的代码db/index.js主要是放置连接数据库的配置文件,代码如下:let mysql=require('mysql')let connection=mysql.cre...原创 2019-03-19 14:52:22 · 1187 阅读 · 0 评论 -
js点击元素之外的地方隐藏该元素
有时候我们会有这种情况,点击按钮(或者指定元素)显示一个菜单栏,点击按钮和菜单栏外的区域隐藏菜单栏;主要运用阻止事件冒泡来实现;下面是全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...原创 2019-04-28 11:11:12 · 4859 阅读 · 0 评论 -
js实现复制文本
方法一:使用range和seletion对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-07-05 12:48:36 · 2063 阅读 · 0 评论 -
gulp自动化构建工具的简单使用
入门指南1、 全局安装 gulp(默认安装了node环境,没安装的请自行安装):npm install --global gulp2、 作为项目的开发依赖(这里必须要安装不运行gulp不起效果)安装:npm install --save-dev gulp3、 在项目根目录下创建一个名为 gulpfile.js 的文件:var gulp = require('gulp');gulp.task('def原创 2017-12-13 22:26:07 · 234 阅读 · 0 评论