Vue3
Vue3 学习总结
&活在当下&
这个作者很懒,什么都没留下…
展开
-
Vue3 项目环境变量配置(Vite)
它的主要作用让开发者区分不同的运行环境,读取不同环境的相关配置信息,比如开发环境和生产环境使用不同的 API 前缀等。Vite 是通过 import.meta.env 对象暴露环境变量的。Vite 使用从你的也可以配置额外的额环境变量,我们需要在根目录新建 .env[mode] 文件,并且环境变量必须以 VITE_ 开头,才会暴露给经过 vite 处理的代码。只有会被暴露为提供给客户端源码,而则不会。环境变量通常可以从获得。注意:Vite 默认是不加载.env。原创 2024-09-29 09:41:12 · 417 阅读 · 0 评论 -
Vue3 自定义指令
Vue3 自定义指令原创 2024-09-28 17:34:32 · 526 阅读 · 0 评论 -
Vue3 插件封装
实际开发项目的时候,有些组件需要再项目的很多地方调用,比如弹框、loading组件,这个时候我们可以封装一个全局插件,然后直接在项目的入口文件(main.js或main.ts)中进行引入、注册,就可以在项目的各个地方使用了。创建一个 vuePlugin 文件夹,在该文件夹下创建一个 index.vue 文件和一个 index.ts 文件。原创 2024-08-26 11:18:15 · 342 阅读 · 0 评论 -
Vue3 v-model 指令用法详解
注:在 Vue3 中 v-model 是破坏性更新的,v-model 其实是一个语法糖,通过 props 和 emit 组合而成。原创 2024-08-23 13:16:08 · 545 阅读 · 0 评论 -
Vue3 自动引入 api 插件 unplugin-auto-import
以上配置完成后重启,就可以无需 import 导入,直接使用 ref、watch、reactive、computed 等 api 了。原创 2024-08-23 12:22:35 · 196 阅读 · 0 评论 -
Vue3 组件通信
允许组件通过发送和接收事件来传递数据,而不需要直接相互引用。(事件总线)是一种常见的跨组件通信方式。以上就实现了兄弟之间的组件通信。在 Vue3 中,使用。原创 2024-08-15 14:36:40 · 141 阅读 · 0 评论 -
Vue3 依赖注入Provide / Inject
在实际开发中,我们经常需要从父组件向子组件传递数据,一般情况下,我们使用 props。但有时候会遇到深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦,代码可维护性差。Vue3 提供的 provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。:组件深层嵌套的情况下,祖先组件需要给后代组件传值。原创 2024-08-13 18:29:45 · 759 阅读 · 0 评论 -
Vue3 v-bind 指令用法
指令用于将表达式的值绑定到 DOM 元素的属性上。这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进。表示默认的作用域插槽,你可以在该插槽内访问所有传入的数据。: 你可以创建自己的自定义指令来扩展Vue的功能。钩子函数,并在模板中使用自定义指令的名称和绑定的值。是一个布尔值,当它为真时,按钮会添加一个名为。是一个字符串或对象,它决定了当前显示的组件。在这个例子中,你需要在自定义指令的定义中提供。是动态计算的属性名,它们对应的值分别存储在。然后在模板中使用这个自定义指令。在 Vue 3 中,原创 2024-08-13 17:39:37 · 623 阅读 · 0 评论 -
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。原创 2024-08-13 11:12:51 · 319 阅读 · 0 评论 -
Vue3+Vite+TypeScript 搭建Vue3项目笔记
现在 Vue3+Vite+TypeScript 搭建的项目越来越受到公司的欢迎,今天也来搭建一下,为了兼容老项目,这里只能用现有版本的 node,目前我的node 版本是 v14.19.3。原创 2023-12-19 16:20:56 · 525 阅读 · 0 评论 -
Vue3 插槽用法详解
你可以把插槽想象成是预留给父组件填充内容的占位符。这样一来,父组件就可以根据需要插入HTML结构或者其他组件了。插槽分为:匿名插槽、具名插槽、作用域插槽。原创 2024-08-12 18:49:52 · 658 阅读 · 0 评论 -
Vue3 中全局组件、基本组件、递归组件的用法详解
因为 B 组件只能在 A 组件内使用,所以是局部组件;在 main.ts 中引入组件 A ,然后使用 app 调用 component,第一个参数是组件名称,第二个参数是组件实例(原理跟我们写 js 递归是一样的,自己调用自己,通过一个条件来结束递归,否则会导致内存泄漏。有些组件使用频率非常高,几乎每个页面都在使用,这时候我们可以把它封装成全局组件。其实就是在一个组件内(A)通过 import 去引入别的组件(B)。注意:切记不能放到mount 后面,这是一个链式调用。原创 2024-08-12 16:11:21 · 530 阅读 · 0 评论