cozy666的博客

原创 微信小程序自定义组件---父子组件通信

有三种方式。

原创 微信小程序---自定义组件

组件实例刚被创建好的时候，created生命周期函数会被触发此时还不能调用setData，只应该用于给组件的this添加一些自定义的属性字段 个人觉得类似于vue中的beforeCreated组件完全初始化完毕，进入页面节点树后，attached生命周期函数会被触发此时this.data已经被初始化完毕，这个生命周期很有用，绝大多数初始化工作可以在这个时机进行（例如发送请求获取初始化数据） 个人觉得类似于vue中的created在组件离开页面节点树后， detached 生命周期函数会被触发。

原创 微信小程序---wxs脚本

此处例子是在wxs标签内提供module，名为m1，然后将toUpper方法exports出去，在外面就可以直接调用toUpper方法，通过m1.toUpper(username)调用使用外联的wxs脚本。

原创 微信小程序---生命周期

小程序从启动->运行->销毁的过程。

原创 微信小程序-页面导航---导航传参

3.在onLoad中接收导航参数。

原创 微信小程序---页面导航

微信小程序---页面导航（声明式导航、编程式导航）

原创 TypeError: Cannot set properties of undefined (setting ‘xx‘)

在调用接口访问后端数据时，前端渲染显示空白，并报此错。例如，我在调用高德地图，输入经纬度信息，希望得到地址名称，我将返回给我的地址赋值给data中的realAddress，代码写为this.realAddress = address，此时就会报错。方案一：回调函数使用箭头函数来使用。普通函数的this默认指向window，箭头函数this与。this指向的对象发生了变化（现在this代表axios对象），需要在函数前将this指向的对象提前保存一下。中的this指向同一个地方，继承了他的父级。

原创 前端学习微信小程序开发

1.微信小程序项目结构。

原创 Vue3小兔鲜电商前台项目总结

在directives内定义懒加载插件import { useIntersectionObserver } from '@vueuse/core',懒加载的核心逻辑是当图片进入到视口区域,就把url赋值给src,但是这样做会存在重复监听的问题,useIntersectionObserver对于元素的监听是一直存在的,除非手动停止监听,存在内存浪费 虽然图片已经加载完毕了,但是鼠标滑动时仍然在监听。解决方案,加入stop,让他对于已经加载好的图片停止监听,不再重复监听。例如,将home页拆分。

原创 前端了解一点Docker的概念

Docker 是一个开源的应用容器引擎，可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。我们知道，软件的安装是要区分系统环境的；即使是运行环境相同，依赖的版本一旦有所出入，也容易出现“我这里明明好使，你那里为啥不行“的问题。容器技术解决了与的问题。因此，容器是我们的项目的运行环境，而docker是容器的运行环境与管理平台。

原创 正则表达式

整体效果：/^\S{6，15}$/{6，15} 长度为6到15位。

原创 引入Element Plus组件库

https://element-plus.org/zh-CN/

原创 vue-router4

routes配置路由规则。

原创 vue3工具的升级

一些优势：比同类工具快2倍左右、节省磁盘空间安装方式：npm install -g pnpm创建项目：pnpm create vue。

原创 Vue3----Pinia快速入门

Pinia是Vue最新的状态管理工具，是Vuex的替代品。

原创 解决vue+antd中组合组件校验问题

form-model-item中加入prop=‘workPerson’，并在rules中写入对应的校验规则。，我明明选择了但还是提示校验失败。究其原因，应该是这个校验并没有监听到我内部组件的变化，所以认为没有值。工作人员中包含了角色和工作人员，平且以一个数组的形式存储，在平时组件校验中，我们只需要在。判断数组中是否有这两个值，如果有的话就成功，没有的话就提示‘请选择工作人员’解决方案：将workPerson校验规则写成这种形式。，并在data中去定义checkSelect。但这样做会出现一个问题，

原创 如何在computed中去传递参数

我们会发现，如果直接在template中{{count(item)}}，至于为什么这么写我还没想明白，有人知道的话可以告诉我一下不。所以为了解决这个问题，需要将computed改为。} 这样的代码会报错。

原创 当需要将两个异步请求接口返回的值拼接成一个数据时

当需要将两个异步请求接口返回的值拼接成一个数据时，如果将两个异步请求并列写，则会出现一个结果有值，一个结果没有值，究其原因，由于这两个请求是异步的，我们并不知道哪个请求会先得到结果，在我们去打印拼接的值时，就会出现undefined。所以，我们需要将一个异步请求放在另一个异步请求的回调当中，等一个请求结束就去调用另一个请求，这样我们才能拿到完整的拼接后的值。

原创 vue子组件修改数据库的数据，页面没有更新问题

但是这个方法并没有成功，究其原因：我刷新是在子组件去重新调接口 然后把接口返回的结果重新赋值给了我要渲染的地方，但是我调用接口的时机是在点击审核通过的时候，此时抽屉已经关闭，再重新点查看进入抽屉，之前赋值的又被原来未更新的row给覆盖了。点击查看出现的一个抽屉，抽屉的数据是通过父组件传过来的，其中审核流程是一个数组，我点击审核通过，相当于往数组里面追加了一条记录，追加完后我就关闭抽屉并刷新页面，再去打开抽屉，发现数据并没有更新。

原创 Vue3.3新特性

用于定义Options API的选项，props、emits、expose、slots除外（因为这些可以通过defineXXX来做到）这种方式写法较为复杂，为了解决这个问题，提出了defineModel。先定义一个modelvalue，然后直接对这个值进行操作。

原创 在循环中调用后端接口，.then的数据只有最后一次循环调用返回的值

这意味着在循环中，前一次循环的Promise对象还没有执行完毕，下一次循环的Promise对象就已经开始执行了。因此，只有最后一次循环的Promise对象能够成功返回数据，并且它的数据会被赋给。方法来处理返回的数据，每次循环都会发起一个请求并返回一个Promise对象。然而，由于JavaScript中的Promise是异步的，并且。方法会在下一个事件循环中执行，因此每次循环的Promise对象都会串行执行。方法来等待所有Promise对象都执行完毕，并返回一个包含所有数据的数组。

原创 挑战一天学习vue3----组合式API

①setup执行时机比beforeCreate执行时机还要早②setup函数中，获取不到this③数据和函数需要在setup最后return，才能在模板中应用 定义数据+函数④加入setup后，不用再去return所有的数据和函数。

原创 挑战一天掌握vue3

create-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供极速响应。①前提环境条件 已安装16.0或更高版本的Node.js②创建一个Vue应用 npm init vue@latest 这一指令将会安装并执行create -vue。

原创 vue----mixins

用于页面逻辑复用的封装，封装的函数可以是包含了组件内部各种属性或者状态，这时可以用mixins。在mixins文件夹中新建loginConfirm.js。在需要使用到这个方法的页面区去使用。

原创 前端项目文件命名规范

采用小驼峰方式命名，如有复数结构时(此文件夹包含文件夹)，采用复数命名法，如：components、assets。采用大驼峰方式命名（首字母大写），如：SimpleCard。采用小写 + 短横线的方式命名，如bill-manage。），如：userInfor.js、admin.css。采用小驼峰命名规则（第一个单词首字母小写，后面的。

原创 移动端项目中的vw适配

1.基于postcss插件实现项目vw适配。

原创 vant组件库的使用

vant是用于vue的移动端组件库。

原创 vue---vuex

官方解释：vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）例如：购物车数据、个人信息数据。

原创 vue---基于VueCli自定义创建项目

原创 vue----组件缓存keep-alive

问题：从“面经”点到“详情页”，又点返回，数据重新加载了---->希望回到原来的位置。原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了。2.deactivated 失活时，离开页面组件看不见触发。include也可写在keep-alive标签中。，如果没有配置name，才会找文件名作为组件名。1.actived 激活时，组件被看到时触发。include:组件名数组，表示在组件内部。exclude和max一般配套使用。被缓存的组件会多两个生命周期钩子。

原创 Vue---VueRouter

router,最终效果。

原创 vue---插槽

</slot>②使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）语法：在<slot>标签内，放置内容，作为默认显示内容<slot>我是后备内容

原创 vue学习---$nextTick

原因：vue是异步更新DOM（提升性能），需要等DOM更新后再触发这个方法。场景：点击编辑按钮，弹出编辑框，让编辑框立刻获取焦点。解决：this.$nextTick（（）=>{}）问题：弹出编辑框后，无法立刻获取焦点。

原创 vscode快捷键

再使用鼠标拖动，可出现竖直的列光标，并且也能同时选中多列。，再按键盘向上或者向下的键，可以使一列上出现多个光标。4.文件内容所有折叠： ctrl+k，ctrl+0。5.文件内容所有展开：ctrl+k，ctrl+J。3.先点击某一位置，按住。，可以在每行末尾出现光标。2.选中一段文字，按。

原创 如何安装脚手架Vue CLI（集成了webpack配置）

3.创建项目架子：vue create project-name (项目名不能用中文) 注意在什么路径下创建项目。1.全局安装一次：yarn global add @vue/cli 或 npm i @vue/cli -g。4.启动项目：yarn serve 或 npm run serve (找package.json)2.查看vue版本：vue --version。

原创 在vue中调用后端接口时，何时使用async/await，何时使用promise

使用async/await可以使异步代码看起来像同步代码一样，避免了回调地狱（callback hell）的问题，并且可以更好地处理错误。在Vue中调用后端接口时，使用async/await可以使异步操作更加简洁和易于管理，但并不是必须的。在Vue中，如果你选择使用async/await来调用后端接口，你可以在组件的方法中定义一个异步函数，并使用try/catch来处理错误。但是，你也可以选择使用Promise或其他异步处理方法，这取决于你的个人偏好和项目需求。

原创 vue学习----computed vs. methods

作用 语法 缓存 是否可以以修改 computed计算属性 封装一段对于数据的处理，求得一个结果 作为属性，直接使用，{{计算属性名}} 计算属性会对计算出来的结果缓存，再次使用直接读缓存，依赖项变了，会自动重新计算->再次缓存（性能高） 通常只能读取访问，不能修改。如果非要修改，可以在set中修改 methods方法 给实例提供一个方法，调用以处理业务逻辑 作为方法，需要调用，{{方法名（）}} 无缓存

原创 js学习---数组的方法

filter：根据条件，保留满足条件的对应项，得到一个新数组，他不会改变原数组。reduce接收两个参数，第一个参数是求和逻辑，第二个参数是起始值。操作：通过id删除数组中的对应项，可以用filter。操作：对数组里面的num进行求和，可以用reduce。

原创 vue2学习----vue指令

例如 ：class=“{类名1：布尔值，类名2：布尔值}” 适用场景：一个类名，来回切换。例如 ：style=“{css属性名1：css属性值，css属性名2：css属性值}”v-on：click="count++" 等价于@click="count++"v-bind:src="imgUrl" 等价于 :src="imgUrl"v-on：click="fn()" 等价于@click="fn()"：class=“[类名1，类名2]” 适用场景：批量添加或删除类。①v-on：事件名=“内联语句”

原创 如何判断this的绑定对象

如何判断this