Vue3从入门到精通(二)
vue3 侦听器 在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。 创建侦听器 可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下: ... »
vue3 侦听器 在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。 创建侦听器 可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下: ... »
## VitePress 搭建组件库文档 当我们组件库完成的时候,一个详细的使用文档是必不可少的。本篇文章将介绍如何使用 VitePress 快速搭建一个组件库文档站点并部署到GitHub上 ## 安装 首先新建 site 文件夹,并执行`pnpm init`,然后安装`vitepress和vue` ... »
Vue3之响应式 API reactive、 effect源码,详细注释 [toc] 简单记录一下 Vue3 和 Vue2 区别 > Vue3 源码采用 monorepo 方式进行管理,将模块拆分到 package 目录中 > Vue3 采用 ts 开发,增强类型检测, Vue2 采用 flow,对 ... »
Vue3简介 Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于: 更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。 更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更 ... »
## 为什么要引入 husky? 虽然我们项目中引入了`prettier`和`eslint`对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们 ... »
在写这篇文章的时候,查看了下electron最新稳定版本由几天前24.4.0升级到了25了,不得不说electron团队迭代速度之快! 前几天有分享一篇electron24整合vite4全家桶技术构建桌面端vue3应用示例程序。 https://www.cnblogs.com/xiaoyan2017 ... »
一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。 之前也有使用vite2+vue3+electronc创建桌面端项目,不过 vue-cli-plugin-electron-builder ... »
问题遇到的现象 在setup语法糖使用了defineProps,然而在定义类型的时候一旦将接口暴露出去引用就发生了报错 问题相关代码 interface Props { /* ... */ } export { type Props } <script set »
目录 插件安装与文件配置 tsx语法格式 tsx语法注意事项 在vue2的时候就已经可以使用 jsx 语法,但是不是很友好,写起来是一件很痛苦的事情,所以你很少见到有人会在vue2中书写 jsx 语法,官方也不建议我们在vue2中进行书写 jsx 的代码风格: 但随着vue3版本的到来, »
目录 引文 目录 文件内容 previewImage.vue preview.ts 使用 开发中可能遇到的问题 总结 引文 最近在用 vue3+ts 开发公司的后台系统,因为后台多处需要图片放大预览的功能,就想着封装一个v-preview指令,这样在需要预览的图片上加个 v-pr »
目录 ref() 1. ref在模板中自动解包 2. ref 在响应式对象中的解包 3. 数组和集合类型的 ref 解包 总结 ref() 接受一个值,返回一个响应式的,可以修改的ref对象,这个对象只有一个.vaule属性。 ref对象可以通过.value属性进行修改,修改后的值也是响 »
今天小编给大家分享一下vue3中怎么使用swiper的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 介绍 在 vue3 中使用 swiper, 实现轮播图的效果;如果组件样式等模块引入 »
这篇文章主要介绍“Vue3中怎么实现选取头像并裁剪”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中怎么实现选取头像并裁剪”文章能帮助大家解决问题。 最终效果 安装VueCropper组件 yarn add vue-cropper@next 上面的安 »
本篇内容介绍了“Vue2和Vue3中常用组件通信方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! Vue3 组件通信方式 props $emit expose / ref $attrs v- »
目录 前言 1、构建 2、销毁 3、断流、卡顿重连 4、报错、停滞重连 5、累计延时处理 6、手动全屏 前言 本人是在vue3中使用flv.js处理推流时,遇到的一些问题,以及处理办法,归纳总结为一个组件,仅限于推流使用。 目前只贴出部分关键代码,若需要完整的代码,请往github下载 »
目录 引言 一、Mock数据模拟的概述 1.1 为什么需要Mock数据模拟? 1.2 Mock数据模拟的优点和缺点 二、安装和配置Mock.js库 2.1 使用NPM安装Mock.js库 2.2 在Vue项目中配置Mock.js 三、编写Mock数据模拟文件 3.1 Mock.js的基本 »
目录 一,创建 Vue3 项目并安装 echarts 二,创建数据可视化组件 (一)组件内容 (二)使用组件 (三)程序解释 三,响应式刷新 更多功能可扩展 总结 记得第一次使用 echarts 还是2019年的时候,那时做的一个物联网项目云平台的前端需要一些数据可视化功能,经过一些对比 »
目录 前言 axios请求封装 请求拦截和响应拦截 接口的请求 总结 前言 对于三者放在Service.js中封装,方便使用 axios.create 的作用是创建一个新的 axios 实例,该实例可以具有自定义配置。通过使用 axios.create,您可以为任何 API 生成一个客户 »
Provide / Inject 通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。 官网的解释很让人疑惑,那我翻译下这几句话 »
目录 前言 一、父传子 defineProps 二、子传父 defineEmits 三、子组件暴露属性给父组件 defineExpose 四、依赖注入Provide / Inject 参考 总结 前言 本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3+Typ »