- 博客(112)
- 收藏
- 关注
RSS订阅原创 vue项目，打包发布之后资源没有加载文件存在缓存，导出报错问题：
②在src目录下创建一个params文件夹（随意命名都可以，我自己命名的是params）,在其下创建versionUpdate.js文件。以下代码是访问打包后的version.json文件，如果发现当前 保存的version版本跟当前不一致，则重新加载界面！注：在本地开发的时候public下最好也新建一个version.js文件，不然本地会报错。定义一个版本号为当前时间的时间戳，设置打包后的导出文件为version.json。①在项目的根目录下，创建一个script文件夹，新建一个generate.js。
2023-05-26 15:28:51
1012
原创 Vue常见问题
②vue在patch过程中判断两个节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕他们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。④从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，他的值就是undifined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量DOM更新操作，明显是不可取的。...
2022-08-09 13:36:21
757
原创 JS中的深拷贝和浅拷贝
2、深拷贝深拷贝就是增加一个指针，并申请一个新的内存，并且让这个新增加的指针指向这个新的内存地址使用深拷贝，但我们修改复制对象时，原对象不会发生变化。1、浅拷贝浅拷贝只拷贝了那个对象的内存地址，当只发生改变时，两者都会同时发生变化。...
2022-07-22 14:35:47
1908
原创 Vue3中watch和watchEffect的用法
watch函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。watch(source,callback,[options])参数说明：source：可以支持string，Object，Function，Array；用于指定要侦听的响应式变量callback:执行的回调函数options：支持deep、immediate和flush选项侦听reactive定义的数据import {defineComponent,ref,reac
2022-05-24 15:47:02
1030
原创 28个Javascript数组方法
1、Array.map()map() 方法创建一个新数组，这个数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。const list=[1,2,3,4];list.map(item=>item*2);//[2,4,6,8]2、Array.filter()filter()方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素const list=[1,2,3，4]list.filter((item)=>item%2===0);//[2,4]3、Array.red
2022-05-13 14:03:32
394
原创 antd中，国际化切换是，form表单错误提示不及时更新问题
在开发中，我们可能会遇到使用国际化i18n的情况，但是当我们切换语言时，form表单的错误提示却不能及时更新，这时我们可以选择行内校验法，在者就是，使用this.$refs.form.resetFilds()来进行情况校验...
2022-05-12 17:28:38
1356
1
原创 小程序picker组件，iOS不兼容问题
在小程序的开发中，我们可能会遇到组件不兼容的问题，例如picker组件，在picker组件中有两个属性start和end分别对应开始和结束日期，在安卓环境下，可以正常显示年份但是iOS却显示NAN等，那是因为iOS下我们要将日期的格式显示成yyyy-MM-dd的形式，不然则会出现“意外”哦！<picker mode="date" value="{{startDate}}" start="1900-01-01" fields="month" bindchange="bindDateChange">
2022-05-11 16:31:35
2084
原创 Vue3中vuex的使用
Vuex主要解决跨组件通信的问题。在vue3中，需要使用Vuex v4.x版本。安装用npm或者yarn安装到项目中。npm install vuex@next --save# 或yarn add vuex@next --save使用安装成功后，在src目录下创建store目录，再在store下创建index.js文件//store/index.jsimport {createStore} from 'vuex'export default createStore({ state:
2022-03-25 11:17:34
1586
原创 几种css小技巧
1、画三角形//html<div class="box"> <div class="box-inner"> <div class="triangle bottom"></div> <div class="triangle right"></div> <div class="triangle top"></div> <div class="triangle left"></d
2022-03-24 14:29:28
413
1
原创 ES新增运算符
1、 运算符???? 运算符是ES2020引入，也被称为null判断运算符，用??代替||，用于判断运算符左侧的值为null或undefined，才返回右侧的值。它的行为类似 || ，但是更严||运算符是左边是空字符串或false或0等false值，都会返回后侧的值。二??必须运算符左侧的值为null或undefined时，才会返回右侧的值。因此0||1的结果为1,0??1的结果为0例如const response={ settings:{ nullValue:null, heig
2022-03-16 15:55:24
664
原创 使用vuex中的数据刷新界面数据消失问题
在vue中，我们可以使用vuex来存储数据，但是会出现一个问题，就是刷新当前界面数据会恢复原状，此时我们有两种解决方案1、使用localStorage或者sessionStorage来存储数据，使用setItem存数据，getItem读取数据2、可以引入vuex-persist插件，他就是为Vuex持久化存储而生的一个插件。不需要你手动存取storage，而是直接将状态保存至cookie或者localStorage中，具体用法如下：①安装插件npm install --save vuex-pers
2022-03-14 16:40:26
1625
原创 TypeScript中的?.是什么意思
符号 ？代表是否存在TypeScript 在 3.7 版本已实现了此功能 const user = { name: 'domesy' } //ES11之前 let a = user && user.name //现在 let b = user?.nameconsole.log('a',a)//domesyconsole.log('b',b)//domesy
2022-03-07 16:37:11
605
原创 同步与异步，async/await
1、同步与异步概念同步：就是后一个任务等待前一个任务执行完毕后，再执行，执行顺序和任务的排列顺序一致异步：异步是非阻塞的，异步逻辑与主逻辑相互独立，主逻辑不需要等待异步逻辑完成，而是可以立刻继续下去console.log('a')console.log('a')console.log('a')setTimeOut(()=>{console.log('饭卡找到了')},2000)console.log('a')console.log('a')2、ajax(jquery)cons
2022-03-02 17:36:20
967
原创 vue3.x项目中，出现红色波浪线问题
在vue3.x项目中出现红色波浪线问题一般有以下几种情况：1、引入错误：当前引入的组件或者api不存在2、组件和api存在正常的情况下，还出现红色波浪线，如下：这种情况是eslint引起的，你可以再VScode中关闭eslint校验，另外一种情况是你的项目必须是独立存在于一个VSCODE中的，不允许有叠加项目，不然编译器就会将其解析成其他的版本，你引入的是Vue3.x版本，但是编译器可能会解析成Vue2.x版本，就会出现不识别vue3语法的问题，出现以上的红色波浪线。...
2022-03-02 15:07:14
7711
原创 vue3.0中其它 Composition API
三、其它 Composition API1、toRaw与markRaw①toRaw：作用：将一个由reactive生成的响应式对象转为普通对象使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新②markRaw：作用：标记一个对象，使其永远不会在成为响应式对象应用场景：有些值不应该设置为响应式的，例如复杂的第三方类库等；当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能2、customRef作用：创建一个自定义的ref，并对其依赖项跟踪
2022-02-23 18:32:44
550
原创 Vue3.0的常用的Composition API
一、常用的Composition API1、setup的使用①setup是vue3.0中一个新的配置项，值为一个函数②setup是所有Composition API（组合API）③组件中所有用到的：数据、方法等等，均要配置到setup中④、setup函数的两种返回值：若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用若返回一个渲染函数：则可以自定义渲染内容⑤注意点：尽量不要与vue2的配置混用：1、vue2配置（data，methods，computed……）中可以访问到s
2022-02-22 16:41:29
1164
原创 vue3的基本认识
1、Vue3带来了什么①性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%②源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking2.拥抱TypeScriptVue3可以更好的支持TypeScript3.新的特性① Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与inject
2022-02-17 11:35:47
491
原创 小程序中插入广告
小程序流量主可开通广告位包括：小程序Banner广告位、激励式广告位、视频前贴广告位（仅限非游类目小程序）、视频广告（仅限非游类目小程序）、小程序格子广告、小程序原生模板广告。1、小程序Banner广告广告位置：小程序页面内，由小程序流量主决定实际播放位置。产品形态：广告外层为纯图片或“图片+按钮”的卡片形式，点击外层图片或按钮将跳转指定落地页2、激励式广告广告位置：开发者在小程序中自定义广告入口与奖励，用户主动点击，触发广告适用于的场景：①获取积分：观看广告可获得额外的签到/分享积分②获
2022-02-16 16:59:24
11696
原创 哪些情况会造成小程序违规或下架
1、避免诱导分享。在页面中不要出现“分享”、“强制转发”等字眼，更不要提示用户下载APP、转发微信群、分享红包等。具体有以下几种类型：①强制诱导分享后才可以继续下一步操作。包括但不限于分享后方可解锁功能或能力，分享后方可查阅，下载图片或视频等。②诱导用户分享到群或其他好友，完成分享至群或好友即可获得利益包括但不限于分享后即可获得礼品（包括但不限于现金，红包，实物奖品虚拟奖品等）③诱导分享至朋友圈可获得包括但不限于：现金奖励，实物奖品，虚拟奖品（红包，优惠券，代金券，积分，话费，流量，信息等）④以与客
2022-02-14 13:43:40
5839
原创 vue中的computed和watch的区别及用法
区别①watch:1、主要用于监控vue实例的变化，它监控的变量必须在data中声明才可以；2、一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据3、支持缓存，只有依赖数据发生改变，才会重新进行计算4、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化②computed1、用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向绑定展示出结果或者作其他处理2、支持缓存，只有一来数
2022-02-11 11:52:21
1104
原创 Vue中的插件-----简单使用
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：1、添加全局方法或者 property。如：vue-custom-element2、添加全局资源：指令/过滤器/过渡等。如 vue-touch3、通过全局混入来添加一些组件选项。如 vue-router4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。5、一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router插件的功能：用于增强Vue本质：包含i
2022-02-10 17:04:19
574
原创 vue中的mixin混合的简单使用方法
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。简单的案例：在A组件和B组件中都有一个相同的方法，showName,此时可以将showName方法抽离出来，mixin.js，并且暴露出去，在A组件和B组件中使用**import {mixin} from '…/mixin.js’和mixins:[mixin]**将其导入，即可实现点击方法//A组件<te
2022-02-10 16:26:24
648
原创 Vuex的基本使用
1、安装vuex依赖包npm install vuex --save2、导入vuex包import Vuex from 'vuex'Vue.use(Vuex)3、创建store对象const store=new Vuex.Store({ //state中存放的就是全局共享的数据 state:{count:0}})4、将store对象挂载到vue实例中new Vue({ el:'#app', render:h=>h(app), router, //将创建的共享数据对象
2022-02-10 14:25:20
1476
原创 vue中的project和inject
project和inject：提供/注入**用处：**父组件可以向其所有子组件传入数据，而不管子组件层次解构有多深特性有两部分：1、父组件有一个provide选项来提供数据2、子组件有一个inject选项来开始使用这个数据<template> <div> <h1>{{msg}}</h1> <item_a /> </div></template><script>import
2022-02-10 13:31:46
2735
1
原创 vue中的时间总线（EventBus）
如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。EventBus的简介EventBus又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。如何使用？一、初
2022-02-09 11:29:48
984
原创 常规git操作指令
git config --global user.name “你的名字” 让你全部的git仓库绑定你的名字git config --global user.email “你的邮箱” 让你全部的git仓库绑定你的邮箱git init 初始化你的仓库git add . 把工作区的文件全部提交到暂存区git add ./file/把工作区的file文件提交到暂存区git commit -m “xxx” 把暂存区的所有文件提交到仓库区，暂存区空空荡荡git remote add origin htt.
2022-01-21 17:26:11
133
原创 Git的基本使用
1、git配置命令查询配置信息列出当前配置：git config --list列出repository配置：git config --local --list列出全局配置：git config --global --list列出系统配置：git config --system --list第一次使用git,配置用户信息配置用户名：git config --global user.name “your name”;配置用户邮箱：git config --global user.email
2022-01-20 10:35:58
237
原创 小程序中七牛云上传图片问题uploadFile：fail url not in domain list
在小程序中上传图片，需要设置domain:https://域名***但是在上线之后，可能无法实现上传图片问题，出现uploadFile：fail url not in domain list*问题，此时我们需要在小程序后台设置uploadFile中包括自己的域名和七牛云所在区的域名...
2022-01-17 18:00:19
859
原创 vue中的$parent / $children与ref
ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用的就是组件实例$parent / $children:访问父/子实例需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或者访问数据。我们闲来看个用ref来访问组件的例子：//component-a子组件export default{ data(){ return{ title:'Vue.js' } }, methods:{ sayHello(){ window..
2021-12-31 10:29:57
979
原创 小程序中如何将开始日期和结束日期连接成一个字段
例如：let startDate=‘2020.11.19 17:30’let endDate=‘2021.11.19 17:30’this.setData({totalDate:${startDate}-${endDate}})最终的效果： 2020.11.19 17:30-2021.11.19 17:30
2021-12-03 09:44:08
372
原创 微信小程序--父子间传值
1、父组件向子组件传值//父组件<tabs tabs="{{tabs}}" binditemChange="handleitemChange" id="tab"> <block wx:if="{{tabs[0].isActive}}">0</block> <block wx:elif="{{tabs[1].isActive}}">1</block> <block wx:elif="{{tabs[2].isActive}}"&g
2021-10-29 13:58:23
740
原创 微信开发者工具最新版本的调试器中不显示AppData和Storage选项问题
当我们下载最新版本的微信开发者工具时，会发现调试器中不显示AppData和Storage选项，我们可以打开电脑C盘找到 C:\Users\你的用户名\AppData\Local\微信开发者工具\User Data\一串MD5\WeappPlugin这个文件删掉，再重新启动就可以了，AppData和Storage就会显示在调试器面板上...
2021-10-22 10:57:58
2767
5
原创 Vue中的mixins的用法
Mixins:则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象和方法，可以理解为形成了一个新的组件。混入（mixins）:是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。怎么用？//新建一个mixin.js,在其中定义混入对象export const hunhe={ methods:{ showName(){ console.log(this.name) } }
2021-08-09 11:51:32
284
原创 vue中父子组件传值Prop&$emit
1、父组件向子组件传值//父组件.vue<template> <div> <Child name="张三" sex="女" :age="18" /> </div></template><script> import Child from './components/Child' export default{ name:"Parent", conponents:{Child} }</script&g
2021-08-09 11:15:41
449
原创 vue中的ref属性和props属性
1、ref属性的定义与用法：①被用来给元素或子组件注册引用信息（id的替代者）②应用在HTML标签上获取的真实DOM元素，应用在组件标签上是组件示例对象（VC）③使用方式：//打标识：<h1 ref="XXX">//获取this.$refs.XXX2、配置项props：功能：让组件接收外部传过来的数据①传递数据：<Demo name="XXX"></Demo>②接收数据第一种方式（只接收）：props:["name"]第二种方式：prop
2021-08-05 16:16:31
1512
原创 vue2.0和vue3.0生命周期对比
通过下表，我们可以看到，原有的生命周期基本都是存在的，并且新的命名更加至关，通过on前缀可以直观的看到，这是一个生命周期函数vue2.0生命周期vue3.0生命周期beforeCreate（组件创建之前）setup（组件创建之前）created（组件创建完成）setup（组件创建之前）beforeMount（组件挂载之前）onBeforeMount（组件挂载之前）mounted（组件挂载完成）onMounted（组件挂载完成）beforeUpdate（数
2021-08-05 16:05:20
491
1
原创 Vue3.0中reactive和ref的区别
ref:主要用于基本类型（number、string、null、Boolean、undefined）的响应。ref如果要修改它的值只能使用.value进行修改reactive：主要用于引用类型（object、array、function、data）的响应//以下是两者的用法代码<script> import {ref,reactive} from "vue" setup(){ const str=ref("vue3.0") const obj=reactive({name:"张
2021-08-04 09:48:36
266
原创 常用的操作数组的方法汇总
1、some和everysome是任意一项都返回true，则返回true，找不到则返回false，而every是每一项都返回true时才会返回true，不然则返回false.//示例----somelet arr=[1,2,3,4,55,56]let result=arr.some(function(item,index){ return item.toString().indexOf(5)>-1});console.log(result);//false//示例---everyl
2021-07-28 15:32:25
246
原创 Vuex的基本使用
1、安装vuex依赖包npm install vuex --save2、导入vuex包import Vuex from 'vuex'Vue.use(Vuex)3、创建store对象const store=new Vuex.Store({ //state中存放的就是全局共享的数据 state:{count:0}})4、将store对象挂载到vue实例中new Vue({ el:'#app', render:h=>h(app), router, //将创建的共享数据对象
2021-07-09 15:53:53
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人