后部vue vue2 vue3
Vue路由params、query传参用法，以及form表单回车自动提交问题
一、路由参数用法 1.1 query参数 第一种方式传参：跳转路由并携带query参数，注意to的字符串写法 将id和title拼接字符串形成地址 <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`"> ......
vue实现下载附件功能
两种方式下载： 第一种：直接a标签下载 <a class="item-btn download" :href="'/xxx/xxx/download?id=' + xxx.id" :download="xxx.name">下载附件</a> 第二种： <el-button class="item-bt ......
vue-quill富文本编辑器实现图片缩放
安装环境 官网：https://vueup.github.io/vue-quill/guide/modules.html npm安装：npm install @vueup/vue-quill@latest --save pnpm安装：pnpm add @vueup/vue-quill@latest ......
Windows服务器，通过Nginx部署VUE+Django前后端分离项目
目录 基本说明 安装 Nginx 部署 VUE 前端 部署 Django 后端 Django admin 静态文件（CSS，JS等）丢失的问题 1. 基本说明 本文介绍了在 windows 服务器下，通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口，服务 ......
vue中this.$refs的使用方法和遇到的问题
this.$refs ：用于操作真实的DOM节点。 在开发时碰到了一个小需求，需要子组件向父组件传参，而且是不需要通过事件传递的，一开始使用this.$emit()来写的，但是一直没有接受到参数，于是放弃了使用this.$emit()的使用。 于是，使用了在父组件中调用子组件的方法，来获取传递的参数 ......
VS Code 配置Vue3模板
配置用户代码片段 搜索vue 配置模板 { "vue3": { "prefix": "vue3", "body": [ "<template>", " <div>", " </div>", "</template>", "", "<script setup lang=\"ts\">", "impor ......
OpenTiny Vue 3.12.0 发布：文档大优化！增加水印和二维码两个新组件
TinyVue 3.12.0 主要更新：全面优化 54 个高频组件的 Demo / API 文档，让文档更加清晰易懂、符合预期；Watermark 水印组件；QrCode 二维码组件。 ......
[Vue] vue学习笔记(8): 生命周期(vue2)
vue里的生命周期，也叫生命周期回调函数，是指vue在一些关键时刻引用的特定函数，这些函数的名称是确定的，这些函数中的this指向vue实例或组件实例 挂载流程 0️⃣初始化生命周期和事件，但数据代理还未开始 1️⃣beforeCreate() ➡️ 此时无法通过vue实例访问data中的数据以及m ......
vue解析上传的json文件信息
1.模版 <a-upload name="layoutFile" v-model:file-list="fileList" @change="importModules" accept="*" :showUploadList="false" :customRequest="() => {}" :he ......
Vue2 的@hook 、 hook: 与生命周期
如何实现父组件监听子组件的生命周期 方法一：$emit // 父组件 <template> <div> <Child @mounted="onMounted" @updated="onUpdated" @beforeDestroy="onBeforeDestroy" ></Child> </div> ......
【Nginx/IIS】解决uniapp/Vue history模式下页面刷新404
uniapp/Vue 开启History模式 本地开发：二级页面刷新或者通过链接进入二级页面是正常的 打包部署后：二级页面刷新或者通过链接进入二级页面会报错404页面找不到 解决方案： Nginx配置： 在nginx.conf的对应location里配置一行代码 try_files $uri $ur ......
如何使用Visual Studio 2022创建基本Vue.js.Web应用程序
最近接了个物联网项目，需要用到 VUE Ant-Design 对于 vue 没有概念 只能查找相关 vue.js 的知识。 了解vue.js 的 前提条件 是要对 HTML +CSS +Jscript 有一定的知识储备。 所以 又去看了看 对应的三剑客（HTML +CSS +Jscript）。 跟着 ......
vue3视频播放器组件vue-video-player
1、安装 npm i vue3-video-play --save 2、全局注册 import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css app.use( ......
基于vue2开发的html5页面实现微信分享卡片（微信好友+朋友圈+qq好友+qq空间）
首先附上文档链接： 1.微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111 2.免费生成二维码的草料官网：https://cli.im/text/other 需求： 在浏览器分享链接时 ......
vue中孙子调用爷爷组件的方法怎么调用?
使用Vue的provide和inject来实现跨层级的组件通信。 provide允许一个祖先组件（爷爷组件）提供数据， 而inject允许子孙组件（孙子组件）在任意层级注入这个数据。 通过这种方式，你可以在孙子组件中访问到爷爷组件提供的方法。 以下是一个简单的例子： // 在爷爷组件中提供方法 ex ......
a-table(AntDesign Vue)实现表格行上下拖动排序
参考链接： https://blog.csdn.net/song_de/article/details/125218350 https://blog.csdn.net/m0_61342618/article/details/132556739?utm_medium=distribute.pc_rel ......
vue中this.$set()的使用
data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新； 但在实际开发中，遇到过一个坑：若data中数据类型较为复杂，方法methods中改变对象的属性，而页面并不会改变 原因是vue监听不到数据类型特别复杂的属性。 可以使用this.$set()来进行强制更新，进而解决问题 ......
vue webpack 配置babel es6转化转化es5
1、安装相关依赖 npm i -D @babel/core@7.12.3 npm i -D @babel/preset-env@7.12.1 npm i -D babel-loader@8.0.6 // 语法中有 async await 等 npm i -D @babel/plugin-transf ......
uni-app 基础架构搭建 ts+vue3 命令行
1. 安装全局degit npm install -g degit2.创建工程 my-vue3-ts-project # 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-ts-project # 创建以 ts 开 ......
Vue + Element 实现按钮指定间隔时间点击
1、业务需求 需要加一个按钮，调用第三方API，按钮十分钟之内只能点击一次，刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮 3、实现 1）vue页面 <template> <el-row :gutter="15"> <el-col :span="4"> ......
vue + 无限滚动不同高度
<div class="exbox" style="height:461px;overflow:auto" @mouseenter="handleMouseEnter()" @mouseleave="handleMouseLeave()"> <div class="main rollul" ref= ......
vue3
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/re ......
【源码系列#03】Vue3计算属性原理（Computed）
专栏分享：vue2源码专栏，vue3源码专栏，vue router源码专栏，玩具项目专栏，硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 语法 传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象 const count = ref(1) const plusOne = ......
uniapp使用vue3+ts的聊天对话框
先看一下效果图 通过scroll-view实现消息的刷新和滑动，能查看消息和发送图片，支持图片数量自定义。 其中主要是scroll-view通过id定位滑动，当有新消息滑动到最底部，上拉能够刷新历史消息；当选择图片的时候，输入框根据选择的图片数量高度进行调整； ......
vue引入echarts
我用的是vue脚手架 版本是vue2 首先下载vue npm install --save echarts 执行这个命令 如果报错 vue中有提示 加上--force 或者 --legacy-peer-deps main.js中配置 import * as echarts from 'echarts ......
Vue 配置.env.pro和.env.dev文件
1、Vue2 配置 1.1 新建文件 .env.development VUE_APP_BASEURL='http://localhost:8081' .env.production VUE_APP_BASEURL='http://localhost:8082' 1.2 访问 import Vue ......
Vue前端+后端实现带进度条文件分片上传
传输参数对象 package com.deju.provider.upload.domain; import lombok.Data; import org.springframework.web.multipart.MultipartFile; @Data public class Multipa ......
2023最新高级难度vue面试题,包含答案。刷题必备！记录一下。
好记性不如烂笔头 内容来自 面试宝典-高级难度vue面试题合集 问: 如何在 Vue.js 中实现代理？ 在 Vue.js 中，可以使用 vue-resource 或 axios 库来实现代理。以下是实现的基本步骤： 安装 vue-resource 或 axios 库。可以通过 npm 或 yarn ......
vue 中scope 不管用
 ![](https://img2023.cnblogs.com/blog/1202393/202312/1202... ......
2023最新初级难度vue面试题,包含答案。刷题必备！记录一下。
好记性不如烂笔头 内容来自 面试宝典-初级难度vue面试题合集 问: 请解释一下 Vue.js 是什么？ Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。Vue.js的主要目标是通过尽可能简单的API实现响应的数 ......