码海扬帆：前端探索之旅-CSDN博客

原创使用vite创建一个v3应用

它是 Vue 官方的项目脚手架工具。已安装 18.3 或更高版本的。// yarn 安装。

2024-05-20 09:47:04 313

因为将一个普通的js对象传入new vue的实例作为data选项 ,vue将遍历对象所有的属性 , 并且使用Object.defineProperty 把这些属性全部转化为getter与setter ,然后它们就成为了响应式的数据。使用 Object.defineProperty 方法为 model 的每个属性定义自定义的 getter 和 setter。这是要定义或修改的属性的名称。这是你要在其上定义或修改属性的目标对象。函数，从而更新视图中的显示内容。函数，更新显示区域中的内容。

2024-05-20 00:13:24 1132

原创 Vue solt插槽(v2v3)实战详解

在实际开发中，两种写法可以根据个人习惯和代码风格选择使用。通常情况下，如果只有一个作用域插槽并且不需要指定特定的插槽名称，可以使用。实际上，这两种写法在功能上是等价的，它们都可以用于定义作用域插槽并传递数据到子组件。是用于在父组件中传递内容到子组件的一种机制。它允许你在父组件中定义一些内容，并在子组件中使用。如果需要指定具名插槽的名称，可以使用。标签来插入这些内容，从而实现父子组件之间的内容传递和复用。使用插槽接收父组件传递的内容。是用于具名插槽的分配语法。，成为了更加简洁的写法。

2024-05-17 10:41:05 314

原创 Vue filter实战详解

是一种用于在模板中对数据进行格式化的功能。它可以用来对数据进行处理、过滤或格式化，然后在模板中直接使用。是一种全局的 Vue 实例方法，可以在任何组件的模板中使用。可以在模板中使用多个过滤器，它们会按顺序执行。在 Vue 实例创建之前，可以通过。符号将过滤器名称添加到表达式中。在模板中使用过滤器时，通过。在 Vue.js 中，

2024-05-17 09:47:33 230

原创 vue watch使用详解

immediate监听。在Vue实例创建时，处理函数会立即执行一次，不必等到。当你需要深度监听对象或数组内部值的变化时，可以使用。是一个用来监听数据变化并执行相应操作(1. immediate立即执行监听。2. deep（深度监听）data里面的数据变化)设置为一个初始值，并使用。的值发生变化才开始执行(值默认时就会执行一次。

2024-05-16 18:00:30 405

原创 Vue.component v2v3注册(局部与全局)组件使用详解

这种方法的好处是，你可以在任何其他组件中直接使用它，无需在每个文件中导入。在实际应用中，通常推荐使用局部注册来管理组件的可复用性和可维护性，因为它避免了全局污染，而全局注册则适用于项目范围内广泛使用的组件。全局注册是在Vue实例（根组件）创建之前注册的组件，一旦注册，这个组件在所有的子组件中都可以使用。这种方法的好处是，你可以在插件中注册多个组件。注意：在Vue 3.x中，全局组件的注册方式有所不同。在Vue中，可以通过两种方式注册组件：局部注册和全局注册。选项注册的组件，仅在当前父组件及其子组件中可用。

2024-05-15 19:07:30 374

原创 Vue.directive注册(全局与局部)自定义指令使用详解与实战

Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) })：在 install 方法中，使用 Object.keys(directives) 获取 directives 对象的所有键名（即 draggable 和 longpress），然后通过 forEach 循环遍历这些键名。布局自定义指令：注册了布局自定义指令后，可以在 Vue 模板中使用该指令。Vue自定义指令有全局注册和局部注册两种方式。

2024-05-15 19:00:49 1197

原创 vue props接收组件数据(类型配置)

"props"接收的常见传参类型有以下几种：String：字符串类型。required：是否必传, true必传，false 非必传。Function：函数类型。,Boolean：布尔类型。Function：函数类型。Boolean：布尔类型。default：默认值。String：字符串类型。Number：数字类型。Object：对象类型。type：传参的类型。Number：数字类型。Object：对象类型。Array：数组类型。Array：数组类型。

2024-05-15 10:31:24 426

原创 Vue中的全局事件总线：EventBus与$bus的比较详解与实战应用

定义了 $bus 属性的 get 方法，当我们在组件中使用 this.$bus 访问时，实际上是在获取 EventBus 这个 Vue 实例。这个实例将作为我们的事件总线，用于在 Vue 组件之间进行事件通信。因此，虽然这两种方式都可以实现全局事件总线的功能，但在使用上有一些细微的差别。// 发送名为 'custom-event' 的事件，可以携带额外的数据。// 创建一个全局的事件总线并挂载到 Vue 原型上。// 监听名为 'custom-event' 的事件。// 监听名为'sendMsg'的事件。

2024-05-14 23:53:41 772

原创 Unexpected token, expected “from“ (2:18)

没仔细的时候我以为是label-loader的依赖问题，又研究的小半天，没有效果。最后竟然发现是引入字段写错了的问题，是在对自己有点无语了。所以说写代码，一定要认真看仔细。在代码中，import语句中的关键字"form"应该是"from"。这是一个常见的拼写错误，但是它会导致JavaScript解析器无法正确解析你的代码，从而导致语法错误。

2024-05-14 17:38:58 391

原创 error Component name “Child4“ should always be multi-word

这是因为单单一个单词可能与HTML的内建标签或者其他组件的名称产生冲突，从而导致意外的行为。不过这不是推荐的做法，因为它可能会导致项目中出现更多的命名冲突。如果你不想改变组件的名称，可以在ESLint的配置文件（例如。这个错误是来自于ESLint的规则，它强制要求组件的名称。将组件的名称改为多单词组合，例如，将。或其他任何不会与现有单词冲突的组合。

2024-05-14 13:16:10 440

原创一个能显示 boss 直聘职位时间的插件

将下载的插件解压boss-show-time-gh-pages，然后打开扩展程序。选中解压的文件boss-show-time-gh-pages，打开控制台，发现boss直聘已经将相应的时间字段没有返回。虽然说不能使用了 , 总的来说感兴趣的小伙伴可以尝试一下。选择gh-pages，点击code下载.zip压缩包。然后看到了显示的时间内容如下，如下图, 即可使用打开。

2024-05-13 16:08:42 614

原创 document.body.contentEditable让开发者在网页中轻松实现可编辑

document.body.contentEditable是一个属性，用于控制网页中元素的可编辑性。当你将这个属性设置为"true"时，你就可以在网页上编辑文本内容，包括输入、删除、拖拽等操作，就像在一个富文本编辑器中一样。这个属性常常被用来创建可编辑的网页内容，比如在线文档编辑器、博客编辑界面等。

2024-05-13 15:16:14 355

原创 Vue 项目中使用防抖与节流

在上述代码中，handleSearch函数使用了防抖函数debounce，在输入框的@input事件中触发搜索操作。handleScroll函数使用了节流函数throttle，在滚动事件中触发滚动处理逻辑。在某个事件触发后，间隔一段时间执行函数，如果在这段时间内再次触发该事件，则忽略该事件。常见的应用场景是滚动事件，当用户滚动页面时，只在一定时间间隔内执行滚动处理函数。在某个事件触发后，延迟一段时间执行函数，如果在这段时间内再次触发该事件，则重新计时。），然后在需要使用的组件中引入并使用它们。

2024-05-13 13:41:27 256

原创 Node npm yarn全局安装与国内镜像切换

注：这将清除npm缓存目录中的所有文件。需要注意的是，这可能会导致重新下载项目的依赖，因此在执行此命令之前，请确保重要的依赖您已备份了。因为电脑是window10的,所以我选择的是(window安装包).msi的64位,直接点击下载,如果是其他系统找对应的下载安装就行了。注：这将清除yarn缓存目录中的所有文件。和清除npm缓存一样，在执行此命令之前，请确保重要的依赖您已备份了。清除缓存：npm cache clean --force。查看缓存路径：yarn cache dir。2.设置成淘宝镜像 (旧)

2024-05-13 13:37:15 713 1

原创 UNI-APP生成小程序太阳码

和获取小程序码的逻辑封装成两个独立的函数，提高了代码的可读性和可维护性。在需要获取小程序码的地方直接调用。这样可以提高代码的可维护性和可读性。）的逻辑进行整合和优化，确保在。的有效性自动刷新或直接使用旧的。过期时能够自动刷新并获取新的。和获取不限制的小程序码（

2024-05-13 13:03:50 333 1

原创 UNI-APP根据用户设备的操作系统来实现文件预览功能01

这样写优点：可以提高代码的可读性、可维护性，并且增加了错误处理机制，确保程序在异常情况下也能正确处理。

2024-04-28 10:07:46 182 3

原创 UNI-APP使用了防抖函数debounce来处理收藏按钮的点击事件

这段代码使用了防抖函数debounce来处理收藏按钮的点击事件，在点击收藏按钮时会发送一个POST请求到指定的接口地址，并根据返回的结果做相应的处理，最后通过setTimeout重新渲染数据。这段代码在Uni-App中的确可以发挥作用，但有一些地方可以进行优化和改进。首先，确保在Vue或Uni-App的组件中正确引入和使用防抖函数。你可以在export default之前定义debounce函数，这样它就可以在整个组件中被使用。其次，建议对debounce函数进行一些改进，比如增加一个立即执行的选项

2024-04-26 15:02:41 184

原创 UNI-APP块级元素行级展示

UNI-APP块级元素行级展示

2024-04-10 21:15:25 199

原创 js 去除图片之间的间距

当鼠标悬停在图片上时，边框变为黑色，但这仅是为了演示，你可以根据需要调整边框样式或去除悬停效果。使用了 Grid 布局来自动填充列，每列的最小宽度是 300px，并且使用了。使用Flexbox 和 Grid 布局，同时去除图片之间的间距。在现有的 Flexbox 布局上稍作调整，通过将。通过给图片添加了一个透明的边框来占位，同时利用了。设置了宽度为 100% 以充满其容器，并使用。来实现多张图片一行排列并去除图片之间的间距。函数计算了每个图片的宽度，并且通过。来确保图片之间没有额外的空白间隔。

2024-04-10 21:00:42 189 1

原创 UNI-APP 获取video视频实际宽高

- 在模板中使用 video 标签，并绑定 loadedmetadata 事件到 onVideoLoaded 方法 -->

2024-03-02 15:09:17 475

原创 object-fit属性(可以用于img和video元素)，以控制它们的内容如何适应其容器

object-fit 是一个CSS属性，用于指定替换元素（如img或video）的内容如何填充其容器。object-fit: cover是该属性的一个值，它保证内容的宽高比保持不变，同时尽可能大地填充其容器，可能会裁剪掉一些内容以适应。

2024-03-02 14:58:16 533

原创 UNI-APP 分包使用(详解与实战)

4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。

2024-03-02 14:31:17 735

码海扬帆：前端探索之旅的博客

原创使用vite创建一个v3应用

原创 Vue 双向数据绑定的原理(MVVM)

原创 Vue solt插槽(v2v3)实战详解

原创 Vue filter实战详解

原创 vue watch使用详解

原创 Vue.component v2v3注册(局部与全局)组件使用详解

原创 Vue.directive注册(全局与局部)自定义指令使用详解与实战

原创 vue props接收组件数据(类型配置)

原创 Vue中的全局事件总线：EventBus与$bus的比较详解与实战应用

原创 Unexpected token, expected “from“ (2:18)

原创 error Component name “Child4“ should always be multi-word

原创一个能显示 boss 直聘职位时间的插件

原创 document.body.contentEditable让开发者在网页中轻松实现可编辑

原创 Vue 项目中使用防抖与节流

原创 Node npm yarn全局安装与国内镜像切换

原创 UNI-APP生成小程序太阳码

原创 UNI-APP根据用户设备的操作系统来实现文件预览功能01

原创 UNI-APP使用了防抖函数debounce来处理收藏按钮的点击事件

原创 UNI-APP块级元素行级展示

原创 js 去除图片之间的间距

原创 UNI-APP 获取video视频实际宽高

原创 object-fit属性(可以用于img和video元素)，以控制它们的内容如何适应其容器

原创 UNI-APP 分包使用(详解与实战)

原创 UNI-APP 小程序自定义分享功能

原创 UNI-APP 微信扫描小程序太阳码跳转到指定页面

原创探索“祖传代码”的奥秘：程序员们的智慧传承

原创 echart 饼图基础配置

原创 UNI-APP uni.chooseLocation使用及省市区编码获取

原创 wangeditor5富文本编辑器的vue版本使用

原创 vue富文本图片自适应屏幕大小与内容的非空效验

原创 element ui自定义上传:表单+批量导入excel数据

原创 UNI-APP APP中实现 PDF 文件预览功能(02)

原创 elementUI前端配合后端接口请求生成.xlsx表格

原创 ElementUI previewSrcList图片预览滚动条自动上滑至初始位置缺陷修复

原创报错:fail privacy permission is not authorized

空空如也

空空如也