coderkey-优快云博客

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。watch()一共有三个参数第一个参数：侦听器的源，可以为以下几种：以函数形式返回一个值；一个ref；一个reactive响应式对象或者由以上类型的值组成的数组。第二个参数：侦听源发生变化时调用的回调函数。这个函数接受三个参数分别是新值，旧值，用于注册副作用清理的回调函数（可选，可忽略）；当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

2024-06-26 22:58:09 999

原创 vue2和vue3数据代理的区别

vue2的双向数据绑定是利⽤ES5的⼀个 API ，对数据进行劫持结合发布订阅模式的方式来实现的。vue3中使⽤了ES6的Proxy代理对象，通过reactive()函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的代理操作。

2024-06-23 18:44:04 695

原创 vue3父组件获取子组件的实例对象

在父组件的模板里，对子组件的标签定义。属性，并且设置属性值，在方法里获取。

2024-06-22 19:24:52 724 1

原创 vue3父子组件通信

子组件中通过emit调用父组件中的自定义事件，给父组件的这个方法里传入数据数据。在父组件的模板中使用子组件标签，并且给标签自定义属性和属性名，即通过。绑定数值，而后传给子组件；

2024-06-22 02:20:01 580

原创 vue3爷孙组件通信——provide和inject

这样子第一代组件的数据就可以传递给第三代组件使用了，数据还是响应式的。

2024-06-22 01:23:28 374 1

原创 vue3兄弟组件通信之第三方库/插件-mitt工具

进行组件与插槽内容之间的通信，或者使用。和事件进行父子组件之间的通信，使用。中推荐的兄弟组件通信方案是通过。子组件 Test1.vue。子组件 Test2.vue。

2024-06-21 17:22:57 339

原创 vue3插槽slot的使用

vue3如何使用插槽slot？方式：默认插槽，具名插槽，作用域插槽

2024-06-21 01:42:26 551

原创 vue3页面传参

例子：a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数。在路由router.ts配置。

2024-06-20 19:57:32 1710 1

原创 Vite+Vue3安装且自动按需引入Element Plus组件库

【代码】Vite+Vue3安装且按需引入Element Plus组件库。

2024-06-18 11:51:51 749 1

原创解决 Set `“volar.inlayHints. eventArgumentInInlineHandlers“: false`...的问题

在vscode上开发vue3项目，模板写函数事件老是出现。在内联处理程序中隐藏事件参数。上面翻译过来就是：设置。

2023-03-07 20:00:00 4115

原创 nvm的使用与安装

安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包。安装nvm之前，如果有单独安装过node的，需要把node卸载掉。然后解压nvm-setup.zip安装包，进入解压的文件夹，双击exe后缀文件进行安装。安装完毕后，找到自己安装的路径做一些配置，打开setting.txt 文件（可以不做配置）下面这个是nodejs的安装位置，新建一个node文件夹。文件中（这是配置镜像源）

2023-03-06 20:00:00 426

原创同一电脑上安装且使用vue2.0和vue3.0版本

卸载全局安装的vue版本。（注：自行百度搜索如何卸载全局vue2vue3脚手架）想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目，如何实现？在自己想要的位置上，新建两个文件夹分别命名为。配置环境变量（自己用的win10）在系统变量上分别配置。

2023-03-01 16:28:59 1135 1

原创 vue实现同一页面点击当前不同tab页展示不同内容并且选中变色

【代码】vue实现同一页面点击当前不同tab页展示不同内容并且选中变色。

2023-02-21 11:21:27 759

原创 vue前端接受后台返回流数据，并实现文件正常下载

注意：请求接口的响应类型是responseType: ‘blob’后台返回二进制文件流，前端实现下载excel文件；

2022-12-20 15:59:34 2011 2

原创纯前端vue框架实现excel 导出

【代码】纯前端vue框架实现excel 导出。

2022-12-20 14:42:07 424 1

原创 vue2中watch的使用

（2）把要监听的msg值看作对象，利用hanler方法来进行监听。（2）可以只监听对象的其中一个属性值 ’对象.属性‘ 的形式。（1）把要监听的msg值看作方法名，来进行监听。（1）（一维、多维）数组的变化不需要深度监听。（2）数组对象中对象属性变化监测需要使用。深度监听，多少层内产生变化都可以监测到。（1）监听对象需要用到深度监听，设置。字符串，布尔值，number。

2022-12-16 16:38:15 26296 2

原创 javascript函数方法中bind、call、apply的使用和区别

一个数组或者类数组对象，其中的数组元素将作为单独的参数传给。值和参数调用该函数的返回值。若该方法没有返回值，则返回。当目标函数被调用时，被预置入绑定函数的参数列表中的参数。方法不会立即调用函数，而是返回一个修改。返回一个原函数的拷贝，并拥有指定的。只有两个参数，第二个参数为数组；传参相同，多个参数依次传入的；参数传递给目标函数的值。都是对函数进行直接调用，而。值和参数的函数的结果。接收的第一个参数都是。

2022-12-15 15:08:44 466

原创博球一看，优快云与你共观世界杯

进球后，他们狂奔着，欢笑着，拥抱着庆祝。四年一次，这段岁月里，虽不算太长，可是，却包涵着多少拼搏、汗水、成功和失败，还包容着球迷的期待、观望、欣喜和狂热，所有这些，会永久地经成为了值得留恋的回忆。2022卡塔尔世界杯不知不觉已接近尾声，不仅让人感叹，乌拉圭，巴西，葡萄牙都已淘汰，四强诞生分别是阿根廷，法国，摩洛哥，克罗地亚，非常期待梅西和魔笛的对决，也希望今年梅西捧起大力神杯…我们期待着本届世界杯，能给我们留下更多的看点、更多的悬念、更多的精彩、更多的经典、更多的思考，让这场足球盛宴，刻下一座永恒的丰碑。

2022-12-11 23:09:02 324 1

原创在vue开发中会遇到methods方法里有一个函数嵌套另一个函数，最内层函数this取不到data数据，该怎么解决？

在vue的methods方法中两个函数互相嵌套，最内层函数this取不到data数据。（1）给最外层函数this重新赋值给一个变量。

2022-12-08 17:01:37 3859 1

原创浅拷贝的实现方式

一，Object.assign() 方法二，ES6展开运算符…三，数组合并方法 concat()四，数组剪裁方法 slice()五，注意：浅拷贝拷贝的是引用，它们共享同一块内存，当引用的值改变时，另外一个也会跟着改变;

2022-12-07 23:05:07 326 1

原创深拷贝的实现方式

一，递归递归去复制所有层级属性二，用JSON对象的parse和stringify实现三，注意（1）深拷贝，是拷贝对象各个层级的属性；（2）与方法，只能拷贝第一层属性，他们都不是真正的深拷贝；

2022-12-07 16:30:08 1209

原创前端如何在接口返回字符串类型的数值转化在浏览器中转化为对应文字并且逗号隔开

一，问题后端接口中返回字符串类型的数值如何转化在浏览器中转化为对应文字用逗号隔开0代表微信 1代表QQ 2代表邮件 3代表语音二，方法第一步：假设后端返回的数据第二步：映射类型定义一个数组第三步：数据处理写在计算属性里第四步：模板展示第五步：测试结果处理前处理后三，完整测试代码

2022-12-07 11:56:10 1015

原创 vue移动端适配方案：amfe-flexible和postcss-pxtorem插件结合

一，问题用vue开发一个h5移动端项目需要做适配；二，适配方案第一步：安装两个插件第二步：在main.js文件中导入amfe-flexible第三步：postcss.config.js中配置postcss-pxtorem第四步：测试结果

2022-12-05 16:55:41 1009 1

原创 vue如何修改title标签中的htmlWebpackPlugin.options.title

如何修改title标题。文件，并且添加如下代码。

2022-10-27 10:12:44 989

原创 nginx配置同一域名同一端口下部署多个vue项目

本地开发好了多个前端微信网页项目，想部署上线，但是微信那边必须得在默认端口下访问前端项目，于是就nginx配置同一域名同一端口下部署多个vue项目。根据根路径不同分别代理访问不同项目，刚好解决这个问题。默认端口就只有一个，多个项目实现不了。文件夹，然后放在对应的位置上，配置。以上全部搞完之后就可以访问了；

2022-08-22 16:42:46 8442 2

原创 vue移动端/pc端适配插件：postcss-px-to-viewport

重新运行后发现，不仅vant相关组件的单位被转换成了vw，而且其比例也就没有问题了。: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!vant团队的是根据375px的设计稿去做的，理想视口宽度为375px;,这表示：所有css属性的属性的单位都进行转化，除了。插件，将px单位自动转换成viewport单位；而自己的设计稿750px，这样就出现比例问题；是因为适应不同的操作系统，在mac下结果为。，而在windows下结果为。文件里配置以下代码；文件里配置以下代码；...

2022-08-18 15:07:07 4334 7