vue3

vue3 基础-Vuex 全局数据状态管理

针对页面间, 组件间的数据共享问题, Vue 提供一个数据管理框架 Vuex, 早期主要是用于 Vue2 , 而现在用 Vue3 也是可以正常使用, 但在 Composition API 下则会感到这个数据管理流程不论同步还是异步, 总感觉有点繁琐和反人类, 确实是不如它的竞品 Pinia, 但还是 ......
全局 状态 基础 数据 vue3

11 11 vue3代码优化

使用axios发送异步请求是这种格式,现在异步请求都封装到api中。说法如下: 接口调用的js代码一般都会封装到js文件中,并一函数的形式暴露给外部,例如: 这张图片包括了没有参数和有参数的两种情况 然后在组件中的script中调用函数就行,但这样不行,好像跟什么同步异步有关,反正这样是无法运行的, ......
代码 11 vue3 vue

Vue3 路由查询参数更新后,执行更新方法

import { ref, defineComponent, watch,getCurrentInstance } from "vue"; import { useRoute } from 'vue-router'; export default defineComponent({ setup() ......
路由 参数 方法 Vue3 Vue

Vue - 创建 Vue3 项目

Vue - 创建 Vue3 项目 需搭建项目 Vue3 + ts + sass 1. 创建项目 npm create vite@latest 2. 安装依赖 tyarn 3. 启动项目 yarn dev 4. 处理其他配置问题 1) 打开HelloWorld.vue页面,发现一些报红,报错 解决:找 ......
Vue 项目 Vue3

vue3 Suspense

在Vue.js 3中,Suspense 是一个用于处理异步组件的特殊组件,它允许你在等待异步组件加载时展示备用内容。这对于优化用户体验、处理懒加载组件或异步数据获取时非常有用。Suspense 的主要目标是简化异步操作的状态管理和展示。 下面是一个简单的例子,演示了如何在Vue.js 3中使用Sus ......
Suspense vue3 vue

vue3 KeepAlive

在Vue.js 3中,<keep-alive> 是一个抽象组件,用于保留其子组件状态,防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive> 主要用于缓存组件,以提高性能和用户体验。 以下是一个简单的例子,演示了如何在Vue.js 3中使 ......
KeepAlive vue3 vue

vue3 Teleport

在Vue.js 3中,Teleport 是一种特殊的组件,用于在 DOM 树中的任何地方渲染其内容,而不受父组件的约束。这对于需要将组件的内容移动到 DOM 树的其他部分时非常有用,例如在模态框或弹出窗口中使用。 Teleport 提供了两个名为 teleport 和 teleport-to 的指令 ......
Teleport vue3 vue

Vite4+Typescript+Vue3+Pinia 从零搭建(2) - tsconfig配置

tsconfig配置 项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 tsconfig.json 文件修改如下: { "compilerOptions": { "target": "ESNex ......
Typescript tsconfig Vite4 Pinia Vite

Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化

项目初始化 项目代码同步至码云 weiz-vue3-template 前提准备 1. node版本 Node.js版本 >= 12,如果有老项目需要旧版本的,推荐用 nvm 管理node版本。 PS C:\Users\Administrator> nvm --version 1.1.11 PS C: ......
Typescript 项目 Vite4 Pinia Vite

11 9 学习vue3

今天创建了vue项目,了解了vue项目的目录如下: vue的组件分为组合式api和选项式api ①创建了组件内容如下: <script setup> import {articleGetAllService,articleSearchService} from '@/api/article.js' ......
vue3 vue 11

记录--vue3 setup 中国省市区三级联动options最简洁写法,无需任何库

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在写页面的时候,发现表单里面有一个省市区的 options 组件要写,因为表单很多地方都会用到这个地址选择,我便以为很简单嘛。 虽然很简单的一个功能,但是网络上能搜索到的教程大多都是需要配合 elementUI 等各种 UI 库的,但是我 ......
省市区 写法 省市 options setup

vue3中使用qrcode生成二维码

安装 npm install --save qrcode.vue or yarn add qrcode.vue 组件中使用 <script setup lang="ts"> import { useUiSetStore } from '@store/modules/uiSettings' //导入二 ......
qrcode vue3 vue

vue2,vue3的优缺点

vue2: 优点:vue2比较成熟,所以具有比较完善的第三方的插件和库的支持,和技术资源的支持和解决方案d的社区等 缺点: 对ts语法的支持有限 vue2中difff算法遍历dom树的关系,优化程度较低 vue3: 优点: 引入一些高级的api 优化了diff算法,使得性能更好,包更小 对ts的语法 ......
优缺点 vue vue2 vue3

uni-app vue3 获取元素报错问题

关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明_前端_谁凉了时光旧了少年-华为云开发者联盟 (csdn.net) ......
元素 uni-app 问题 vue3 uni

vue3异步组件

父组件中,子组件的加载一般是按照先后顺序加载的,子组件加载后才会加载父组件。 一个页面的子组件很多,由于会先加载子组件,那么父组件可能会出现比较长的白屏等待时间 大型项目,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件Vue 提供defineAsyncComponent方法: imp ......
组件 vue3 vue

vue3中使用Pinia

Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 三大核心:state(存储的值),getters(计算属性),actions也可支持同步(改变值的方法,支持同步和异步) npm install pinia@next or yarn add pinia ......
Pinia vue3 vue

vue3 使用elementUI饿了么el-table组件 动态循环自定义表头列数据

在vue3上使用el-table组件自定义循环表头列; <el-table :data="list" v-loading="loading" border> <!-- @selection-change="handleSelectionChange" --> <!-- <el-table-colum ......
表头 组件 elementUI el-table 动态

Vue3 发送get 请求 携带数据

export function Team(data = {}) { return service.request({ method: "get", url: "https://example.com/api/endpoint", // 替换成实际的API端点 params: { param1: da ......
数据 Vue3 Vue get

Uncaught SyntaxError: The requested module '/vue3-print/node_modules/.pnpm/dayjs@1.11.9/node_modules/dayjs/dayjs.min.js?v=b0e0e64f' does not provide an export named 'default' (at Upload.vue:10:8)

前提 在项目环境 vue3.3.4 + vite4.4.11 下,安装dayjs1.11.9 报错 Uncaught SyntaxError: The requested module '/vue3-print/node_modules/.pnpm/dayjs@1.11.9/node_modules ......
node_modules dayjs modules 39 node

vue3 axios 获得基地址

1.位置 //axios基础的封装 import axios from 'axios' import 'element-plus/es/components/message/style/css' import { ElMessage } from 'element-plus' const httpI ......
基地址 基地 axios vue3 vue

vue3 devtool

打开控制台,输入下面代码:var vue = app.__vue_app__ const hook = window['__VUE_DEVTOOLS_GLOBAL_HOOK__'] hook.emit('app:init',vue,vue.version,{ Fragment: 'Fragment' ......
devtool vue3 vue

vscode快捷输入vue2,vue3,模板

{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is u ......
vue 模板 vscode vue2 vue3

数据可视化 - 使用swiper制作滚动表格[vue3]

html部分 1 <div class="scroll-table"> 2 <div class="scroll-table-header"> 3 <table class="scroll-table-header__table"> 4 <colgroup> 5 <col style="width: ......
表格 数据 swiper vue3 vue

vue3+vite 代码混淆插件

安装插件 yarn add --dev rollup-plugin-javascript-obfuscator 创建obfuscator.js文件,把下面相应代码放入js文件中 import obfuscatorPlugin from 'rollup-plugin-javascript-obfusc ......
插件 代码 vue3 vite vue

vue 2 升级vue3 前端老白

vue 2 升级vue3 前端老白 原文链接:Vue 3已经发布,而Vue 2到Vue 3的升级需要一些注意点。本文将介绍Vue 2升级到Vue 3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级Vue CLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中 ......
前端 vue vue3

记录--Vue3基于Grid布局简单实现一个瀑布流组件

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表现为参差不 ......
瀑布 组件 布局 Vue3 Grid

基于vue3-pdf-app@1.0.3的Vue3 PDF在线预览

目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装: PdfView.vue父组件调用: index.vue中文配置文件viewer.properties 本文参考来自于 CSDN作者theMuseCatcher《Vue3PDF预览(vue3-pdf-app)》 认识vue3 ......
vue3-pdf-app Vue3 vue3 vue pdf

vue3.0 + ts 实现上传工厂(oss与cos)

概述 将上传基类命名为MOS(Mine Object Storage) mos.ts代码 import {MosType} from './mosConfig' import {Loading} from '../loading' import {type BinaryFile, type MosF ......
工厂 vue3 vue oss cos

Vue3 - 常用的Composition API

一、常用 Composition API 1、拉开序幕的 setup 1. 理解: Vue3.0 中一个新的配置项,值为一个函数。 2. setup 是所有 Composition API (组合 API)“表演的舞台”。 3. 组件中所用到的:数据、方法等,均要配置在 setup 中。 4. se ......
Composition 常用 Vue3 Vue API

短视频app源码,Vue3滚动加载

短视频app源码,Vue3滚动加载 Hooks useLazyLoad interface UseLazyLoadQo<T> { className: string; // 监听的dom的class calcBottomCount: number; // 计算滚动到table底部的次数 data: ......
源码 视频 Vue3 app Vue
共1438篇  :10/48页 首页上一页10下一页尾页