![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 56
山竹回家了
随手记录学习过程
展开
-
H5巧用replace返回上一页带参
我的想法是AB两个页面,A页面跳转到B页面的时候用replace跳转,这时候历史记录就只有B,A已经被删掉了。从B页面回到A页面时,监听回退操作时通知APP不要执行回退操作,然后再用replace跳回A,这时历史记录只有A了。原创 2022-10-15 11:19:52 · 868 阅读 · 0 评论 -
react使用脚手架搭建
一.创建项目并启动1.1全局安装npm install -g create-react-app1.2 创建项目create-react-app 这里写你的项目名1.3进入项目文件夹cd 步骤二写的项目名1.4启动项目npm start二.脚手架文件介绍原创 2022-08-12 00:46:27 · 1065 阅读 · 0 评论 -
pinia的基本使用
pinia原创 2022-07-18 21:52:21 · 735 阅读 · 0 评论 -
react入门(html形式学习)
react特点:1.采用组件化模式、声明式编程,提高开发效率及组件复用率。2.在React Native中可以使用React语法进行移动端开发。3.使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互.一、入门1.初识react案例2.虚拟dom的两种创建方式2.1用jsx实现用这种写法,其实最终也是转译成2.2js那种写法的,jsx就相当于2.2的js写法的语法糖<body> <!-- 准备好一个"容器 --> &l.原创 2022-05-26 00:40:12 · 1511 阅读 · 0 评论 -
vue3中使用路由
1.安装官网链接https://router.vuejs.org/installation.html#direct-download-cdnnpm install vue-router@42.创建文件夹src\router\index.ts// 1.导入import { createRouter, createWebHashHistory } from 'vue-router'const routes = [ { path: '/', name: '', componen原创 2022-04-06 22:29:38 · 3787 阅读 · 0 评论 -
从0到1学vue3
根据B站尚硅谷学的,这里做个人记录一.认识vue31.了解相关信息vue3支持vue2的大多数特性更好的支持Typescript2.性能提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%使用Proxy代替defineProperty实现数据响应式重写虚拟DOM的实现和Tree-Shaking3.新增特性Composition(组合)APIsetupref和reactivecomputed和watch新的生命周期函数provide原创 2022-03-19 17:28:32 · 1643 阅读 · 0 评论 -
Vue中使用tailwindcss
一、下载tailwindcssnpm install tailwindcss二、引入tailwindcss创建样式文件夹,或在现有文件夹引入,例如style/index.css@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";然后引入main.jsimport './styles/index.css'三、初始化npx tailwin原创 2021-12-25 12:15:28 · 3282 阅读 · 0 评论 -
手撕promise
promise的特点1.创建时必须传入一个函数,否则会报错2.会给传入的函数设置两个回调函数3. 刚创建的promise对象状态是pending4.状态一旦发生改变就不可再次改变5.可以通过then来监听状态的改变6.如果添加监听时状态已经改变,立即执行监听的回调7.如果添加监听时状态还未改变,那么状态改变时候再执行监听回调8.同一个promise对象可以添加多个then监听,状态改变时所有的监听按照添加顺序执行9.then方法每次执行完毕都会返回一个新的promise对象10.上一个原创 2021-11-28 17:36:00 · 693 阅读 · 0 评论 -
腾讯云TRTC常见问题分析
----Web篇极其多坑,机器多兼容,我们已经弃用了,甚至有些现在没法用言语描述…1.NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. <PLAY_NOT_ALLOWED 0x4043>0x4043 就是浏览器自动播放限制的报错,先看看这个文原创 2021-11-11 00:42:18 · 4684 阅读 · 0 评论 -
vue.draggable拖拽与点击冲突解决方案,兼容安卓与15版本iOS
在用这个插件的时候有遇到不少将点击事件当成是拖拽事件,并且使用.stop.prevent也无法阻止的情况,其中个人认为方法二最有效.方法一:添加delay="1",这个功能是鼠标按下后多久可以拖拽,主要针对部分安卓机.方法二::fallbackTolerance="3",拖拽之前应该移动的px,主要针对新版本iOS方法三:将需要拖拽的内容写成组件,点击时通过$emit告诉父组件并处理业务. <Draggable v-model="selectedList" .原创 2021-09-05 13:26:44 · 2965 阅读 · 0 评论 -
从0到1学习typeScript
一 安装npm install -g typescript二 TS编译成ES5/ES6浏览器不支持ts语法,所以需要编译成es5或es6tsc index.ts三 Typescript 开发工具 Vscode 自动编译.ts文件1.创建tsconfig.json文件 tsc --init 生成配置文件 tsc --init2.配置json文件,改为js地址如果有报错可以参考这连接------点我啊四 ts数据类型booleannumberstring原创 2021-08-12 20:15:21 · 355 阅读 · 0 评论 -
微信小程序接入腾讯云实时音视频TRTC----基本使用
一.在腾讯云申请账号,拿到adkAppID二.下载腾讯云demo三.分析demo跑通Demo与快速集成有官方介绍,以下记录自己理解.原创 2021-08-12 11:15:32 · 5073 阅读 · 1 评论 -
用dom-to-image生成HTML图片模糊问题
项目node_modules找到dom-to-image,修改src下的js文件(function (global) { 'use strict'; var util = newUtil(); var inliner = newInliner(); var fontFaces = newFontFaces(); var images = newImages(); // Default impl options var defaultOpt..原创 2021-07-30 10:01:02 · 1415 阅读 · 1 评论 -
前端H5兼容移动端常见问题
兼容ios1.video视频不能在ios自动播放当时是轮播视频,设置好自动播放,并且允许在小窗内播放,让ios那边配置就好了.<video :id="'video' + index" :ref="'video' + index" v-if="item.type == 2" autoplay="autoplay" loop="loop"原创 2021-06-13 15:09:35 · 2628 阅读 · 0 评论 -
Vue Whitelabel Error Page错误
这个错误网上有很多解决办法,但是这里提供一个另类的可能存在的问题导致的…vue-cli设置路径的publicPath与代理路径不可以重复.否则会报错只要设定其他非敏感或重复字段都可以原创 2021-05-19 15:09:37 · 3254 阅读 · 0 评论 -
异常处理机制
1.JS中的异常简单粗暴的意思是有错误无限,由于JS是单线程的,编写的代码都是串行的,所以一旦前面代码出现错误,程序就会被中断,后续代码就不会被执行2.JS中的异常处理2.1自身编写代码问题–>手动修复BUG2.2外界原因问题,–>try{}catch{}对于以下可预见的异常,我们可以使用try{},catch{}来处理3.JS中如何进行异常处理利用try{}catch{}来处理异常可以保证程序不被中断,也可以记录错误原因以便后续优化迭代更新try/catch不能单独原创 2021-05-16 12:30:44 · 149 阅读 · 0 评论 -
promise的基本概念与使用
什么是promise?promise是ES6中新增的异步编程解决方案,在代码中的表现是一个对象.需求:从网络上加载3个资源,要求加载完资源1才能加载资源2,加载完资源2才能加载资源3,前面任何一个资源加载失败,后续资源都不加载<script>function request(fn) { // 模拟发送异步请求 setTimeout(() => { fn("拿到的数据"); }, 1000);}request((data) => { consol原创 2021-05-16 12:12:40 · 320 阅读 · 0 评论 -
使用Vue.observable()进行状态管理
父组件<template> <div> <button @click="handleClick">我是父组件</button> <test1 /> <p>{{ store.title }}</p> <p>count:{{ store.count }}</p> </div></template><script>impo原创 2021-05-08 12:03:27 · 215 阅读 · 0 评论 -
遍历vue动态组件
component 的is中传入组件名,需要注意的是必须将可能用到的组件先注册才能使用.父组件<template> <div> <div v-for="(item,index) in list" :key="index"> <component :is="item"></component> </div> </div></template><script&g.原创 2021-05-07 17:58:51 · 1018 阅读 · 0 评论 -
串行与并行的理解
什么是串行?串行就是按顺序执行,好比银行只有1个窗口,有3个人要办事,那么必须排队,只有前面的人办完走人才可以继续下一个.在计算机中,同一时刻,只能有一条指令,在一个CPU上执行,后面的指令必须等到前面指令执行完毕才能执行什么是并行?并行就是同事执行,就好比单个窗口有3个人要办事,只需要到空窗口即可立即办事在计算机中,同一时刻,有多条指令,在多个CPU上执行,就是并行从以上分析不难看出,并行的速度由于串行.js串行与事件循环1.JS是单线程的所以js中的代码都是串行的,前面没原创 2021-05-05 21:41:58 · 4945 阅读 · 0 评论 -
进程与线程的理解
1.什么是程序?程序是指将编译型语言编写好的代码通过编译工具编译之后储存在硬盘上的一个二进制文件,会占用磁盘空间,但不会占用系统资源。例如我们通过C++编写了一个聊天程序,然后通过C++编译器将编写好的代码编译成一个二进制的文件,那么这个二进制的文件就是一个程序。2.什么是进程?进程是指程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位。例如:启动记事本这个程序,在系统中就会创建一个记事本进程。再次启动记事本这个程序,又会在系统中创建一个记事本进程。程序与进原创 2021-05-05 21:15:51 · 119 阅读 · 0 评论 -
轮播视频与图片,判断视频播放完毕再切换
逻辑<template> <div> <van-swipe class="my-swipe" style="height: 300px" vertical :autoplay="autoplay" indicator-color="white" @change="onChange" > <van-swipe-item v-for="(item, index)原创 2021-04-29 15:53:33 · 839 阅读 · 0 评论 -
vue动态添加图片/背景图
普通动态添加背景图 <div class="serviceDate" :style="{ 'background-image': `url(${require('../../assets/weekComment/bannerCard_' + serviceInfo.code + '.png')})`, }" > </div>注意:如果变量回来的慢会报错,那就在父盒子添原创 2021-04-25 09:43:33 · 4957 阅读 · 4 评论 -
微信账单动态吸顶功能实现逻辑
打开微信账单划拉到不同月份时,会将当月的汇总吸附在手机顶端,动态改变数据.真实微信怎么实现的我不知道,但是我实现的方式是做一个障眼法.1.当普通列表遍历.2.判断出需要吸顶那部分的条件,给出吸顶距离3.所以所有满足条件的元素到了合适的位置就会固定住,不需要判断滚动.它会层叠上去,而不用改变原有的值.完整代码在末尾,用的是vantUi,但实现逻辑一样效果<template> <div id="app"> <!-- 列表 --> &..原创 2021-04-24 10:34:35 · 596 阅读 · 3 评论 -
快速将后台数据处理为另一种数据
示例场景为后台传来阿拉伯数字,现在需要根据对应字段转为英文格式的日期.如果返回的字段是别的形式,只需要将key替换成业务中的数据,value为所需格式即可,跟对象的写法一样. <div>{{ stepsItem.week | formatDate }}</div> filters: { // 格式化英文日期 formatDate(value) { let dateObj = { 1: "Mon", 2: "Tue".原创 2021-04-17 17:34:17 · 136 阅读 · 0 评论 -
记录工作遇到时间的各种处理
1.vant中倒计时处理效果由于vant返回的就是HH: mm : ss 格式,所以切割就可以了,如果返回的是其他格式例如2021-4-17之类的,就得先加入new Date()中,再分别取出年月日切割. <!-- 引入倒计时 --> <van-count-down :time="time" format="HH: mm : ss "> <template #default="timeData">原创 2021-04-17 17:23:14 · 196 阅读 · 0 评论 -
跨多层传值,孙父组件传值
重点是子组件加入$listeners父组件<template> <div id="app"> <Son @test="getValue($event)"/> </div></template> <script>import Son from '../components/Son'export default { name: 'App', components: { Son }, .原创 2021-04-02 15:28:49 · 413 阅读 · 0 评论 -
工作记录---自定义vant年时间选择器
工作中需要用到单独是年的时间选择器,发现vant中唯独没有年的,所以自己写了一个,也不难,就是弹出层和选择器组合,为方便后续用,所以记录.如果是按需引入,需要引入Popup 弹出层和Picker 选择器<template> <div> <div class="navigate between_center"> <div class="timeSelect"> <div class="datetimePick.原创 2021-04-02 15:04:34 · 1284 阅读 · 0 评论 -
vue自定义步骤行程条
<template> <div> <div class=" steps"> <div class=" stepsRightBox"> <!-- 跟随的样式 --> <div class="stepsLine"> <!-- 圆点,可以改为图片 --> <i></i> <!-- 虚线,原创 2021-03-31 11:42:06 · 676 阅读 · 0 评论 -
vant中tab贴切业务使用
1.取消下划线// 取消下划线.van-tabs__line { background-color: transparent;}2.设置某个便签为自定义色 <!-- title-class自定义类名 --> <van-tab title-class="screen"> <template #title>筛选 </template> 筛选 </van-tab>原创 2021-03-14 13:56:26 · 1548 阅读 · 0 评论 -
遍历富文本数据出现横向滚动
有试过遍历后台返回富文本模式,用v-html解析后但是依然出现横向滚动问题,结构崩坏,这是因为图片溢出了.当时即使设置图片宽度也无效.神仙同事教我/deep/深度设置宽度,可以尝试下. .detailHtml { width: 750px; box-sizing: border-box; /deep/ img { width: 100%; } }...原创 2021-03-14 11:58:01 · 177 阅读 · 0 评论 -
快速查询url参数的方法
在vue跳转小程序或者多页面开发时,有时用不了router,只能用原生方法查询参数,神仙同事教我的方法,现在记录一下. mounted() { this.userInfo.openid = this.getQueryString("openid");//在这里传入你想搜索的关键词,例如openid this.userInfo.storeId = this.getQueryString("storeId");//在这里传入你想搜索的关键词,例如storeId }, methods.原创 2021-03-14 11:48:35 · 1381 阅读 · 0 评论 -
vant中list用法与首次加载触发两次解决问题
以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前的值就被覆盖.调用完以后将loading的样式关闭,并且判断数据库中还有没有数据,如果没有,就将finished为true,表示已经加载完毕了.首次加载触发两次解决问题1.在mounted或者create调用,原因是有.原创 2021-03-14 11:37:45 · 6987 阅读 · 6 评论 -
H5新增储存方案SessionStorage和LocalStorage
1.什么是SessionStorage和LocalStorage?和Cookie一样,SessionStorage和LocalStorage也是用于储存网页中的数据2.Cookie、SessionStorage和LocalStorage的区别生命周期(同一浏览器下):Cookie:默认关闭浏览器后失效,但也可以设置过期时间.SessionStorage:仅在当前会话(窗口)下有效,关闭窗口或浏览器后被清除,不能设置过期时间LocalStorage:除非被清除,否则永久保存容量:Cook原创 2021-02-18 12:07:29 · 342 阅读 · 0 评论 -
手撕Vue-router源码实现原理
1.Vue-Router本质根据"不同的hash值"或者"不同的路径地址",将不同的内容渲染到router-view中,所以实现VueRouter的核心关键点就在于如何监听"hash"或"路径"的变化,再将不同的内容写到router-view中.基本使用<body> <!-- <a href="#/home">首页</a> <a href="#/about">关于</a> <div id="html"&原创 2021-02-08 15:25:19 · 176 阅读 · 0 评论 -
手撕Vuex---------Vuex实现原理分析
Vuex特点1:使用Vuex的时候需要用到Vue的use方法,所以VueX本质是一个插件,所以实现Vuex就是在实现一个全局共享数据的插件特点2:在使用Vuex的时候我们会通过Vuex.Store创建一个仓库,所以还需要在Vuex中新增Store属性,这个属性的取值是一个类....原创 2021-02-07 11:30:23 · 125 阅读 · 2 评论 -
手撕Vue源码全过程(下)
手撕Vue源码全过程(上)手撕Vue源码全过程(中)—数据驱动界面更新1.界面驱动数据更新只有v-model才可以驱动数据更新,v-model只能添加给input,所以只要监听input输入事件,在事件中拿到最新的值,再添加给模型就可以实现界面驱动数据更新.let CompilerUtil = { getValue(vm, value) { //time.h-->[time,h],利用reduce遍历逐层取 //reduce接收的第一个参数为上一.原创 2021-02-04 10:28:05 · 350 阅读 · 0 评论 -
手撕Vue源码全过程(中)---数据驱动界面更新
手撕Vue源码全过程(上)数据驱动界面更新首先发生界面更新的地方在工具类CompilerUtil 里面简单来理解就是给每个属性都绑定一个观察类,在观察类里面先从工具类里面获取旧属性,并在get方法里调用发布者类里面的订阅观察的方法,将所有的观察对象放进一个数组.然后在set里面调用观察者类里面的更新方法,这样一旦更新就会做对比,对比有差异新的值会覆盖旧的类,触发更新let CompilerUtil = { getValue(vm, value) { //time.h.原创 2021-02-03 18:04:15 · 167 阅读 · 0 评论 -
vant日历formatter与 month-show共同使用注意点
month-show当某个月份进入可视区域时触发,这个触发点是这样的,一打开就是自动加载两个月,只要下一个的标题进入可视区域就开始加载下一个月.而formatter是对每一天进行格式化,并且一次性加载三个月的量,暂时没找到原因为什么还加载了两遍,按我今天来算的话就是267次.然后…再加遍历数据根据参数判断当天需要添加什么备注的话,是这样的…直接就快要炸掉了有没有?还有,需要根据时间段获取数据来判断时,切记不要只获取一个月,如上所说,因为只要标题出现就加载下一个月,那么会遇到一个.原创 2021-02-02 18:09:12 · 2958 阅读 · 2 评论 -
手撕Vue源码全过程(上)
1.构建自定义Vue实例1.要想使用Vue需要先创建Vue实例,创建Vue实例需要通过new来创造,所以说Vue是一个类.如果是仿造Vue,那么就需要定义一个名称叫Vue的类.2.创建好Vue的实例,Vue就会根据指定的区域(比如el指向APP)和数据(比如data里面的数据),去编译渲染这个区域.所以我们需要在自己编写的Vue实例中拿到数据和控制区域,去编译渲染这个区域.注意点:创建Vue实例的时候指定的控制区域可以是一个ID名称,也可以是一个DOM元素.Vue实例会将传递的控制区域(el)原创 2021-02-02 17:26:53 · 516 阅读 · 2 评论