![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue系列
文章平均质量分 64
关于Vue
xxx割喉
这个作者很懒,什么都没留下…
展开
-
为什么Vue和React都选择了Hooks?
Vue 和 React 都选择了 Hooks 的设计模式,这是因为 Hooks 提供了一种更简单、更可维护、更可复用的方式来处理组件状态和副作用,相对于之前的类组件模式,Hooks 提供了更灵活的开发体验和更好的性能优化机会。总之,Vue 和 React 选择使用 Hooks 是因为它们提供了更简单、更灵活、更可维护的方式来管理组件状态和副作用,同时具备更好的性能优化潜力,这些特点有助于提高开发效率和代码质量。可以看到,使用 Hooks 的函数组件更简洁,不需要创建类,不需要使用。你可以在多个组件中使用。原创 2023-11-08 10:50:50 · 120 阅读 · 0 评论 -
Vue项目图片预览v-viewer插件使用
v-viewer 是一个基于 Vue.js 的图片查看器组件,它允许你在项目中轻松地实现图片的查看和放大功能。在项目中使用 v-viewer 非常简单,下面是一个详细的介绍和如何在项目中使用的示例。通过以上步骤,你就可以在你的 Vue 项目中使用 v-viewer 来实现图片查看的功能。然后,在模板中,我们展示了单个图片和一个图片集合,当用户点击图片时,调用。组件被用作容器来包裹图片元素,这样就可以在图片上启用图片查看器功能。3.1 一旦你安装并配置了 v-viewer,你可以在你的组件中使用。原创 2023-11-07 13:47:45 · 3509 阅读 · 2 评论 -
Vue3快速上手
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。原创 2023-09-20 16:46:47 · 321 阅读 · 2 评论 -
Vue2学习重点总结(Vue配置和使用+Vue脚手架配置代理+Vuex+Router)
组件化编码流程:(1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:1).一个组件在用:放在组件自身即可。2). 一些组件在用:放在他们共同的父组件上(状态提升(3).实现交互:从绑定事件开始。props适用于:父组件 ==> 子组件 通信子组件 ==> 父组件 通信(要求父先给子一个函数)原创 2023-09-08 15:01:39 · 571 阅读 · 0 评论 -
Vue全局组件与局部组件(详解)
全局组件适用于应用中需要在多个地方重复使用的组件,而局部组件适用于特定组件内部的、局限于某个上下文的组件。根据组件的复用性和作用域需求,你可以选择适当的方式来注册和使用组件,以构建出更可维护和模块化的 Vue 应用。全局组件适合于那些在整个应用中都需要用到的组件,比如通用的导航栏、页脚、弹出框等。这意味着它们只能在父组件的模板中或父组件的子组件中引用。局部组件适合用于那些只在特定情景下需要使用的组件,比如一个特定页面或区域的功能性组件。要在一个组件内注册局部组件,你需要在该组件的。原创 2023-08-23 17:46:56 · 1348 阅读 · 0 评论 -
Vue状态管理实战:从零到一掌握Vuex在Vue项目中的运用
这只是一个基本的例子,帮助你入门使用Vuex。实际应用中,你可能会使用模块化来组织Vuex的代码,处理更复杂的状态管理需求。当你在Vue项目中使用Vuex时,你正在使用一个专门用于状态管理的库,它有助于更好地组织、共享和更新应用程序的状态。下面是一个详细的步骤,演示如何在Vue项目中使用Vuex。首先,你需要确保在你的Vue项目中安装了Vuex。允许你在存储中派生出一些状态,类似于计算属性。这将是你的Vuex存储的入口文件。的文件夹,然后在该文件夹中创建一个名为。对象中,你可以定义应用程序的初始状态。原创 2023-08-18 15:53:33 · 139 阅读 · 0 评论 -
Vue脚手架——Vue-cli的安装和使用
Vue CLI(脚手架)是一个用于快速搭建 Vue.js 项目的官方命令行工具。它提供了项目初始化、开发服务器、构建等功能,使你能够更轻松地开始和管理 Vue 项目。以上是使用 Vue CLI 创建和运行项目的基本步骤。Vue CLI 提供了丰富的命令和选项,以及插件系统,让你能够轻松地扩展和定制项目的开发环境。这将启动一个交互式的命令行界面,你可以根据提示来配置项目的各种选项,如预设、特性等。这将编译项目并启动一个开发服务器,你可以在浏览器中访问。构建完成后,你会在项目目录中的。原创 2023-08-18 15:26:22 · 126 阅读 · 0 评论 -
Vue实例生命周期中的所有钩子函数
每个钩子函数都有其特定的用途,你可以在相应的阶段执行一些逻辑,从而实现不同的功能。Composition API 阶段的。需要注意的是,在 Vue 3 中,被认为是「已弃用」或「不推荐使用」的生命周期钩子函数有:beforeDestroy。钩子与 Options API 阶段的其他钩子是分离的,但你可以在。你应该尽量遵循官方文档的建议来使用适当的生命周期钩子函数。钩子中访问 Options API 阶段的数据和方法。替代)和 activated。替代)、destroyed。(使用 unmounted。原创 2023-08-18 15:17:15 · 392 阅读 · 0 评论 -
Vue计算属性传参(computed)
在 Vue 中,计算属性是一种方便的方式来处理复杂的逻辑和动态计算,而且它们也可以接受参数。通过传递参数给计算属性,你可以根据参数的不同值来返回不同的计算结果。计算属性是一个返回函数的计算属性。在模板中,我们可以像调用普通函数一样调用这个计算属性,并传递一个参数来计算折扣后的价格。需要注意的是,在计算属性内部使用函数来接受参数,这样可以确保计算属性在每次使用时都可以根据参数重新计算,而不会缓存结果。这只是一个简单的示例,你可以根据自己的需求传递不同的参数给计算属性,从而实现更复杂的计算逻辑。原创 2023-08-18 15:08:16 · 1373 阅读 · 0 评论 -
Vue3手写api之reactive、readonly、ref
Vue 3 中的响应式编程 API 主要包括 reactive、readonly 和 ref。这些 API 允许你创建具有响应式行为的数据对象。下面是手写这些 API 的简单示例:原创 2023-08-18 15:02:23 · 442 阅读 · 0 评论 -
必读的Vue3基础知识
全局自定义指令在main.js中定义局部自定义指令在当前组件中定义// main.jsel.focus()})// 引入store定义函数// 定义store实例并导出// 第一个参数,字符串类型,唯一不可重复,作为库id来区分不同库// 第二个参数,以对象形式配置存储库的state、getters、actions/**state,存储全局状态必须是箭头函数:为了在服务器端渲染的时候避免交叉请求导致数据状态污染*/原创 2023-07-28 16:18:12 · 185 阅读 · 0 评论