无妄的罪-CSDN博客

原创 Vue中嵌入原生HTML页面的方法

在Vue中嵌入原生HTML页面通常可以通过组件或页面的方式来完成。下面将详细说明如何通过组件方式实现这个功能，并提供一个简单的代码示例。

2024-02-01 20:24:46 1060

原创 Vue中的插槽Slot的使用说明

Vue.js 的插槽（Slot）是一种强大的功能，它允许你在父组件中定义可重用的模板，并在子组件中插入自定义内容。

2024-02-01 20:22:47 768

在这个示例中，我们使用动态导入来按需加载组件。在路由定义中，我们将组件设置为一个返回Promise的函数，该Promise解析为对应的组件实例。这样，当用户访问相应的路由时，对应的组件才会被加载。在这个示例中，我们使用React.lazy来动态导入Home和About组件。当用户访问相应的路由时，对应的组件会按需加载。Suspense组件用于在组件加载过程中显示加载提示。在React中，你可以使用React.lazy和Suspense组件来实现路由懒加载。在Vue中，你可以使用异步组件来实现路由懒加载。

2024-01-30 21:58:22 694

原创 Vue3的v-model说明和使用方法

Vue 3 的v-model是一个语法糖，它为表单输入和应用状态之间创建了双向绑定。这样，当用户在表单中输入时，数据会自动更新，反之亦然。

2024-01-30 21:55:32 586

原创微信小程序和uni-app的区别

【代码】微信小程序和uni-app的区别。

2024-01-26 07:58:23 987 1

原创 JavaScript（JS）和TypeScript（TS）的区别

TypeScript是JavaScript的一个超集，添加了静态类型系统和其他的语言特性。TypeScript的静态类型系统可以帮助开发者在编码阶段捕获错误，提高代码的可维护性和可读性。TypeScript也可以编译成纯JavaScript，可以在任何支持JavaScript的环境中运行。这使得JavaScript更加灵活，但也增加了代码复杂性和错误的可能性。JavaScript（JS）和TypeScript（TS）都是编程语言，它们都可以用于构建交互式的Web应用程序。

2024-01-25 22:01:08 524

原创 vue和react的运行机制

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。Vue的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。Vue和React都是现代的前端框架，它们提供了丰富的特性和工具，帮助开发者构建复杂的用户界面。虽然它们有很多相似之处，但也有一些重要的区别，特别是在运行机制方面。React是一个用于构建用户界面的JavaScript库，由Facebook开发并开源。React的核心思想是组件化开发，它提供了一种声明式的方式来构建用户界面。

2024-01-25 21:58:55 929

原创 vue 虚拟DOM的优劣说明

Vue.js 使用虚拟 DOM（Virtual DOM）来提高应用的性能。虚拟 DOM 是一种编程概念，它通过在内存中创建一个与真实 DOM 结构相同的虚拟结构，来优化对真实 DOM 的操作。下面是对 Vue.js 中虚拟 DOM 的优劣说明和代码示例。来与这些状态进行交互。当状态发生变化时，Vue.js 会自动更新虚拟 DOM 并渲染到真实 DOM 上。是组件的状态，它们存储在组件的 data 函数中。

2024-01-24 22:04:02 673

原创 Vue 模块化使用 Vuex

Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在这个例子中，我们定义了一个简单的 store，包含一个 state 和一个 mutation。在 Vue 组件中，我们使用了。在你的 Vue 项目中创建一个新的文件来作为你的 store，例如。

2024-01-24 22:01:38 781

原创 Vue的报错机制

这个错误是由于在计算属性。

2024-01-23 08:09:02 431

原创 Vue中$watch()方法和watch属性的区别

属性都是用于观察和响应数据变化的机制，但它们的用法、性能和适用场景有所不同。根据具体的需求和场景选择合适的方法来使用。属性都可以用来观察和响应Vue实例上的数据变化，但它们之间存在一些关键的区别。发生变化时，会触发相应的处理函数并打印出新的消息值。发生变化时，会触发回调函数并打印出新的消息值。属性中直接定义了处理函数，并在组件的。选项中定义了需要监听的数据属性。在上述示例中，我们使用。在上述示例中，我们使用。以下是在Vue中使用。生命周期钩子中添加了。

2024-01-23 08:07:20 622

原创在vite.config.js 配置代理

这可以让你在开发时将特定的请求代理到其他服务器或本地端口，而不需要修改源代码。下面是一个示例和说明，帮助你了解如何配置代理。请注意，代理功能仅在 Vite 开发模式下生效。在生产构建或部署时，代理设置将不会生效。你可以根据自己的需求修改代理规则，例如添加更多的代理路径或修改目标地址。这样配置后，当你运行 Vite 开发服务器时，所有发送到。在上面的示例中，我们配置了一个代理规则，将所有以。开头的请求路径替换为空字符串，即去掉。选项用于定义路径重写规则，这里将。在 Vite 中，你可以使用。

2024-01-20 20:02:47 1473 1

原创前端图片转base64 方法

在uni-app、Vue.js或其他前端框架中，将图片转换为Base64编码的过程是相似的。以下是一个简单的示例，说明如何在这些环境中使用JavaScript将图片转换为Base64编码。

2024-01-19 20:40:21 906

原创 Vue3实现响应式编程

Vue 3使用一个名为ReactiveAPI的工厂函数来创建一个响应式对象。在Vue 3中，响应式数据是通过使用JavaScript的Proxy对象实现的。以下是对Vue 3的响应式编程实现的简单说明和代码示例。被修改时，由于Proxy对象的get和set陷阱，Vue能够追踪到这个变化，并触发相应的更新。函数来创建响应式数据。函数接收一个初始值，并返回一个新的只读响应式数据。然而，这只是在Vue 3中使用响应式编程的一种方式。函数接收一个对象，并返回一个新的Proxy对象。用于创建可写的响应式数据。

2024-01-19 20:37:05 799

原创 CSS Hack是什么?ie6,7,8的hack分别是什么

CSS Hack是一种针对不同浏览器（如Internet Explorer、Firefox、Opera等）的CSS样式特殊写法，通过使用不同的CSS语法或者使用特定条件的判断语句，让CSS代码能够针对不同的浏览器进行差异化渲染，从而达到兼容的目的。在上面的代码中，通过条件注释法，针对不同的IE版本加载不同的CSS样式表文件。针对盒模型的Hack写法。

2024-01-18 15:53:59 721

原创 $(this) 和 this 关键字在 jQuery 的不同

在这个例子中，如果你点击 ID 为 "myButton" 的按钮，第二个示例中的。关键字都可以用来引用当前元素，但它们的使用场景和上下文有所不同。将输出被点击的按钮的 jQuery 对象，而不是全局对象。在 jQuery 中，

2024-01-18 15:49:16 392

原创 Vue插槽(slot)的使用

Vue插槽(slot)是一种强大的功能，它允许您在组件模板中插入自定义内容。插槽可以让你更灵活地构建组件，以满足不同的使用场景。在上面的例子中，我们为BaseCard组件定义了两个插槽：一个名为"title"的插槽和一个默认插槽。在父组件中，我们通过。标签为"title"插槽提供了自定义内容，而默认插槽则自动接收。

2024-01-17 08:10:18 366

原创 vue的sync语法糖的使用

在父组件中，使用v-model指令将子组件的prop与父组件的数据进行双向绑定，并在子组件中通过监听一个由父组件传递下来的prop的变化，当prop值发生变化时，子组件会发出一个自定义的update事件，传递新的值给父组件。在子组件中，使用v-model指令将子组件的prop与子组件的数据进行双向绑定，并在需要的时候发出一个自定义的update事件来通知父组件进行数据更新。

2024-01-17 08:06:15 545

原创 Vue3使用Pinia获取全局状态变量

Pinia 是 Vue 3 的状态管理库，用于替代 Vuex。使用 Pinia，你可以轻松地在 Vue 3 应用中管理全局状态。

2024-01-11 08:14:17 853

原创 vue上传文件时显示进度

在这个示例中，我们使用FormData对象将多个文件添加到XMLHttpRequest请求的body中。然后，我们监听XMLHttpRequest对象的上传进度事件，通过计算已上传文件的大小和总文件大小的比例来更新进度条和进度百分比。注意，我们使用了一个数组来存储每个文件的上传进度百分比，以便在模板中循环渲染每个文件的进度条。在Vue中上传多个文件并实时刷新进度条，可以通过使用HTML5的File API和XMLHttpRequest对象来实现。

2024-01-10 19:07:43 661

原创 React与Vue性能对比

React 的核心思想是将组件视为虚拟 DOM 的树形结构，当数据发生变化时，React 会计算出最小化的差异，并仅更新需要改变的部分，而不是重新渲染整个页面。React 的虚拟 DOM 使其在处理大量数据和复杂页面时具有更高的性能，而 Vue 的响应式系统和简洁的模板语法则更易于阅读和维护。Vue 则使用的是数据劫持的方式，通过观察者模式来监听数据变化，当数据发生变化时，Vue 会更新相应的 DOM。这种方式的性能相对较低，但是 Vue 的响应式系统能够有效地减少不必要的渲染，提高性能。

2024-01-10 18:59:51 1079

原创在React和Vue中实现锚点定位功能

指令的回调函数中，可以获取到页面滚动距离，并将其保存到组件的data属性中。然后，在渲染锚点时，可以根据当前选中的锚点来设置锚点的样式。最后，在锚点被点击时，更新data属性，并触发指令处理页面滚动，实现锚点定位功能。接着，在渲染锚点时，可以根据当前选中的锚点来设置锚点的样式，例如可以设置锚点的背景颜色、文字颜色等。总的来说，实现锚点定位功能需要获取页面滚动距离，并根据当前选中的锚点来设置样式。在Vue中，可以使用指令来实现。首先，需要定义一个状态变量来保存当前选中的锚点，然后在组件挂载时，使用。

2024-01-09 10:46:27 1122

原创 React路由进阶方法

懒加载路由组件：当应用规模较大时，为避免首次加载时加载过多的代码，可以将路由组件进行懒加载。路由守卫和权限控制：对于需要进行权限控制的页面，可以通过路由守卫来实现。可以在路由配置中添加中间件函数，用于验证用户的身份和权限，并决定是否允许访问该路由。路由嵌套和布局：在React中，可以将路由配置进行嵌套，以实现复杂的布局结构。可以在父级路由组件中定义公共的布局，在子级路由中渲染具体的页面内容。以上是一个简单的React中路由进阶的代码示例，展示了常见的路由功能实现。组件来包裹应用的根组件，并使用。

2024-01-09 10:41:08 294

原创 React Hooks的useState、useRef使用

是一个可以存储任意数据类型的不可变（只读）引用（比如一个 DOM 元素或一个 React 组件）。ref 是一个响应式的引用，这意味着即使它的调用点没有发生改变，它的指向也会随着组件渲染而更新。React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 和其他 React 特性。是一个允许你在函数组件中添加 state 的 Hook。是两个常用的 Hooks。

2024-01-08 21:22:28 860

原创 vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别

Vue 3.0 引入了 Composition API，这是对 Vue 2.0 中使用的 Options API 的一个补充。Composition API 提供了一种更灵活的方式来组织和重用组件逻辑，而 Options API 则更倾向于在组件实例中直接定义和操作数据和逻辑。

2024-01-08 21:17:43 560

原创 uni-app页面数据传参方式

uni-app是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、小程序等多个平台。当你在多个页面间传递参数时，通常有多种方法，例如通过、路由参数、本地存储等方式。下面是一些方法的说明和示例代码。

2024-01-07 07:56:02 1343

原创 vue3以指令的形式使用防抖事件

在 Vue 3 中，你可以使用防抖函数（debounce）来限制某个函数在一定时间内的执行频率。防抖函数通常用于优化性能，例如在用户输入时限制搜索请求的发送频率。这样，我们就可以在输入事件触发时使用防抖函数来限制。钩子中，我们将防抖函数添加到输入事件监听器中，并在。方法绑定，并使用防抖函数来限制。在上面的示例中，我们创建了一个。在 Vue 3 组件中使用。指令，它将输入事件（

2024-01-06 13:42:01 580

原创 Vue2和Vue3框架介绍以及使用

Vue3是Vue.js的最新版本，相对于Vue2，Vue3带来了许多改进和新特性。Vue3是一套用于构建用户界面的渐进式框架，不同于其他框架，Vue3被设计为可以自底向上逐层应用，核心库只关注视图层，具有易上手，与第三方库整合方便等优点。此外，Vue3还支持多种现代化的工具链以及类库，使得它能够为复杂的单页应用提供驱动。Vue2是Vue.js的早期版本，它引入了组件化的开发方式，使得开发人员可以更加模块化地构建单页应用程序。在上面的代码中，我们创建了一个Vue实例，并定义了数据和方法。

2024-01-05 13:41:38 903

原创 Vue响应式中的渲染 watcher

是一个非常有用的选项，它允许你在数据变化时执行自定义逻辑。当你需要在数据变化时执行异步或开销较大的操作时，这是非常有用的。选项中使用异步函数，这对于执行异步操作或需要等待外部资源（如 API 响应）的操作非常有用。回调函数在数据变化时只会被调用一次。如果你希望在数据变化时持续执行某些操作，可以使用。选项来监听某个数据的变化。当被监听的数据变化时，请注意，你需要在回调函数的顶部声明。回调函数就会被触发，打印出旧值和新值。，并将函数体包裹在一对括号中。在这个例子中，我们监听了。在这个例子中，我们使用了。

2024-01-05 13:33:45 606

原创 Vue实现模糊查询

当使用Vue3实现模糊查询时，你可以利用Vue的响应式特性和计算属性来实现。当输入框的值发生变化时，计算属性会自动更新，并触发重新渲染。方法会遍历数组中的每个元素，并返回一个新的数组，该数组只包含满足条件的元素。是一个计算属性，它会返回过滤后的数组。首先，你需要在你的Vue实例中定义一个数据数组和一个查询字符串。在Vue中实现模糊查询，你可以使用JavaScript的。，根据输入框的值过滤数据数组。最后，在模板中，我们使用。在上面的代码中，我们首先导入了Vue3的。然后，你可以在你的模板中使用。

2024-01-04 22:16:12 757

原创 React组件间的通信

【代码】React组件间的通信。

2024-01-04 08:29:46 790

原创 uni-app使用WebSocket

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、小程序等多个平台。在 uni-app 中使用 WebSocket，你需要先引入模块，然后创建一个 WebSocket 实例，设置相关参数，并监听各种事件。

2024-01-04 08:23:32 808

原创 JS将两个数组和合并成数组包对象格式的方法

函数来将两个数组转化为一个数据对象。假设你有两个数组，一个是键数组，另一个是值数组，你想将它们转化为一个对象。函数被用来创建一个新的对象数组，其中每个对象都有一个属性，其键来自。函数被用来合并对象，这样我们就可以得到一个包含所有属性的对象。函数被用来将这个新的对象数组合并为一个单一的对象。在JavaScript中，你可以使用。函数来将两个数组合并为一个新的数组。reduce()函数合并数组示例。在这个示例中，我们使用了。

2023-12-29 00:11:32 643

原创 uni-app绘制二维码

在这个示例中，我们首先在模板中定义了一个canvas元素，并指定了其id为"qrcodeCanvas"。然后，在data中定义了二维码数据、宽度和高度。在onReady生命周期钩子中，我们调用了drawQRCode方法来绘制二维码。在drawQRCode方法中，我们使用uni-app提供的createCanvasContext方法创建了一个画布上下文，并使用QRCode类来绘制二维码。最后，我们使用ctx.draw()方法将绘制结果绘制到画布上。

2023-12-28 23:54:36 955

原创 PS绘图，切图方法

这样就可以将绘制的图像切割并导出成为网页使用的图片文件。

2023-12-28 23:44:48 561

原创 Cannot read property ‘querySelectorAll‘ of undefined问题解决

当出现 "Cannot read property 'querySelectorAll' of undefined" 错误时，通常意味着您尝试在一个未定义或者为空的值上执行方法。这可能是由于尚未正确获取到 DOM 元素或者元素不存在导致的错误。

2023-12-27 22:05:42 870

原创 onActivated 生命周期的使用和介绍

是 Vue 3 中组件生命周期钩子的一部分，它是在组件被 keep-alive 缓存并且再次被激活时调用的钩子函数。这个钩子函数通常用于处理组件被缓存后再次显示时的逻辑。适合用于处理组件被缓存后再次显示时的数据更新、状态重置等逻辑操作。包裹的组件被切换展示时，如果该组件定义了。的值，并执行其他与组件激活相关的逻辑。钩子函数，那么该钩子函数将会被调用。在这个示例中，当组件从缓存中被激活时，下面是一个示例代码，展示了如何使用。组件中的组件从缓存中被激活时，钩子函数没有接收任何参数。钩子函数的使用和介绍。

2023-12-27 22:03:44 1480

空空如也

空空如也