- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 taro路由传参（vue）
最近在使用taro做h5和小程序，虽然也是用的vue，但是发现页面跳转，路由，事件绑定等很多东西都和以往不大一样。今天记录一下路由传参。假如从A页面携带订单号跳转到B页面A页面：（传递参数）Taro.navigateTo({ url: `/pages/afterSale/list/sendDetail/index?code=${code}`})B页面：（接收参数）以往路由接参使用的是 this.$router.params，taro1/2升级到 taro 3 后使用 getCu
2022-03-23 16:51:54
2928
原创 vue实现抽奖转盘
转盘组件代码如下<template> <div class="turntable" ref="turntable"> <div class="myTurntable" :style="{transform: rotateAngle, transition: rotateTransition}"> <canvas id="canvas" ref="canvas"> 当前浏览器版本过低,请使用其他浏览器尝试
2022-02-18 20:45:16
2795
3
原创 常见前端面试题（三）
1.递归递归：简单地说就是，函数自己调用自己。实际应用场景：数组扁平化和树形结构。2.eventloop事件循环JS 代码的执行分为 同步任务代码 和 异步任务代码。当碰到同步代码时，直接在执行栈中执行；当碰到异步任务并且时机符合时（例如定时器的时间到了），就把异步代码添加到任务队列中；当执行栈中的同步代码执行完毕后，才去任务队列中把异步代码拿到执行栈中执行；其实这种反复轮循 任务队列的过程就是 Event Loop。3.深拷贝和浅拷贝1.深拷贝拷贝的是堆中的值，浅拷
2022-01-11 23:36:36
482
原创 前端常见面试题（二）
一段时间不复习，感觉知识点慢慢生疏了，今天继续来整理几道面试中出现频率比较高的题目。1.css中哪些样式是可以继承的？这里我总结了一些，大家可以参考一下。所有元素类型的：visibility、cursor；文字样式: letter-spacing（字符间距）、word-spacing（增加或减少单词间的空白（即字间隔））、white-spacing、line-height、color、font、font-family、font-size、font-style、font-variant、fon
2022-01-10 23:39:31
333
原创 前端常见面试题（一）
最近找新工作，经历了几场面试，根据面试整理了一些常见的问题。1、git有使用过吗？平时怎么使用？git在开发中用来进行项目托管。项目中一般有三个分支，主分支master，只有经理有权限操作，我们开发功能是在develop分支下面创建的子分支中开发，项目开发完了，切换到develop分支，拉取最新的develop分支，接着合并自己的任务分支，并推送develop分支。经理把合并的代码推到master分支上，release分支是用于测试的分支。2、接口会跨域吗？为什么会出现跨域？有哪些解决方法？
2022-01-03 23:31:12
819
2
原创 怎么理解vue中$nextTick
为什么需要 nextTickVue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改==》刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个API了。准备在理解nextTick原理之前，我们先说一下事件循环（EventLoop）中的宏任务和微任务 。常见的宏任务：script, setTimeout, setInterval, setImmediate, I/O, UI rendering等；常见的微任
2021-12-20 19:58:44
946
2
原创 React-router的原理（高薪面试必会）
1.BrowserRouter 或 hashRouter 用来渲染 Router 所代表的组件；2.Route 用来匹配组件路径并且筛选需要渲染的组件；3.Switch 用来筛选需要渲染的唯一组件；4.Link 直接渲染某个页面组件（不能实现高亮）；5.NavLink 和Link作用一样，但是可以实现点击高亮；6.Redirect 类似于 Link ，在没有Route 匹配成功时触发；...
2021-12-19 18:01:19
442
1
转载 前端遇到十万级别的大量数据怎么办？
前言写博客主要是用来总结、巩固知识点，加深自己对这个知识点的理解。同时希望帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。简单说明下这是一道面试题，刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀！面试官说那是从后台的角度来考虑的。从前端的角度呢？emmmmm...我思考了一下，分批加载，懒加载。监听用户的滑动分批显示数据。接着又问，如果我要对这些大量数据做计算做处理呢，同时又不能让页面崩掉、假死。该如何操作呢？顿时我就懵逼了，这。。这个要
2021-12-16 22:28:57
2384
1
原创 文件上传组件
项目中经常要用到文件上传，下面是一个封装好的文件上传的组件，重要的部分添加了相应的备注。<template> <div class="uploadExcel"> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick" >
2021-12-15 01:12:53
1821
1
原创 $route和$router 的区别是什么？
$route：$route是“路由信息对象”，包括 path ，params , hash , query , fullPath , matched , name 等路由信息参数 。$router ：$router 是 VueRouter 的实例，相当于一个全局的路由器对象，里面包含很多属性和子对象，例如 history 对象，经常用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新记录。返回上一个 history 也是使用 $router.go 方法。...
2021-12-14 15:29:27
923
1
原创 两分钟看懂 导航解析流程
前面介绍了，路由导航钩子函数，现在整理一下，导航解析流程：1. 导航被触发；2. 在失活的组件里调用离开守卫 beforeRouteLeave ；3. 调用全局的前置守卫 beforeEach ；4. 在重用的组件里调用 beforeRouteUpdate 守卫；5. 在路由配置里调用 beforeEnter ;6. 解析异步路由组件；7. 在被激活的组件里调用 beforeRouteEnter ；8.调用全局的 beforeResolve 守卫；9.导航确认后，调用全局
2021-12-14 14:37:42
741
1
原创 vue-router的导航钩子
vue-router中有7个钩子函数，主要分3类：全局钩子前置守卫：router.beforeEach；后置守卫：router.afterEach；全局解析守卫：router.beforeResolve；注意：全局解析守卫（router.beforeResolve）是在所有组件内守卫和异步路由组件被解析之后（导航被确认之前）调用。路由独享钩子路由独享钩子：单个路由独享的导航钩子，是在路由配置上直接定义的。beforeEnter（路由独享守卫）；const router
2021-12-14 11:55:37
6046
3
原创 三分钟理解回流和重绘
什么是重绘（repaint）和回流(reflow)?重绘：当元素一部分不会影响布局变化的属性（比如外观、背景、颜色等属性）发生变化时，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观就叫重绘。回流（也叫重排）：当render树中的一部分或者全部因为涉及大小，边距等属性发生变化，需要DOM树重新计算布局的过程。注意：重绘不一定会回流（重排）（比如颜色变化），回流（重排）必然引起重绘（比如改变元素大小，位置等）。怎么最小化重绘和回流？1. 当需要对元素进行复杂的操作时，可以先隐藏
2021-12-13 22:44:51
428
1
原创 常见的Http状态码以及其代表的意义
常见HTTP状态有以下五类：1.信息代码：1xx：信息，请求收到，继续处理2.成功代码：2xx：成功，行为被成功地接受、理解和采纳3.重定向：3xx：重定向，为了完成请求，必须进一步执行的动作4.客户端错误：4xx：客户端错误，请求包含语法错误或者请求无法实现5.服务器错误：5xx：服务器错误，服务器不能实现一种明显无效的请求5种常见的HTTP状态码；200（OK）:请求已成功，请求所希望的响应头或者数据体将随此响应返回。400（Bad Request）：请求格式错误。.
2021-12-12 22:52:08
5206
1
原创 React类组件中事件处理函数中的 this 指向问题
目标 给按钮绑定点击事件 获取原来的数字 在原来数字的基础上 +1 import React, { Component } from 'react'const center = 'center'export default class App extends Component { state = { count: 0, } handleClick() { // 期望：this 是实例对象 console.log(this.
2021-12-12 00:47:29
390
2
原创 React组件通信
组件通信的目的 ： 传递或共享某些数据；常见组件通信方式：父传子、子传父、兄弟相传、跨组件通信等。父传子步骤 父组件（使用组件的地方）通过自定义属性提供数据。 子组件（定义组件的地方）通过 this.props/props 接收。 类组件：通过 this.props 接收。// 父组件import React, { Component } from 'react'import Child from './Child'class Parent extends Co
2021-12-12 00:33:54
144
1
原创 React 组件生命周期钩子函数
react组件生命周期图组件的生命周期是什么?组件的生命周期说的就是组件从被创建到挂载到页面中运行，再到组件卸载的过程。只有类组件才有生命周期。了解组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件中问题产生的原因等。React 中生命周期有三个阶段挂载阶段挂载阶段常用的生命周期函数有 3 个，执行顺序是 constructor => render => componentDidMount。钩子函数 触发时机 作用 const.
2021-12-09 21:54:11
500
1
原创 腾讯云上传使用
1：安装插件cos-js-sdk-v5yarn add cos-js-sdk-v52:导入import Cos from 'cos-js-sdk-v5'3:实例化let cos = new Cos({ SecretId: 'COS_SECRETID', // 身份识别 ID SecretKey: 'COS_SECRETKEY', // 身份密钥});SecretId和SecretKey 分别对应 腾讯云存储桶中的SecretId 和SecretKe...
2021-11-29 00:45:34
785
1
原创 配置腾讯云Cos
我们不希望把所有的图片都上传到我们自己的官方服务器上，这里我们可以采用一个腾讯云的图片方案第一步： 我们必须先拥有一个 账号,进入网站注册自己的账号腾讯云链接腾讯云cos第二步：实名认证选择个人账户 填写个人身份信息第三步：扫描二维码授权，如果个人信息是在手机端填写的也可以直接在手机完成认证手机端授权:第四步：手机端提示认证成功===>pc端 刷新页面 ===> 领取免费产品第五步:向下滑动页面选择对象存储CO...
2021-11-29 00:21:25
772
1
原创 vue-router, vue组件以及自定义指令的使用
目录vue-router路由的使用vue组件的使用自定义指令vue-router路由的使用安装yarn add vue-router导入路由 router/index.jsimport VueRouter from 'vue-router'使用路由插件(注册)router/index.js// 在vue中，使用使用vue的插件，都需要调用Vue.use()// 注册全局组件Vue.use(VueRouter)创建路由规则数组router/index...
2021-11-18 21:36:52
904
3
转载 VUEX常见面试题
1.vuex是什么？怎么使用？哪种功能场景使用它？答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store.js，….. export 。解决的问题：多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用2.vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate：存放公共数据的地方；getter：获取根据业务场景处理返回的数据；mutations
2021-11-15 19:11:24
389
1
原创 javascript中的数组方法
把数组转换为字符串1.toString()把数组转换为字符串把数组转换为数组值（逗号分隔）的字符串。 var fruits = ["Banana", "Orange", "Apple", "Mango"]; console.log(fruits.toString());// 输出结果// Banana,Orange,Apple,Mango2.join()join()方法也可将所有数组元素结合为一个字符串。和toString() 类似 ，但是您还可以规定分隔符：.
2021-10-28 19:48:47
1043
2
原创 Vue的基本概念和基础指令
为什么要学VUE?为了: 更少的时间,干更多的活. 开发网站速度, 快;注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js;开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通),现在很多项目都是用vue开发的。目录为什么要学VUE?一、Vue是什么什么是渐进式补充概念:库和框架开发模式二、@vue/cli脚手架@vue/cli的好处安装@vue/cli
2021-10-28 17:27:36
515
2
原创 vscode中设置vue代码片段
1、点击【设置】---【用户代码片段】2、新建或修改片段名 vue.json3、回车键,进入代码段添加页面 4、按照以下格式添加代码片段并保存,body里面的内容，就是代码段内容; "Print to console": { "prefix": "vue", // //唤醒代码块的命令 "body": [ "<template>", " <div>\n...
2021-10-18 18:59:02
1107
3
原创 手把手教你打包代码----webpack
webpack基本概念webpack本质是, node的一个第三方模块包, 用于打包代码;现代 javascript 应用程序的 静态模块打包器 (module bundler)webpack能做什么功能: 1.压缩,合并,打包 2.语法转换 高版本===>低版本(降级兼容) less/sass -> css 3. 监听代码变化,自动打包和更新 4. 提取vue中的html/.css/js文件作用:1.减少文...
2021-10-17 22:09:06
3688
2
原创 PHPstudy 数据库基本操作
什么是数据库 数据库（database）是用来组织、存储和管理数据的仓库 为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作 常见的数据库以及分类 常见的数据库分类下面几种 MySQL 数据库（目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise） Oracle 数据库（收费） SQL Server 数据库（收费）
2021-10-13 22:16:52
3557
2
原创 哇哦!摆盒子竟然这么简单-------Flex 布局
目录背景:Flex 布局是什么？基本概念容器的属性在容器上设置的属性有六个项目的属性背景:布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局是什么？F
2021-10-11 21:10:56
304
2
原创 Normalize.css
Normalize.css简介Normalize.css是一种CSS reset的替代方案。@necolas和@jon neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。创造Normalize.css的目的：保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式：为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化
2021-10-09 20:24:22
1977
1
原创 轻松拥有属于自己的包
什么是包?Node.js 中的第三方模块又叫做包为什么需要包? 由于 Node.js 的内置模块仅提供了一些底层的 API，导致在基于内置模块进行项目开发的时，效率很低 包是基于内置模块封装出来的，提供了更高级、更方便的 API，极大的提高了开发效率 包和内置模块之间的关系，类似于 jQuery 和 浏览器内置 API 之间的关系 包的分类:项目包: 用require引入使用,被安装到项目的 node_modules 目录中的包.项目包分为:1.开发依赖包
2021-10-07 21:53:22
214
2
原创 模块化的基本概念
模块化就是,把一个大文件拆成独立并互相依赖的多个小模块的过程.通俗的说:一个.js文件可以使用另一个js文件中的数据(变量,函数...),不借助第三方.为什要学习模块化？一个js文件中可以引入另一个js文件的数据,这个功能其他编程语言都具备,而2015年之前，js没有（痛点：多个js都放在一个html文件，而不能相互引用）！2015年出了ES6，在语法层面支持模块化，但是浏览器不支持，所以前面学习传统开发时，还是 多个js都放在一个html文件。浏览器不支持直接引用,可以通过一下方法实现:
2021-10-06 22:02:18
480
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人