https://www.ifrontend.net/2023/09/vue2-convert-vue3-gogocode-2/ 片段 Vue 3 现在正式支持了多根节点的组件,也就是片段! 属于 Vue3 新增功能,不需要转换。 // Vue2.x <!-- Layout.vue --> <template> <div> <header>...<...
vue2 项目升级 vue3 之 gogocode 代码转换规则覆盖情况(实践一)
vue2 项目技术支持到底还能有多久? 从官方发文来看,Vue 2.7 是当前、同时也是最后一个 Vue 2.x 的次级版本更新。Vue 2.7 会以其发布日期,即 2022 年 7 月 1 日开始计算,提供 18 个月的长期技术支持 (LTS:long-term support)。在此期间,Vue 2 将会提供必要的 bug 修复...
Vue3.js store 状态管理库 pinia,Composition API 使用更友好
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。同时支持 vue2 和 vue3。 安装 yarn add pinia 使用 创建一个 pinia 并将其传递给应用程序 // main.ts import { createPinia } from 'pinia' createApp(App).use(createPinia()).use(router).mount('#ap...
vue2/vue3 Composition Api 常用工具集, @vueuse/core 之核心函数 time 实践
useDateFormat 格式化日期格式 格式入参,使用方法类似 dayjs 格式输出信息描述YY18两位数年份YYYY2018 年四位数的年份M1-12这个月,从1点开始MM01-12月份,2位数MMM1月-12月缩写的月份名称MMMM1月-12月完整的月份名称D1-31每月的哪一天DD01-31月份的哪一天,2位数H0...
vue2/vue3 Composition Api 常用工具集, @vueuse/core 之核心函数 animation 实践
useInterval 响应式计数器增加 const options = { controls?: false, immediate?: true, callback?: (count: number) => void, } <script lang="ts" setup> import { useInterval } from '@vueuse/core' const counter = useInterval(200) </script> &...
为什么 引入 element-ui 组件库,要放在引入路由 vue-router ./router 前面
Element UI 是一个基于 Vue.js 的开源 UI 组件库,用于构建 Web 应用程序的用户界面。它提供了一套丰富的可复用的组件,包括按钮、表单、对话框、导航菜单、表格等,帮助开发者快速构建美观、易用的界面。 今天试了下,element-ui 的引入顺序居然也有坑。。 import Vue ...
vue2 项目升级 vue3 之 gogocode 实践初识
GoGoCode GoGoCode 是一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具,你可以用它来构建一个代码转换程序来帮你自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: JavaScript(JSX) Typescript...
React & Immer 不可变数据结构的处理
Immer 是一个 immutable 库,核心实现是利用 ES6 的 proxy,几乎以最小的成本实现了 js 的不可变数据结构,简单易用、体量小巧、设计巧妙,满足了我们对JS不可变数据结构的需求。无奈网络上完善的文档实在太少,所以自己写了一份,本篇文章以贴近实战的思路和流程,对 Im...
vue2/vue3 Composition Api 常用工具集, @vueuse/core 之核心函数 array 实践
useArrayDifference Reactive get array difference of two array <script lang="ts" setup> import { ref } from 'vue' import { useArrayDifference } from '@vueuse/core' const list1 = ref([0, 1, 2, 3, 4, 5]) const list2 = ref([4, 5, 6]) cons...
vue3.js 3.3.x 发布新特性之 defineModel
以前,为了使组件支持与v-model双向绑定,它需要(1)声明prop,(2)在打算更新prop时发出相应的update:propName事件: <script lang="ts" setup> const props = defineProps([ 'modelValue' ]) const emits = defineEmits(['update:modelValue']) const ...