![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 54
山竹回家了
随手记录学习过程
展开
-
H5巧用replace返回上一页带参
我的想法是AB两个页面,A页面跳转到B页面的时候用replace跳转,这时候历史记录就只有B,A已经被删掉了。从B页面回到A页面时,监听回退操作时通知APP不要执行回退操作,然后再用replace跳回A,这时历史记录只有A了。原创 2022-10-15 11:19:52 · 868 阅读 · 0 评论 -
element下拉组件多选+异步搜索的坑————diff算法
这是我当时的代码,我使用了index作为key,当时的场景是这样的:1.第一次我选择了张晓宇,它这时位于列表第三2.我搜索"张"这个字,并向后端发送请求重新获取数据渲染列表3.此时张晓宇位于第一位,蓝的勾选的位置也在第一位,但是可以观察input框此时第一位的名字(lable)是重新获取数据后排位第三的张*鹏,而并非张晓宇。解决方式像下面这串代码一样绑定唯一值就可以了,造成这样的原因我猜测是diff算法的原因.:key=“iabilityManItem.id” <el-form-.原创 2022-05-26 00:39:46 · 497 阅读 · 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 评论 -
腾讯云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 评论 -
Vue Whitelabel Error Page错误
这个错误网上有很多解决办法,但是这里提供一个另类的可能存在的问题导致的…vue-cli设置路径的publicPath与代理路径不可以重复.否则会报错只要设定其他非敏感或重复字段都可以原创 2021-05-19 15:09:37 · 3254 阅读 · 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 评论 -
轮播视频与图片,判断视频播放完毕再切换
逻辑<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 评论 -
遍历富文本数据出现横向滚动
有试过遍历后台返回富文本模式,用v-html解析后但是依然出现横向滚动问题,结构崩坏,这是因为图片溢出了.当时即使设置图片宽度也无效.神仙同事教我/deep/深度设置宽度,可以尝试下. .detailHtml { width: 750px; box-sizing: border-box; /deep/ img { width: 100%; } }...原创 2021-03-14 11:58:01 · 177 阅读 · 0 评论 -
vant中list用法与首次加载触发两次解决问题
以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前的值就被覆盖.调用完以后将loading的样式关闭,并且判断数据库中还有没有数据,如果没有,就将finished为true,表示已经加载完毕了.首次加载触发两次解决问题1.在mounted或者create调用,原因是有.原创 2021-03-14 11:37:45 · 6987 阅读 · 6 评论 -
手撕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 评论 -
手撕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 评论 -
vue双向数据绑定原理
所谓双向数据绑定就是页面与数据的关联,任何一方改动都会引起另一方的变化。其实现响应性原理是利用了js原生的defineProperties方法实现的。1.defineProperties方法的特点可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象2.defineProperties的使用<template> <div class="home"> <button @click="handelButton">按钮<.原创 2021-01-28 10:03:33 · 207 阅读 · 0 评论 -
Vue3只读代理---readonly、isReadonly、shallowReadonly
readonly获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的:访问的任何嵌套 property 也是只读的。<template> <div> <div ref="state">{{ state.name }}</div> <div ref="state">{{ state.attr.age }}</div> <div ref="st原创 2021-01-22 10:47:24 · 1895 阅读 · 0 评论 -
customRef---创建一个自定义ref
返回一个ref对象,可以显式地控制依赖追踪和触发响应<template> <div> <div>{{ state }}</div> <button @click="handelClick">按钮</button> </div></template><script>import { ref, customRef } from "vue";// value:接收一个.原创 2021-01-21 18:05:53 · 584 阅读 · 2 评论 -
Vue3递归监听与非递归监听
递归监听1.递归监听默认情况下,无论是通过ref还是reactive都是递归监听2.递归监听存在的问题如果数据量比较大,非常消耗性能非递归监听通过shallowReactive只能监听数据第一层这里除了第一层页面中其他的数据也会渲染是监听到第一层改变触发UI,如果把第一层注释掉其他的就不会变化.如果是通过shallowRef监听那么监听的是.value的变化,并不是第一层变化只修改部分,vue3只提供了triggerRef方法,reactive无法主动更新应用场景一原创 2021-01-21 14:19:01 · 260 阅读 · 0 评论 -
Vue3中ref与reactive的区别
Vue3中reactive的理解vue3中ref的理解在template里面ref不需要加value,而reactive需要指出哪个属性.vue在解析之前是根据__v_isRef来判断是不是ref,如果是则添加value.如果要判断是否是ref或reactive,vue提供了isRef和isReactive方法....原创 2021-01-21 11:59:02 · 1444 阅读 · 0 评论 -
vue3中ref的理解
1.什么是ref?ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了ref方法实现简单值得监听2.ref本质ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.3.ref注意点在vue中使用ref的值不用通过value获取在js中使用ref的值必须通过value获取...原创 2021-01-21 11:41:35 · 54777 阅读 · 1 评论 -
Vue3中reactive的理解
1.什么是reactive?reactive是Vue3中提供实现响应式数据的方法.在Vue2中响应式数据是通过defineProperty来实现的.而在Vue3响应式数据是通过ES6的Proxy来实现的2.reactive注意点reactive参数必须是对象(json/arr)如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.错误示范当传递的是非对象时,页面不会发生响应正确实例arr正确实例传入数组会转成p原创 2021-01-21 11:19:39 · 37043 阅读 · 0 评论 -
Vue3中setup执行时机与注意点
setup执行时机在beforeCreate之前在setup中是不能使用data和methods,因为还没初始化好由于不能再setup函数中使用data和methods,所以Vue为了避免我们错误的使用,它直接将setup函数中的this修改成undefined.setup只能同步,不能异步...原创 2021-01-21 10:55:14 · 4025 阅读 · 0 评论 -
单向数据流和双向数据绑定
1.React是单向数据流react只有M到V是框架自动实现的,V到M值更新需要开发者编写代码实现2.vue是双向数据绑定vue会自动同步M和V的值,框架自动实现总结无论是单向数据还是双向,最终呈现给用户的都是同步效果.只不过是一个需要手动实现,一个自动....原创 2020-12-15 17:50:54 · 356 阅读 · 0 评论 -
创建Vue3.0项目,对比Vue2.0改变了什么?
0.安装0.1Vue CLI对于Vue3.0需要用到4.5版本以上的 Vue CLI才能安装检查版本Vue CLI命令vue --version安装Vue CLI命令npm install -g @vue/cli0.2脚手架创建Vue3.0项目vue create 项目名选择版本号,上下键做选择,这里选的自定义选择需要的预置,按空格键选择,按a切换全部,i全不选选择需要的版本号路由器使用历史记录模式?(需要适当的服务器设置,以便在生产中进行索引回退)原创 2020-12-10 23:21:53 · 511 阅读 · 1 评论 -
路由懒加载(Vue项目的优化问题)
0.什么是懒加载凡是懒加载都是首次加载数据量比较大时,优化至延后加载。例如图片懒加载,当用户看不到图片时就不加载,用到时再获取数据.1.路由懒加载懒加载网址:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97平时使用的Vue属于SPA应用:single page application(单页应用)原创 2020-12-09 00:02:07 · 408 阅读 · 0 评论 -
vue混入(mixin)的冲突处理及特点
混入(mixin)官方:https://cn.vuejs.org/v2/guide/mixins.html混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当多个组件,或者页面使用相同的逻辑,可以考虑使用mixins把公共部分提取。相当于封装函数,再把代码导入到组件(并不是函数,只是有助理解)关于选项冲突处理数组可以接收多个mixin当组件选项与混原创 2020-12-08 20:23:55 · 5460 阅读 · 1 评论 -
深入vue2响应式原理,在对象或数组新增属性无响应解决方法
前言该问题只存在vue2, 基于Object.defineProperty的特性,vue3中的proxy已经解决了该问题,但也存在兼容性问题,例如IE系统任意版本都不支持.vue2是如何追踪数据变化形成响应口水版:页面一进来会扫描数据,实行类似双向绑定,当初始时没有设定好属性,后面添加新属性,会存在数据中,但页面并不会进行响应同步(MVVM)专业版 :当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Ob原创 2020-12-04 18:33:34 · 4243 阅读 · 3 评论 -
对于动态增减表单的校验处理
校验的三个基本设置依旧是 model / rules / prop,往常普通用的校验需要单独绑定元素,但对于遍历出来的新增数据一般不清楚有多少个,所以需要拿到当前遍历出来的索引值.model:依旧是对象,只不过在遍历情况下数据可能绑定到数组,所以可以用一个花括号包裹,形成对象即可.<el-form class="member-info" :model="{ users }" ref="userForm"></el-form>rules:对于element.原创 2020-11-15 16:28:04 · 603 阅读 · 0 评论