Vue3学习
文章平均质量分 84
剑九 六千里
我会变强,不会变秃
展开
-
vue 3 第三十七章:跨域问题
在开发Vue应用程序时,可能会遇到跨域问题。跨域问题是由于浏览器的同源策略导致的,它会阻止网页从一个域的文档或脚本访问另一个域的资源。在Vue应用程序中,我们可以通过以下几种方法解决跨域问题。原创 2023-06-15 09:53:12 · 9509 阅读 · 0 评论 -
vue 3 第三十六章:vite环境变量(.env文件的配置及使用)
通过使用.env文件,我们可以轻松管理不同环境下的配置。在Vite的应用程序中,可以使用import.meta.env对象来访问环境变量,并根据不同的环境使用不同的配置。这样可以使我们的应用程序更加灵活和易于维护。原创 2023-06-11 17:16:51 · 16080 阅读 · 1 评论 -
vue 3 第三十五章:集成 tailwind Css
Tailwind CSS 是一个实用的 CSS 框架,旨在帮助开发人员快速构建现代网站和 Web 应用程序。它提供了一组可重用的 CSS 类,可用于几乎任何类型的 UI 组件和布局。与传统的 CSS 框架不同,Tailwind 不会预定义任何样式。相反,它将样式定义为独立的类,使开发人员可以按需使用它们。例如,要添加一个按钮,只需将适当的类添加到 HTML 元素上,而不必为每个按钮编写自定义 CSS。Tailwind 还提供了广泛的定制选项,以便根据需要调整样式。这包括设置颜色,间距和字体等属性。通过。原创 2023-06-10 21:30:04 · 3712 阅读 · 1 评论 -
vue 3 第三十四章:nextTick
nextTick是Vue3中的一个非常有用的函数,它可以在下一次DOM更新循环结束后执行回调函数。这个函数可以用来解决一些异步更新视图的问题,例如在修改数据后立即获取更新后的DOM节点。原创 2023-06-06 18:23:48 · 6447 阅读 · 0 评论 -
vue 3 第三十二章:状态管理(Pinia状态持久化)
在实际开发中,我们通常需要对状态进行持久化或缓存,以便在应用程序重新加载或离线时仍然能够访问数据。在 Pinia 中,我们可以使用插件来实现状态的持久化和数据缓存。原创 2023-06-05 23:08:44 · 1230 阅读 · 0 评论 -
vue 3 第三十一章:状态管理(Pinia基础知识)
状态管理是现代 Web 应用开发中的一个重要概念。Vue 3 中的状态管理库Pinia,是一个基于的状态管理库,它提供了一种简单灵活的方式来管理应用程序的状态,同时还具有高性能和可扩展性。Pinia在某种程度上来说,也可以被叫做Vuex5,因为它结合了Vuex 5核心团队讨论中的许多想法,所以Pinia被作为新的推荐方案来代替Vuex。原创 2023-06-01 21:37:53 · 2503 阅读 · 5 评论 -
vue 3 第三十章:路由管理(Vue Router4.x应用)
基于 Vue Router 的单页应用(SPA)开发可以帮助我们构建更加流畅、高效的 Web 应用。Vue Router 提供了许多便捷的功能,例如路由导航守卫、路由重定向和动态路由等,使我们可以更加轻松地管理和控制路由,同时还可以提高应用的性能和用户体验。原创 2023-06-01 16:44:05 · 649 阅读 · 0 评论 -
vue 3 第二十九章:路由管理(Vue Router4.x基础知识)
Vue Router是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,可以轻松地构建单页面应用程序。Vue Router 允许我们在应用程序中定义路由,然后根据 URL 来匹配路由,并渲染对应的组件。Vue Router的核心概念包括路由路由器路由视图和导航守卫。路由:指URL和组件之间的映射关系路由器:指管理所有路由的实例路由视图:指根据 URL匹配到的组件导航守卫:指在路由切换时进行的一些处理操作。原创 2023-06-01 11:09:44 · 583 阅读 · 0 评论 -
vue 3 第二十八章:组件十二(组件的v-model、多v-model)
在 Vue 3 中,v-model指令的使用更加灵活,可以绑定任意属性和事件。例如,我们可以使用指令来绑定单选框或复选框的checked属性,使用来绑定自定义组件的my-prop属性。原创 2023-05-30 13:55:19 · 4004 阅读 · 0 评论 -
vue 3 第二十七章:样式(动态class、动态style)
在 Vue 中,我们可以使用动态绑定语法来动态地添加类名或样式。本章将介绍 Vue 3 中如何使用动态绑定语法来动态地添加类名或样式。原创 2023-05-26 14:18:26 · 8604 阅读 · 0 评论 -
vue 3 第二十六章:样式(scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind)
在 Vue 中,我们可以使用scoped特性来给组件的样式添加作用域。通过为组件的标签添加scoped特性,我们可以确保组件的样式仅应用于该组件的模板中,而不会影响其他组件或全局样式。原创 2023-05-25 18:55:00 · 3724 阅读 · 0 评论 -
Vue 3 第二十五章:插件(Plugins)
Vue 3 的插件系统允许我们扩展 Vue 的功能和行为,并且可以在多个组件之间共享代码和逻辑。插件可以用于添加全局组件、指令、混入、过滤器等,并且可以在应用程序启动时自动安装。原创 2023-05-25 16:17:03 · 1928 阅读 · 0 评论 -
Vue 3 第二十四章:自定义指令(dircetive)
Vue 允许我们创建自定义指令(Custom Directives),以扩展 Vue 的功能和行为。自定义指令可以用于处理 DOM 元素的交互行为、样式、动画、输入验证等方面。在本章中,我们将介绍如何创建和使用自定义指令。原创 2023-05-25 16:10:05 · 893 阅读 · 0 评论 -
Vue 3 第二十三章:组件十一(组件的最佳实践-组件设计原则和规范、组件测试和调试、组件性能优化)
这篇博客介绍了组件的最佳实践,包括设计原则和规范、测试和调试、以及性能优化。在设计组件时,应该遵循单一职责原则、可重用性、可测试性、可维护性和可扩展性,并使用 Vue 提供的选项和 API 来实现这些原则和规范。在测试和调试 Vue 组件时,应该使用 Vue Test Utils 库和浏览器的开发工具,并遵循最佳实践和规范。在进行组件性能优化时,应该根据具体情况选择适当的优化策略,并遵循最佳实践和规范。使用 Vue Devtools 插件可以帮助我们了解组件的性能瓶颈,并提供优化建议。原创 2023-05-24 10:31:46 · 772 阅读 · 1 评论 -
Vue 3 第二十二章:组件十(组件高级特性-组件的渲染函数和JSX/TSX语法)
在 Vue3 中,我们可以选择使用模板语法、渲染函数或 JSX 语法来定义组件的模板。使用哪种方式取决于我们的个人喜好和项目的需求。渲染函数可以让我们更加灵活地定义组件的模板,并且可以让我们在编写组件时使用 JavaScript 的全部语言特性。JSX 语法是一种将 XML 语法嵌入到 JavaScript 中的语法,可以让我们更加灵活地定义组件的模板。原创 2023-05-24 00:08:16 · 2322 阅读 · 0 评论 -
Vue 3 第二十一章:组件九(组件高级特性-组件的混入和继承)
Vue 中的组件混入和继承功能允许我们在多个组件之间共享代码,从而提高代码的可重用性和可维护性。使用混入可以让我们将多个对象合并为一个对象,使用继承可以让我们从一个已有的组件派生出一个新的组件。原创 2023-05-22 15:48:36 · 1923 阅读 · 1 评论 -
Vue 3 第二十章:组件八(组件高级特性-组件的全局注册和局部注册)
Vue3 允许我们在全局注册组件,这使得我们可以构建更加灵活和可扩展的应用程序。同时,局部注册可以帮助我们更好地组织代码并提高应用程序的性能。原创 2023-05-18 14:55:24 · 836 阅读 · 0 评论 -
Vue 3 第十九章:组件七(插槽)
插槽是一种在 Vue 组件中定义可复用内容的机制。它可以让你将组件的内容分发到它的子组件中,从而使得组件更具有灵活性和可重用性。 Vue3 中的插槽被称为“模板插槽”,使用时需要用到新的语法。原创 2023-05-09 18:33:17 · 778 阅读 · 0 评论 -
Vue 3 第十五章:组件五(内置组件-keep-alive)
``组件用于缓存动态组件的实例,以便在它们被切换时保持状态。例如,当我们在一个选项卡中切换不同的视图时,可以使用``组件缓存这些视图的状态,以便在切换回来时不需要重新渲染。原创 2023-04-25 11:12:10 · 637 阅读 · 0 评论 -
Vue 3 第十章:组件一(基本概念、生命周期钩子)
本文介绍了Vue3组件,其中包括了组件的基本概念、组件的生命周期钩子函数等内容。原创 2023-03-17 15:39:56 · 750 阅读 · 0 评论 -
Vue 3 第十八章:组件六(递归组件)
在 Vue3 中使用递归组件非常简单,只需要在组件的 template 中调用自身即可。递归组件在开发中非常有用,可以帮助我们处理无限级别的树形结构等复杂场景原创 2023-05-03 10:20:29 · 2457 阅读 · 0 评论 -
Vue 3 第十七章:组件五(内置组件-Suspense)
Vue3 中增加了一个名为 Suspense 的内置组件,用于在异步组件加载完成前显示占位符,避免页面空白或显示错误信息。本文将介绍 Suspense 组件的作用、用法以及相关注意事项。原创 2023-04-27 17:52:20 · 1261 阅读 · 0 评论 -
Vue 3 第十六章:组件五(内置组件-teleport)
组件用于将组件的内容插入到指定的DOM元素中,而不是插入到组件自身的位置。例如,当我们需要在一个弹出窗口中渲染一个组件时,可以使用。组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。属性指定要插入到的DOM元素的选择器(ID选择器、类选择器、标签选择器等等)。一个可重用的模态框组件可能同时存在多个实例。组件的插入和移除操作。的样式,并在页面中居中显示。组件会被禁用,这样就可以防止。在上面的代码中,我们使用。在上面的代码中,我们使用。原创 2023-04-27 16:03:54 · 1190 阅读 · 0 评论 -
Vue 3 第十四章:组件五(内置组件-transition&transition-group)
``组件用于在元素插入或删除时添加过渡效果。例如,当我们在一个列表中添加或删除项目时,可以使用``组件为这些操作添加一个动画效果。原创 2023-04-24 20:02:09 · 1944 阅读 · 0 评论 -
Vue 3 第十三章:组件四(异步组件-defineAsyncComponent)
在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 3 提供了 defineAsyncComponent 方法来实现此功能:原创 2023-04-22 16:53:26 · 1000 阅读 · 0 评论 -
Vue 3 第十二章:组件三(动态组件-component)
在 Vue 中,使用标签可以动态渲染不同的组件,可以根据变量的值来动态切换不同的子组件。vue2中is接收的是组件名称,vue3中is接收的是组件实例。为了节省性能开销,我们还可以使用shallowRef或者markRaw跳过proxy代理。原创 2023-04-22 06:00:00 · 4384 阅读 · 0 评论 -
Vue 3 第十一章:组件二(组件通信)
组件通信是 Vue 中非常重要的一个概念,它指的是组件之间传递数据和事件的过程。在 Vue 中,组件通信主要分为父子组件之间的通信和兄弟组件之间的通信两种情况。在父子组件之间的通信中,父组件可以通过v-bind来向子组件传递数据,而子组件则可以通过来接收父组件传递的数据。同时,子组件也可以通过emit触发自定义事件来向父组件传递数据。在兄弟组件之间的通信中,可以通过一个共同的父组件来实现数据的传递和事件的触发,也可以通过 Vuex 等状态管理工具来实现数据的共享。原创 2023-04-19 11:10:27 · 3132 阅读 · 0 评论 -
Vue 3第九章:WatchEffect高级侦听器
在 Vue 3 中,我们可以使用 watchEffect 函数来创建高级侦听器。与 watch 和 computed 不同,watchEffect 不需要指定依赖项,它会自动追踪响应式状态的变化,并在变化时重新运行。原创 2023-03-08 18:28:14 · 910 阅读 · 1 评论 -
Vue 3 第八章:Watch侦听器
在Vue3中,watch特性进行了一些改变和优化。与computed不同,watch通常用于监听数据的变化,并执行一些副作用,例如发送网络请求、更新DOM等。本文将介绍Vue3中watch特性。原创 2023-03-07 22:05:10 · 6389 阅读 · 0 评论 -
Vue 3 第七章:computed计算属性
computed属性是Vue3中的一个响应式计算属性,它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数,并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时,computed属性会自动重新计算其值,并触发相应的依赖更新。原创 2023-03-02 21:40:07 · 36807 阅读 · 0 评论 -
vue 3 第六章:to全家桶
这篇文章介绍了Vue3中将响应式对象的属性转换为响应式引用的toRef函数和用于将多个响应式对象的属性转换为响应式引用的toRefs函数,以及用于获取响应式对象的原始对象的toRaw函数。这些函数可以帮助我们快速创建响应式数据,实现数据的自动更新。需要注意的是,使用`toRaw`函数获取一个响应式对象的原始对象是不推荐的做法,因为原始对象不具备响应式的特性,对原始对象的修改不会触发相应的依赖更新。原创 2023-02-28 23:03:19 · 450 阅读 · 1 评论 -
Vue 3 第五章:reactive全家桶
这篇文章介绍了Vue3中用于创建响应式对象的三个函数:reactive、readonly和shallowReactive。reactive函数用于创建深层响应式对象,readonly函数用于创建深层只读响应式对象,shallowReactive函数用于创建浅层响应式对象。这些函数可以帮助我们快速创建响应式数据,实现数据的自动更新。原创 2023-02-28 14:02:39 · 914 阅读 · 0 评论 -
Vue 3 第四章:ref全家桶及源码分析
这篇文章介绍了Vue3中的ref函数、isRef函数、shallowRef函数和customRef函数。ref函数主要用于创建响应式对象,引用DOM实例,引用组件实例等。isRef函数主要用于判断传入的数据是不是响应式对象。shallowRef函数创建一个“浅层”的响应式对象,只追踪值的属性变化,而不追踪对象内部属性的变化。customRef函数可以创建自定义的引用对象,可以自定义get和set方法的实现逻辑。此外,文章还介绍了triggerRef函数原创 2023-02-27 01:36:28 · 1483 阅读 · 2 评论 -
Vue 3第三章:模板语法及指令介绍
vue3模板语法及常用指令使用场景的介绍原创 2023-02-26 11:51:46 · 1547 阅读 · 0 评论 -
Vue 3第二章:Vite文件目录结构及SFC语法
Vue3 支持使用单文件组件(SFC)来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中,使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子:原创 2023-02-24 18:42:36 · 3910 阅读 · 1 评论 -
Vue 3第一章:vue3介绍
Vue 3 是一个强大的前端框架,它包含了许多新功能和改进。在这篇博客中,我们介绍了如何安装 Vue 3,创建 Vue 3 应用程序以及一些值得关注的新功能。希望这篇文章能够帮助您入门 Vue 3,开始构建交互式的用户界面。原创 2023-02-23 14:32:46 · 1152 阅读 · 0 评论