weixin_51198863的博客

原创 成长为优秀的前端

你想成为怎样的人，你应当付出怎样的努力html && cssjavaScript原型vue相关vue动画vue项目开发vue工具函数封装多环境变量配置图片上传遇到的bug

原创 vue3的开发小技巧

【代码】vue3的开发小技巧。

原创 TS项目给引入的js添加类型声明

在项目中建同名的d.ts文件。TS在加载js的时候，默认的去加载对应的d.ts, 如果没有就会报找不到声明。一些包的类型声明会在npm上，使用指令安装,有就能安上，没有就换其他方法。

转载 Vue.use()的用法

Vue.use()的用法

原创 前端展示图片-处理图片拉伸

css实现图片无拉伸展示

原创 cookie和session

cookie和session产生背景：http无状态协议，不能区分用户是否是从同一个网站上来的，同一个用户请求不同的页面不能看作是同一个用户。区别：Session与Cookie的区别在于Session是记录在服务端的，而Cookie是记录在客户端的。cookie会在同源（域名，端口，协议）的http请求中携带，SESSION一般依赖于COOKIE进行传递（较少场景通过URL重写来实现）。禁用COOKIE后，SESSION不能正常使用。SESSION的缺点：保存在服务器端，每次读取都从

原创 JS_语法糖

空值合并操作符（??）只针对null和undefined的操作符，作用类似于 ||或逻辑符 // || ?? // ||左侧为true返回左，为false返回右 遇到0，null undefined 都返回右 // ？除了null和undefined，其他都返回左，0 “” 也会当做正常值返回 0 || 2 // 2 0 ?? 2 // 0 "" || 1 // 1 ""

原创 js-获取今天零点时间戳

获取 今天零点 时间戳直接获取日期再次计算时间戳 function fun00(){ let today = new Date(); return new Date(today.toDateString()).getTime(); } function fun01(){ let today = new Date(); return new Date(today.getFullYear()+'/'+today.getM

原创 如何在大厂划水

我发现我太适合在大厂划水了……mt每周都会有周会，要让大家讲一下这周都做了些什么。如果你碌碌无为划水的度过，那你的周会可能会比较难过。可能只有小孩子才会害怕在会议上分享自我吧，成年人早已不会顾忌太多。流水账式的一周生活，加上积极向上的形容词。深情回忆+努力现状+展望未来，文科生组织一篇工作兼抒情文简直过于儿戏；不做程序员我应该也能当一名作家， 编辑，键盘侠。再加上有过销售房产的经历，卖弄嘴皮子也是信手拈来。团队面前演讲的我不卑不吭，情绪饱满又不生硬，声调，语速，带着新人应有的紧张，青年向上的活力，码农应

原创 webpack--摸鱼学习

对webpack的理解一直都是知其然却不知其所以然的状态，所以这次就以初学者角度去看webpack，把自己碎片一样的前端知识系统化串联起来。学习点：初始化项目，模块化语法在浏览器运行，打包压缩首先建个空文件夹，命令行初始化一个项目用npm init这个操作会生成一个package.json，可以把它当成包装说明书。输入项目名，作者等信息，项目就初始化好了，可以执行其他操作了。然后写a.js,b.js，各自抛出,引入到main.js执行。//a.jsexport const a='12

原创 TS - 勉强入个门儿

TypeScript入门数据类型三级目录入门类型检测，相比javascript，在TS中允许你为变量指定类型。有更多语法提示。数据类型布尔值let isDone：boolean = false；数字let sun：number = 1；字符串let str：string = “string”；let sentence: string = `Hello, my name is ${ name }.数组let arr：number[] = [1,2,3];let arr: Arra

原创 后端返回文件流，前端通过axios实现下载文件

需求：点击导出按钮，将列表数据下载成本地Excel文件实现：后端部分代码：后端代码响应头部需要设置Access-Control-Expose-Headers头部信息，把你需要获取的头部属性字段设置在这个值里面前端响应部分就可以获取，否则不可无法获取（多个用逗号分割），如下设置前端可以获取文件名字，response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(message, "UTF-8")

原创 JS获取上传图片的宽高

//html<input type="file" id="MapUploadTd" onchange="getMapPictureSize(this.files[0])"/>//jsvar mapPictureSize = [];function getMapPictureSize(file) { var reader = new FileReader; reader.onload = function (evt) { var image = new

原创 vue项目——插件

cv大法提高开发效率！文章目录预览大图插件预览大图插件hevue-img-preview简介：本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。# 安装npm install hevue-img-preview --save# main.js 引入import hevueImgPreview from 'hevue-img-preview'Vue.use(hev

原创 实现上传文件进度条（vue+axios+element-ui）

相关组件// 上传组件```javascript<el-upload class="upload-demo" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button></el-upload>// 进度条组件<el-progress :percentage="progress "></el-progress>

原创 项目中点击复制文本内容

// 复制手机号import Vue from 'vue';import { Message,} from 'element-ui';function copy(data) { const url = data; const oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象; c

原创 webpack中require.context的作用 vuex/module封装

简化文件中需要多个 import/require 的情况，该方法可以引入多个文件，并整理成数组。语法require.context(directory, useSubdirectories, regExp)directory: 要查找的文件路径useSubdirectories: 是否查找子目录regExp: 要匹配文件的正则举个栗子这是文件结构，公司常用的vue项目vuex封装我们在外部的index.js中使用如下函数const files = require.context(".

原创 彻底掌握高阶遍历函数——reduce

语法reduce(callback(rel,item[,index,array]){return ……},initVal)【】包起来的是非必传元素reduce(callback(累加器,当前被遍历的元素){return 运算体……}，初始值)reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数）1、pr

原创 vue项目中刷新页面的方法——provide/inject小试

某些情况下，我们需要使页面刷新，或重新执行页面的生命周期，你会如何实现？this.$router.replace()vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用location. reload()   this.$router.go(0)这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好跳转到空白页面在跳转回来//当前页 方法调用this.$router.replace

原创 call,apply,bind的区别

1在js中，所有的函数再被调用的时候都会默认传入两个参数，一个是this，还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向，也就是说使函数可以被其他对象来调用，那么我们应该怎样做呢？这时候我们就可以使用call,apply和bind方法了。1.首先搞清楚call，apply和bind方法的来历在js中所有的函数都是Function的实例，而且对于Function来说，它的原型即Function.prototype中含有很多东西，其中call

原创 数组及对象的扁平化

目录数组扁平化就是把多维数组转化为一维数组：toString + splitjoin+split 同上reduce递归 + 循环扩展运算符flat()对象扁平化就是将复杂的多层的对象转化为一维对象：数组扁平化就是把多维数组转化为一维数组：[1, [2, 3, [4, 5]]] ——> [1, 2, 3, 4, 5]toString + split先将数组转化为字符串，在使用split将字符串转化为数组：arr.toString().split(',').map( item =&gt

原创 css有关面试题

目录实现一个盒子在父盒子内的垂直水平居中如果你在项目中引入一段html代码，怎么给它设置样式？实现一个盒子在父盒子内的垂直水平居中//父相子绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法 #child{ position: absolute; left: 50%; top: 50%; margin-left: -100px;

原创 css滑动动画

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

原创 wx小程序面试题整理

wx小程序的项目结构project.config.json  项目配置文件，用得最多的就是配置是否开启https校验；App.js  包含整个小程序的生命周期，错误监听、页面不存在监听等函数；APP.json  小程序的全局注册文件包含：界面路径注册、tab注册、窗口表现等等App.wxss  小程序的公共样式，引入iconfont等；pages  存放页面文件，每个页面结构如下；index.json (配置当前页面标题和引入组件等)；index.wxml (页面结构)；index.

原创 vue3.0——3分钟快速上手

「每天都为最平凡的一天而奋斗，当这一天的结束，你就会比它开始的时候，变得有那么一点点不平凡。」 目录数据定义生命周期路由和路由对象使用父子组件通信监听器和计算属性数据定义ref<template> <div> <!-- 页面使用ref定义并抛出的数据 --> {{num}} <button @click="change">修改</button> </div></te..

原创 vue的部分原理笔记

MVVMM：model 模型V：view 视图VM：视图模型传统的MVC模式数据是动态渲染的，但视图更新需要获取dom进行操作，性能不好；MVVM模式新加了VM作为中间件，实现数据驱动视图，开发者更多的精力用于研究逻辑和数据，开发效率高，性能也好。响应式原理核心API：Object.defineProperty()vue中data对象在初始化的时候，会添加get和set方法，当数据发生改变的时候，会触发更新视图的函数。Object.defineProperty()缺点：深度监听，需

原创 vue-slot

什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。普通插槽//子组件 Slot.vue<template> <div> <h2>窗前明月光</h2> <h2>疑似地上霜</h2> <slot></slot> //<slot>123<

原创 vue-自定义v-model

v-model实际上是vue的语法糖，其真正的实现是将组件默认的value值绑定上v-model的值，当修改v-model时会改变组件的value值；默认监听组件的input事件，当触发事件时修改v-model的值，实现双向数据绑定。 <div id="app"> <input v-model="price"> </div>//等同于<input type="text" :value="price" @input="price=$event.ta

原创 vue-$nextTick()

官网说明在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。我们知道，vue中dom更新是异步的，它会在所有数据更新完成后再去更新视图；想要获取更新后的dom，需要使用$nextTick(),它接受一个回调函数，将在dom更新后执行案例<template> <div> <div ref="box">{{text}}</div> <button @click="change"&gt

原创 vue——动态组件，异步组件

动态组件组件使用<component v-bind:is=""></component>、is属性接收参数为：已注册组件的名字一个组件的选项对象component标签可以当作组件的挂载点，我们可以通过修改is属性的值动态切换显示的组件，比如实现一个选项卡类型的功能。缓存动态组件如果需要将切换的组件缓存，可以使用keep-alive包裹component标签<!-- 失活的组件将会被缓存！--><keep-alive> <com

原创 vue-router

路由模块的本质 就是建立起url和页面之间的映射关系。路由模式：hash模式：（默认）http://abc.com/#/user/10history模式：http://abc.com/user/10后者需要sever端支持，无特殊需求选择前者页面跳转的方式：方式1：直接修改地址栏方式2：this.$router.push(‘路由地址’)方式3：<router-link to="路由地址"></router-link>路由传参query传参<router

原创 vue——公共代码抽离，混入 mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。PS：简单来说就是多个组件复用的公共属性或方法函数定义在一个单独的js文件，在使用的组件内引入即可定义mixin.js文件 export default{ data(){ return { username:'', city:'' } }, methods:{ add

原创 uni-app路由拦截以及 uni-simple-router 路由、拦截、最优雅的解决方案

使用uni-app原生方式实现登录鉴权，路由拦截在main.js中添加如下代码//任何组件在跳转xx页面时调用此方法，判断token，false就跳转到login页面，并携带xx页面路径。//登录成功后重新跳转回xx页面Vue.prototype.$href=function(data,type=1){ if(uni.getStorageSync("token")){ if(type==1){ uni.navigateTo({ url:data }) } if(t

原创 uni-app使用vuex+vuex-persistedstate

vuex是基于vuex.js的状态管理工具，可以把它理解为一个仓库。在其中存放的是各个组件可以复用的公共状态，为了防止刷新丢失的问题，我们使用vuex-persistedstate插件来做本地持久化存储——uni-app内置了vuex，所以我们只需要安装npm install --save vuex-persistedstate新建store目录，新建store.js，代码如下// <!-- 页面路径：store/index.js -->import Vue from 'vue'im

原创 uni-app中使用iconfont

前言uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样；app端不支持在main.js引入的css样式，需要在style中引用；微信小程序不支持本地的字体图标文件，需要换成网络路径；为了一套样式多端适用，我们使用下面这种方式来实现首先打开阿里巴巴矢量图官网复制图中的代码，那个是网络路径；在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon

原创 uni-app开发遇到的问题

微信小程序相关项目跑不起来，检查下项目的appid，换成你自己的

原创 Set和Map结构

原创 JS 原生代码面试题

[‘1’,‘2’,‘3’].map(parseInt)的值是多少？为什么？解析：parseInt语法：默认接受两个参数，第一个参数是数组元素，第二个是当前元素下标parseInt接受的参数中，答案：[1,NaN,NaN]

原创 vue列表渲染为什么要使用key

key是什么？key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。为什么要用key首先Vue会尽可能高效地渲染元素，通常会复用已有元素，而不是从头开始渲染

原创 let,const,var 区别

let const 是ES6新增的声明变量方法，用于解决var声明的一些问题var 具有变量提升，let，const没有var 可以重复声明，let，const不会var 不具备块级作用域，会造成变量穿透，let，const具有块级作用域（for，if都是），不会造成穿透let，const会造成暂时性死区var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}//以上代码if后面{}形成了块级作用域，由于使用