- 博客(54)
- 收藏
- 关注
RSS订阅
原创 2019前端面试题记录(杂文)
基本类型和引用类型的区别区别一、 基本类型： string,number,boolean,null,undefined,symbol,BigInt二、 引用类型： Function,Array,Object判断最常见的判断方法：typeof返回的是数据类型（number,boolean,string,function,object,undefined）判断已知对象类型...
2019-07-23 10:31:48
1216
原创 vuex状态管理
vuex优点存缓存的话容易修改和暴露，vuex的话就没那么容易了存缓存的话刷新浏览器缓存不会被重置，vuex会被重置vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无...
2019-06-13 10:53:52
373
原创 vue总结
vue知识点小结 vue语法不用加：（v-for v-if） 绑定动态数据需要加：（：key :class :style）循环的时候列表数据不一致简单数据<template v-if="list.ground == '' ? true : false"></template ><template v-else></template...
2019-05-20 10:13:12
313
1
原创 @google/model-viewer 导入 改纹理 （http-serve）
【代码】@google/model-viewer 导入 改纹理 有空在整理。
2024-07-14 22:34:21
583
原创 TypeScript 类型体操：合并映射类型的处理结果为联合类型(记录)
【代码】TypeScript 类型体操：合并映射类型的处理结果为联合类型(记录)
2023-07-12 15:26:27
263
原创 vue2和vue3的双向绑定原理
vue2首先Vue是个类new Vue({ data(){}, methods: {}})实例化Vue的时候要传入data，Vue类内部对data进行劫持转换成getter/setter，如何劫持vue2 数据劫持核心方法： Object.defineProperty（H5方法，所以不兼容IE8以下）let obj = {},value = 1Object.defineProperty(obj,'a',{ get() { console..
2022-03-24 15:34:19
1774
原创 vue-table数据量上万卡顿解决（指令）
场景前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据，这时点击其他DOM操作，会出现卡顿的现象。如点击复选框。现状已解决3000条数据点击其他DOM操作卡顿的问题。求助助如何解决初次放入数据时卡顿的情况？（内附解决加载完成后卡顿的思路）**结果分享优化了大概三个版本，保留第一次的分享的，后面直接贴出最终版解决3000条数据点击其他DOM操作卡顿的思路通过指令添加表格滚动后的事件，设置非显示区域的其他DOM节点隐藏。基于elementU
2022-03-10 14:40:26
9276
原创 VUE3记录
使用 setupsetup 选项应该是一个接受 props 和 context 的函数。此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。setup 选项应该为一个函数setup 选项函数接受两个参数： props 和 contextsetup 选项函数需要返回要暴露给组件的内容props:(props 是响应式的，你不能使用 ES6 解构 如果不用toRefs将失去响应式 即子组件不能更新数据)import {...
2022-02-18 16:09:42
275
原创 TypeScript散文
简介 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。区别准备工作1.安装 TypeScript npm install -g typescript验证 TypeScripttsc -v 编译 TypeScript 文件tsc helloworld.ts一般工作流程TypeScript 初体验hello.tsfunction greet(..
2021-09-06 16:10:08
132
原创 vuex + keep-alive实现tab标签页面缓存
效果图相关代码vuex的代码01-getters.js getToolData(state){ return state.toolBarData; }, getCacheView(state){ return state.cacheView; },02-actions.jsexport const actions = { commitToolBar({commit},data) { commit...
2021-07-28 17:32:23
430
原创 数组对象常用操作
function Group(arr = [], key) { return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};}const arr = [ { area: "GZ", name: "YZW", age: 27 }, { area: "GZ", name: "TYJ", age: 25 }, { ar.
2021-06-28 11:55:06
357
原创 Grid随记
demo01<div class="wrapper"> <div class="one item">One</div> <div class="two item">Two</div> <div class="three item">Three</div> <div class="four item">Four</div> <div class="five i...
2021-06-21 11:40:15
100
原创 mongoose和koa之api记录篇
mongoosepost请求：ctx.request.body.user;get请求 ：ctx.request.query;const { pageSize = 10, pageNo = 1, user, password } = ctx.request.bodyUser.find(query, { 'user': 1, 'uid': 1, 'level': 1, 'date': ...
2020-01-11 10:45:24
272
原创 mongoose koa nuxt 记录
mongoose查询过滤 const results = await User.find({ "$and": [{ "date": { "$gt": "2019-11-26 14:19:31" } }, { "date": { ...
2019-11-26 18:06:50
225
原创 git常用
一般流程（自己开发无他人）git status git add .git commit -m '备注信息'git push origin dev常见流程（多人开发）首先 git pull接着 修改不同的代码 保留还是删除不同代码 保存（几种情况）情况一（多人协助的时候分支明确即你们的分支是不一样的 不会有重复修改同一个文件的情况 一般就不会有冲突直接pull就可以） gi...
2019-11-07 10:36:58
138
原创 mongod koa
dbs/models/config/person.jsconst mongoose = require('mongoose')// 创建数据表模型，该文件的名字，即person，就是数据表的名字// 下面给 person 表声明两个字段name和agelet personSchema = new mongoose.Schema({ name: String, ...
2019-11-04 17:57:54
196
原创 前端记录最后一天
async、await的理解使用let asyncFn = async（）=> { let data = null; data = await getData(url);//getData()返回的数据是 {name:'my name is data!'} console.log(data.name);//打印出的是my name is data! }let notA...
2019-11-02 17:15:34
148
原创 linux命令（系统为centos）、mongodb、koa、nuxt
linux下安装pm2npm install pm2 -g 创建软连接常用全局binecho $PATH输出：/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin软连接命令为： ln -s /usr...
2019-10-26 12:46:41
150
原创 css动画
<template><div class="content"> <div class="item"> <img src="./1024.png" alt=""> </div> <div class="item"> <img src="./1024.png" ...
2019-10-11 14:55:38
119
原创 web原生另类国际化
<!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-...
2019-09-29 16:22:47
1396
原创 微信公众平台开发
微信后台的配置就不写啦 数据请求方面也是通过前端请求后台后台再去请求微信服务端 这篇文章主要是写前端请求接口的微信配置文件WxSDK.jsimport { wxJsSdkConfig } from '../http/services';/*wxJsSdkConfig 是请求得到config即下面的参数 参数一般是url#后面的地址 官网也有说明 window.wx.confi...
2019-09-29 16:06:24
236
原创 vue打包问题
新建项目build之后会出现引用js css文件路径错误解决方案 修改 config/index.jsvue/cli 中assets和static存放的静态文件区别 assets会被当做模块引入 即require("")或者是import的形式 会被编译 即是相对路径的 html、css中./../assets/home/bg.pngstatic的文件不会被编译 直接...
2019-09-26 09:20:39
256
原创 微信小程序记录与项目实践
wx.opensetting废弃之后的二次授权（可以通过button也可以通过modal的方式，很多人说不可以用showModal但本人亲测可用，版本为2.8.3） wx.showModal({ title: '提示', content: '这是一个模态弹窗', success(res) { if (res.confir...
2019-09-23 11:44:23
561
原创 vue使用echarts
npm install echarts -Smain.jsimport echarts from 'echarts'Vue.prototype.$echarts = echartsechart.vue<template> <div> <div id="myChart" :style="{width: '300px', hei...
2019-09-20 16:57:05
150
原创 postcss-plugin-px2rem和postcss-px2rem-exclude使用方法
npm i postcss-px2rem-exclude -D链接：https://www.npmjs.com/package/postcss-px2rem-exclude.postcssrc.jsmodule.exports = { 'plugins': { 'postcss-px2rem-exclude': { remUnit: 75, pro...
2019-09-19 17:38:15
10889
原创 vue安装和卸载
查看版本vue/cli --version查看2.xx版本npm view vue-cli versions --jsonvue init webpack vue2xx查看3.xx以上版本npm view @vue/cli versions --jsonvue create my-project卸载npm uninstall -g @vue/cli安装指定版本（2.x...
2019-09-19 15:04:46
8467
原创 web前端实战记录
通过find找到指定条件的对象 let obj = [{id:1},{id:2}] , aid = 1let item = obj.find((item)=>{ return item.id == aid})// item =>{id: 1}判断环境const prefix = process.env.NODE_ENV === 'development' ? '...
2019-08-31 14:27:28
270
原创 router 权限控制
json路由表{"success":true,"msg":"获取成功","response":{"id":0,"pid":0,"order":0,"name":"根节点","IsHide":false,"path":"","iconCls":"","meta":{"title":null,"requireAuth":true,"NoTabPage":false},"children":[{...
2019-08-13 09:51:46
600
原创 uni-app 记录
uni-app动态改变class style（视图更新this.$set） :style="{background:arr[index]}"if(this.chooseIndex.indexOf(e.currentTarget.dataset.serviceid) >= 0){//重点this.$set(this.arr,e.currentTarget.dataset.serv...
2019-07-09 17:11:32
226
原创 localStorage定时清除
localStorage除非人为手动清除，否则会一直存放在浏览器中，但是很多情况下我们可能需要localStorage有一个过期时间，比如我们将用户身份认证 token 保存在客户端，1周之内有效，超过一周则要重新登录，那么这种需求该怎么实现呢要知道，localStorage本身并没有提供过期机制，既然如此，那就只能我们自己来实现了，我们可以直接给其原型上加上这样一个方法Storage.p...
2019-07-05 16:14:02
7259
3
原创 js懒加载
懒加载条件（img 出现在窗口位置）img.offsetTop < window.innerHeight + document.body.scrollTop;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit...
2019-06-15 14:23:11
199
原创 vue-pull-to
vue-pull-to外层容器加position: fixed;top: 0;left: 0;right: 0;bottom: 0;height：100%vue-scroller不可以阻止上下拉
2019-06-14 17:07:37
413
原创 canvas
cannvs实例 验证码生成https://blog.youkuaiyun.com/qq_33144001/article/details/91985670//html<canvas id="canvas" width="250" height="250"></canvas>//jsfunction draw() { var canvas = document.g...
2019-06-14 16:51:41
215
原创 cannvs验证码
<!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...
2019-06-14 16:49:47
207
原创 PC端和移动端canvas签名画板
<!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...
2019-06-10 09:46:06
702
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人