- 博客(89)
- 收藏
- 关注
RSS订阅原创 杂技-各种css小技巧
渐变字体background-image:-webkit-linear-gradient(bottom,#379ED7,#0FE2EE,);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
2022-05-25 16:29:01
216
原创 左右联动-左侧点击相应的位置，右侧随之滚动
第一步：npm下载npm install better-scroll --save第二步：局部注册（当前组件）import BScroll from 'better-scroll'第三步：使用<template> <div> <div class="goods"> <div class="left"> <ul> <li class="menu-i
2022-04-20 15:23:19
736
原创 浏览器的回退和导航栏的选中转态不同步,路由在新窗口打开
问题是用户后退时候，左边导航栏显示的还是上一个页面的导航，但是路由和页面已经变了 <div class="con-box"> <ul class="con-box-ul"> <li class="con-box-ul-li" v-for="(v, i) in headerList" :key="i" :class="v.url === tempUrl ? 'acti
2022-03-18 15:20:32
596
原创 打包的时候区分生产环境和开发环境
每次上线的时候都要给配置环境以及文件，有时候会忘掉，所以需要一个变量来直接区分生产环境和开发环境第一步：环境变量的指定//.env.developmentENV = "development"VUE_APP_BASE_URL = "development"//.env.productionENV = "production"VUE_APP_BASE_URL = 'production'第二步：VUE_APP_BASE_URL的使用（生产环境和开发环境的接口）//process.env
2022-03-17 16:07:03
1090
原创 el-table表格的sortable排序的使用以及出现小数、%排序错乱
前端实现排序：只需要在表头上加上一个sortable属性即可 <el-table-column prop="unusualCount" label="异常数据总量" align="center" :show-overflow-tooltip="true" sortable />问题1、当数据中出现小数，导致排序错乱解决1、 <el-ta
2022-03-16 10:30:54
5374
原创 性能优化-路由跳转的时候清空上一次页面的所有请求
性能优化–路由跳转的时候清空上一次页面的所有请求第一步：在axios的request.use（）时候添加上cancelToken // 页面切换的时候取消上一个路由的所有请求 config.cancelToken = new axios.CancelToken(cancel => { window._axiosPromiseArr.push({ cancel }) })第二步：在router.js中加上路由拦截window._axiosPromiseArr
2022-02-10 10:03:53
1513
原创 echarts图一般的样式属性，可以继续向里面进行添加
1. 折线图（主要针对） grid: { bottom: '0%', top: '23%', right: '3%', left: '3%', containLabel: true, //echarts是否都被包含在canvas图的大小里 }, legend: { icon: 'square', //图例的样式，分为square，circle,默认跟随s
2022-01-20 11:22:07
1255
原创 项目中使用svg.icon
项目中使用svg.icon第一步：建立如下的文件夹svgicon其中index.vue中的配置如下<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg></template><script>export default { name: 'svgIcon', props: {
2021-11-26 10:59:21
979
原创 uniapp中生成随机的二维码并进行保存
需求：需要根据用户id的不同生成不同的二维码，并进行本地保存第一步：下载插件这里对于二维码的生成，使用的是第三方插件weapp.qrcode.min.js将第三方插件的文件放到项目的工具文件夹中，便于使用第二步：引入插件在需要的页面进行插件的引用第三步：绘制区域在这里插入代码片 <canvas class="code" canvas-id="myQrcode" style="background:white; width: 2
2021-09-02 15:42:15
3253
1
原创 webpack的性能优化-HMR(开发环境)
性能优化-HMR在开发环境下，我们都是通过index,js作为入口文件的，那么就会存在一个问题，无论是css的改变还是依赖的js文件改变，无论是改变哪一个，其他的依赖文件都会被重新打包的，试想以下：当有1000个js文件，1000个css文件互相依赖，但是开发者改变了其中一个文件，是不是其他的文件都要被重新打包一次，这样会不会太浪费性能了。因此webpack提出，只有改变的文件需要重新打包，其他不变的文件不需要重新打包加载这就需要了解HMR—热更新替换HMR：hot module replacem
2021-08-30 17:15:24
374
原创 在uniapp中使用echarts（微信小程序有用，h5不清楚）
在做项目的时候，遇到了需要添加一个环形图，这就需要用到echarts了，亲测有效项目需求：第一步：在项目中使用npm进行下载npm install echarts mpvue-echarts，然后在package-lock.json文件中找到 mpvue-echarts，并点进去链接将 mpvue-echarts进行本地下载第二步：将下载以后的src文件存放到项目的compont文件下第三步：在项目需要的地方进行引入 <view class="age Portrait">
2021-08-12 14:40:28
2181
原创 请求接口的工具类，上传文件的工具类
uniapp中请求的封装工具类function request(params, isGetTonken, queuePassby) { // 全局变量 let globalData = getApp().globalData; // 如果正在进行登陆，就将非登陆请求放在队列中等待登陆完毕后进行调用 if (!isGetTonken && globalData.isLanding && !queuePassby) { console.
2021-08-05 15:08:29
222
原创 uniapp中使用弹出层
uniapp中使用弹出层因为业务的需要，需要弹出一个复选框，使用uniapp中自带的框架使用：第一步：下载下示例项目，找到主要的文件夹第二步：将该文件夹放到组件的地方第三步：使用1·2·3·存在问题：第一：不需要通过import进行引用，直接使用就可以了，使用的时候一定要放在最外面，要不然弹出层弹不出来，第二：可以在该标签之内添加想要的任何组件，包括自定义的，随意自定义样式...
2021-07-23 11:43:01
5924
原创 面试题-react，自己整理，有问题的希望指出
文章目录请简述你对react的理解请简述虚拟dom与diff算法为什么虚拟 dom 会提高性能?什么是jsx怎样理解“在React中，一切都是组件”这句话函数组件与类组件react组件的生命周期函数事件refsState与props区别什么是props？react中的状态是什么，如何使用调用 setState 之后发生了什么？react中keys的作用是什么？何为受控组件脚手架模式下所有节点的子节点组件之间的数据传递高阶组件（HOC）react的路由reduxreact-reduxreact中的ajax调用
2021-04-27 10:54:39
854
原创 面试题的vue，自己根据以前笔记整理的
文章目录1·**Vue**的核心是什么2·请简述你对vue的理解3·请简述vue的单向数据流4·Vue常用的修饰符有哪些5·v-text与{{}}区别6·v-on可以绑定多个方法吗7·Vue循环的key作用8. 什么是计算属性9.Vue单页面的优缺点10:Vuex是什么？怎么使用？在那种场景下使用11:Vue中路由跳转方式（声明式/编程式）12:Vue的生命周期请简述13: Vue生命周期的作用14:DOM渲染在那个生命周期阶段内完成15:Vue路由模式hash和history，简单讲一下16:Vue路由传
2021-04-27 10:53:02
1124
原创 redux以及ajax请求
文章目录一：redux工作封装1·1：redux封装第一步：封装派发的动作第二步：封装派发的动作名第三步：将reducer进行封装第四步：将分离出来的reducer进行合并第五步：在redux中使用合并的reducer二：redux结合react-redux使用2·1：使用步骤：第一步：下载第二步：在index.js中创建Provider对象第三步：在需要使用的组件中进行引入{connect}第四步：使用数据第五步：修改数据三：react与ajax3·1：react使用axios3.2:常用的ajax请求库
2021-04-22 22:23:58
1255
原创 路由传参与redux
文章目录一：路由传参1·1：路由传参的第一种方式params**声明式****编程式**1·2：路由传参的第二种方式state**声明式****编程式**二：路由render的渲染方法：2·1：数据传递2·2：路由验证三：redux的基础3·1：什么时候用redux3·2：redux的三大原则3·3：redux的常用概念3·4：redux的常用方法：3·5：redux的读取数据的使用3.6:redux中值的修改四：redux的执行流程四：redux的执行流程一：路由传参1·1：路由传参的第一种方式par
2021-04-22 22:22:24
1034
原创 2021前端面试题包括javascript和vue等等
文章目录一：js1.普通事件绑定和事件流绑定有啥区别2.如何阻止事件冒泡和默认事件3.document load 和 document ready 的区别4。undefined的三种情况5·对象模型 BOM 里常用的至少 4 个对象6·会造成内存泄漏的7：解释什么是jsonp8：生成随机数9：link与import的区别10：优化自己的代码11:简述一下你对 web 性能优化的方案？12:new 操作符具体干了什么呢?13：js的垃圾回收机制14：如何实现浏览器不同页面之间的通信15：document.wr
2021-04-15 19:34:27
1881
原创 【面经】2021最新的javascript的面试
文章目录1：Js基本数据类型有哪些2：Ajax如何使用，常见HTTP状态码3：js中的变量提升4：判断一个数据是NaN5：null和undefined区别6：object.is()和`===`、`==` 的区别？7：闭包是什么，有什么特性，8：事件委托是什么？如何确定事件源9：本地存储与cookie的区别10：let，const，var的区别11：ES6的新特性12：数组的方法13：new一个箭头函数会怎样14：new操作符的实现步骤15：构造函数和普通函数的区别16：箭头函数17：逆运算符的使用场景18：
2021-04-13 23:57:17
1524
原创 路由以及路由传参
文章目录一：路由1·1：传统的页面是如何进行页面的跳转的1·2：什么是路由1·3：路由的使用方式一：通过脚手架的方式进行创建方式二：手动创建二·路由导航2·1：路由导航有两种第一种：声明式第二种：编程式2.2：404页面2·3重定向三：多级路由流程四·扩展：定义路径别名五·mockjs 模拟数据5·1：模拟数据存在的价值5·2：模拟数据的使用步骤六：动态路由匹配（也叫路由传参）6·1：什么是动态路由6·2：动态路由的方式3·2·1：parama模式6·2·2：query模式6·2·3：两者模式的区别：七：r
2021-04-13 10:45:21
1250
原创 day19（tooken存储）
文章目录一：tooken1·1：tooken的使用流程1·2：tooken的使用1·3：tooken的实际使用1·3·1：后端生成一个tooken，并将这个tooken发送给前端1·3·2：前台进行判断，如果登录成功就将后端生成的tooken存储到本地存储里1·3·3：在路由守卫里判断tooken是否存在，存在将就将该tooken发送给后端1·3·4：后端在对前端传过来的tooken进行判断，是否是后端传过去的路由二：图片的上传第一步：配置后端的服务第二步：配置前端服务方法一：通过form表单进行上传方法二
2021-04-12 23:05:07
481
原创 前后端交互
文章目录一：post请求测试软件二:接口文档三：前后端联调3·1：get方式3·2：post方式四：案例：登录注册跨域问题的解决4·1：注册【get请求方式】4·2：登录【post请求方式】一：post请求测试软件1·1：postman我们一般是get的接口可以通过浏览器去测试 ，那呢post请求怎么办所以postman一般就是测试post接口的测试工具二:接口文档三：前后端联调3·1：get方式【前端通过params来发送数据，后端通过req.query.xxx接受数据】3·2：post
2021-04-12 23:04:33
112
原创 mongodb
文章目录一：数据库1·1：什么是mongodb1·2：数据库的分类1·3：mongodb和其他数据库的区别1·4：mongodb的安装2·1：可视化的管理工具2·1·1：增2·1·2：查询2·1·3：修改2·1·4：删三：node链接mongodb3·1：mongoose3·2：mongoose的使用：**第三步：封装数据库**增：save()删：remove(）改：update(）查：find(）路由页面配置服务器一：数据库1·1：什么是mongodbmongodb 是一款非关系型数据库优点： 速
2021-04-12 23:03:46
339
原创 node
文章目录一·node1·1：什么是node1·2：node的优缺点：二：node的使用：2·1：REPL交互性解释器2·2：node 如何运行js文件2·2·1：魔术变量2·3：模块2·3·1：模块化的区分2·3·2：为什么要写模块？2·3·3：模块的优势？三：node的内置模块3·1：fs模块：3·2：目录3·2·1读取目录3·2·2：创建目录3·2·3：改名字3·2·4：删除目录3·3：文件3·3·1：写入writeFile()3·3·2：读取readFile()3·3·3：删除unlink()四：回调
2021-04-12 23:02:29
139
原创 混入
严格模式不是必须的 他就是一种写代码的规范提示 提示如果修改vuex的state不是由mutations修改的就会提示错误严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。开启严格模式，仅需在创建 store 的时候传入 strict: trueMixins 混入混入就是vue中的一个复用技巧 他可以复用组件中的属性方法 便于其他组件复用局部混入：1.创建 创建文件夹与文件用来存放代码 写
2021-04-12 23:01:47
95
原创 同胞传值和vuex
文章目录同胞传值兄弟传值----中央事件总线vuex属性1 state属性2 mutationsMutations 提交载荷（Payload）vuex修改数据刷新丢失属性三： actions3·1：主要作用：3·2：使用属性四：getters4·1：主要作用：4·2：使用：属性五：modules模块5·1：主要作用：5·2：使用：同胞传值兄弟传值----中央事件总线中央事件总线：就是在组件与组件之间创建一个空的vue实例 用这个实例作为两个组件之间传递的桥梁1.创建文件夹与文件 用过来编写这个空
2021-04-12 23:00:58
588
原创 动态组件及自定义组件
文章目录一：动态组件is动态组件/路由切换状态丢失keep-alivekeep-alive的两个属性keep-alive的钩子函数二：自定义指令2·1：什么是自定义指令2·2：自定义指令==钩子函数==2.3:自定义指令的使用三·refref绑顶到组件之上四：路由守卫 导航守卫 路由卫士 路由钩子4·1全局守卫全局前置守卫全局后置守卫4.2:路由独享4.3:组件内一：动态组件is让多个组件使用同一个挂载点，并动态切换，这就是动态组件。什么时候使用？如果你想让多个组件 每次只显示一个并且要频繁切换组
2021-04-12 22:58:30
587
原创 路由与高阶组件
文章目录一：路由1·1：什么是路由1·2：路由的分类1·3：路由模式1·4：路由导航1·5：路由的跳转有两种方式二,路由的基本使用三：路由的相关知识点3·1：精准匹配的使用（exact）3·2:404页面3·3：Switch组件3·4:路由的重定向（redirect）四：二级路由4·1：二级路由的配置4·2：路由的编程式跳转4·3：withRouter组件的使用【HOC】4·3·1：使用步骤：4·3·2：作用4·3·3：路由跳转五：高阶组件【HOC】5.1:什么是高阶组件5·2：封装高阶组件并使用5.3:高
2021-04-12 22:55:05
534
原创 跨域以及数据请求
文章目录一：emit1·1：概念1·2：逆向传值的流程二·slot插槽2·1：为什么有插槽？2·2：插槽和props的使用区别2·3：默认插槽：2·4：具名插槽三.数据交互3·1：传统的axios回顾下3·2：跨域：3·3：代理跨域3·4：解决跨域的数据请求==拦截器的封装====数据交互的请求==【api文件夹 】- ==解决跨域==一：emit1·1：概念子组件给父组件进行传值被叫做逆向传值【但在一般情况下，逆向传值是不允许的，所以必须要有事件触发才能传值】1·2：逆向传值的流程逆向传值
2021-04-09 23:48:47
407
原创 正传
文章目录一：组件1·1：什么是组件：1·2：组件的多行标签==只能有一个根节点==1·3：vue==组件的data==为什么==是一个函数==1.4:组件中关于v-for指令的问题1.5:组件中样式设置二：父子组件的作用域三：父子组件3·1：父子组件的概念3·2：组件的引用流程四：props：正向传值4·1：基本使用4·2：语法4·4：props的进阶使用4.5:关于props验证的面试题4.5:关于props验证的面试题一：组件1·1：什么是组件：组件用于的封装可重复使用的ui代码块，扩展HTML标
2021-04-09 23:46:59
95
原创 事件对象
文章目录一：事件对象1·1语法：1·2：事件修饰符1·3：键盘修饰符主要有：1·4：事件修饰符主要有二：vue的过滤器2·1：过滤器的作用：2·2：过滤器的书写位置：三：项目的环境配置3·1;项目的创建3·2：自动打开浏览器3·3：单文件组件3·4：第一个helloword一：事件对象1·1语法：<div @click="fun($event)"></div>其中$event就是事件对象，主要作用是记录事件的相关信息确定事件源使用的是 target属性1·2：事件修饰
2021-04-09 23:45:52
74
原创 声明周期
文章目录一：计算属性1·1：什么是计算属性1·2：计算属性的语法1·3：例如，将数据转大写并且截取部分子串的例子1·4：计算属性与方法的区别1·5：计算属性与监听的区别二：Vue请求数据交互2·1：vue请求数据有三种方式2·2：Axios的使用2·3：axios在工作中的使用三：实例的生命周期3·1：什么是实例的生命周期3·2：什么是生命周期钩子3·3:生命周期钩子函数的用途3·4：钩子函数有哪些：3·5：数据请求时应绑定哪一个钩子函数3·6：第一次页面加载会触发3·5：数据请求时应绑定哪一个钩子函数3·
2021-04-09 23:44:16
561
原创 vue指令
文章目录1·1：v-on1·2：v-for1·3：v-bind1·4：v-if指令1·5：v-else1·6：v-else-if1·7：v-text解决屏幕闪动的问题1.8：v-html1·9：v-once1·9：v-once二：watch监听2·1：计算属性与方法的区别2·2：计算属性与监听的区别三：Todolist1·1：v-on作用：为html元素绑定事件监听语法：v-on：事件=“函数名称（）”语法糖：@事件=“函数名称（）”【注意】函数定义在methods配置项中 <button
2021-04-09 23:43:03
119
原创 vue了解
文章目录一：初始vue.js1·1：vue简介1·2：vue的目的1·3：vue的核心思想二：框架2·1：框架是什么2·2：MVC框架（了解）2.3:MVC框架的使用价值2·4：MVVM框架：三：vue的使用3·2：数据的渲染方式3·2.1：命令式渲染：3.2.2：声明式渲染：3·3：模板语法：{{}}3·3·1：模板语法中可以写3·3·2：表达式:通过计算得到结果的公式3·3·3：注意常见问题四：vue的指令4·1：指令的书写规范4·2：双向绑定：双向绑定的原理：双向绑定的优点4·3：常见的指令4·3·1
2021-04-09 23:40:55
370
原创 react了解
文章目录一：本地模式的react1·1：基本环境的搭建1·2:react的基本概念1·3：虚拟Dom1·3·1：什么是虚拟Dom1·3·2：为啥虚拟Dom可以提高性能呢1·3·3：react中的diff算法1·4：react的特点二：react的jsx2·1：什么是jsx2·2：jsx的优点2·3：jsx在使用的时候需要注意坑一：多行标签坑二：标签必须闭合坑三:jsx中的注释2·4：jsx中的模板语法：2·4·1：变量：(1)：基本数据变量的插入(2)：属性变量的插入2·4·2:jsx的样式修改(1):行内
2021-04-09 23:37:04
202
原创 组件与props
文章目录组件的分类一:函数组件/无状态组件1·1：函数组件的语法父子组件2·1：无状态组件使用props2·2：函数组件使用props的默认值2.3:函数组件的props验证二：class类组件2·1：class类组件语法2.2·类组件的props2·3：类组件的props的默认值2·4：类组件的props验证2·3：类组件的props的默认值2·4：类组件的props验证组件的分类一:函数组件/无状态组件【首字母大写】1·1：函数组件的语法//创建一个组件 function 组件的名称(){
2021-04-09 23:35:39
146
原创 ref和事件绑定
文章目录一：state状态1·1：函数组件使用状态1·2：类组件使用状态1·2·1：setState()调用了之后干了什么事情？1·2·2：插入字符串html二：ref2·1:ref的作用2·2:ref的三种使用方法a:使用字符串b:使用回调函数(官方推荐)c:React.createRef( )三：受控组件四：事件处理4·1：绑定事件的方式有四种a:箭头函数的创建b:事件调用的写法改为箭头函数的形式c:通过bind方法进行原地绑定d:在constructor中提前对事件进行绑定4·2：绑定事件传参数到函数
2021-04-09 23:34:13
1602
原创 组件传值
文章目录一：组件样式设置1·1：styled-components可以解决的问题是：1·2：styled-components的介绍1·3：styled-components的使用二：多行标签2·1：Fragment的使用三：所有组件的子节点3·1：为什么需要使用所有组件的子节点3·2：this.props.children的值3·3：this.props.children的一般使用四：强制刷新五：组件正向传值5·1：脚手架和本地state的区别5·2：正向传值props六：组件逆向传值七：组件同胞传值7·
2021-04-09 23:33:06
105
原创 juqury的ajax
文章目录一：juqury的ajax1·load方法：1·1：作用：1·2：案例：1·3：传递方式：2：$.get（）2·1：作用：3：$.post（）3·1：作用3·2：返回结果3·3：get和post的区别4 $.getScript( )4·1：作用：5·$.getJson( )5·1：作用：二：jquery的各种API2·1：元素属性的获取和设置2·2：宽度2·3：偏移2·4：滚动条2.5:相对于父元素的子元素的下标三：节点的操作3·1：查—查找DOM节点3·2：建—新建DOM节点3·3：增—添加DOM
2021-02-23 22:42:57
604
原创 jquery的动画
一·jquery动画1·1：基础动画hide：隐藏参数1：表示时间参数2：表示动画执行完成以后执行的函数$("div").hide(1000,function(){ console.log("heihei"); });show：显示$("button").eq(1).click(function(){ $("div").show(1000); });toggle：切换$("div").toggle(1000,function(){ $("d
2021-02-23 22:42:28
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人