布局vue web
系统化学习前端之Vue（vue2）
## 前言 vue2 截止 2023 年 12 月 31 日不再维护更新，将全面拥抱 vue3 了。 ## vue2 vue2 是一个实现 UI 层的渐进式 js 框架。vue2 本质是一个类，可以配置 options API 实例化为一个 vm 对象，通过模板编译处理成虚拟 DOM，对比更新后生成 ......
总结Vue3 的一些知识点：Vue3 计算属性
Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 实例 1 中模板变的很复杂起 ......
总结Vue3 的一些知识点：Vue3 项目打包
Vue3 项目打包 打包 Vue 项目使用以下命令： cnpm run build 执行以上命令，输出结果如下： 执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 ......
vue3 后台返回数据没有返回字段是true和false 值的时候，循环数组，点击单个元素单个元素变化的写法
最原始的写法 <template> <div> <div v-for="(item, index) in items" :key="item.id" :class="{ active: item.active }" @click="handleClick(item)"> {{ item.text } ......
Vue3 el-input实时转大写、自动去掉空格、光标不跳动
直接上代码： <script setup> import {ref,nextTick } from 'vue' let inputValue = ref(null) let inputRef = ref(null) const handleInput = () => { // 获取光标位置 cons ......
前端vue中实现文件下载的几种方法 四种方法， a.download = "重新下命名下载文件名"
前端vue中实现文件下载的几种方法 原文链接：https://blog.csdn.net/weixin_46074961/article/details/105677732 第一种 前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性 这种写法是创造了一个a标签， ......
vue <treeSelect标签中树形选择返回非必填调整以及清内存需手动清理
绑定必须相同 校验规则需trigger我这边用的是change(数据发生改变时发生变化触发),原来用的blur(失去焦点时触发) 如上解决了我此次第一次选择完数据还报非必填问题 清理缓存 手动清理了一下dataform中的gcl的数据 要不然新增完事后还会返回数据 ......
Vue导出多个sheet方法
<el-button type="primary" @click="_export">导出</el-button> import XLSX from 'xlsx' _export() { //需要导出的数据 const data = { sheet1: this.data.sheet1, sheet ......
vue3 使用 vant 实现列表上拉加载、下拉刷新
## 实现方式 实现了列表的上拉加载、下拉刷新，使用的是vant库中的 [List](https://vant-ui.github.io/vant/#/zh-CN/list) 和 [PullRefresh](https://vant-ui.github.io/vant/#/zh-CN/pull-re ......
【快应用】响应式布局适配横竖屏或折叠屏
【关键词】 响应式布局、折叠屏、横竖屏 【问题背景】 当前开发者在开发快应用时，往往将designWidth设置为设备屏幕的宽度，这时，应用的内容会随着设备宽度的变大而拉伸显示，导致在大屏、横屏、折叠屏展开时显示效果不好。 在折叠屏合起和展开的效果如下，可以看出页面各元素尺寸在展开时明显变大了。 ......
vue post请求方式下载附件
因为后台大佬说参数过长，get请求报错一定要用post 1、vue前端代码 <el-button size="medium" @click='exportData(true)’ >导出全部</el-button> 2、js代码 ......
vue 一键导出数据为excel文件并附带样式 十分简单
自入行以来我就一直疑惑一个问题，导出excel为什么总是搞的很复杂，包括网上的教程，屎里淘金，非常耗费精力。今天刚好业务需要，整理一个简单明了的由vue前端导出的版本出来。 开始： #1.添加xlsx、xlsx-style、file-saver三个包 npm install xlsx xlsx-st ......
vue Js对象结构函数使用方法
写了三行不如一行搞定 原先的 const inComeTypeId = this.queryForm.inComeTypeId const currentPage = this.queryForm.currentPage const pageSize = this.queryForm.pageSiz ......
vue3 组件传参
父组件 子组件 <iframe :src="props.src" width="100%" height="100%" frameborder="0" id="_iframe" ></iframe> 接收参数 const props = defineProps({ src: { type: Stri ......
vue3 router 路由传参
路由跳转 import router from "@/router"; router.push({ path: "/iframe", query: { url: frameurl.value } }); 获取参数 import router from "@/router"; import { use ......
vue中使用vant中PullRefresh 下拉刷新踩坑
## 问题 PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉： ``` 内容 ``` ##解决 我们需要给 .van-pull-refresh__track 一个高度就可以了，代码如下 ``` ``` ## 注意 在修改css样式时，出现了一个错误，一开始使用的是以下代码来修改 . ......
vue3 打包超出限制 Some chunks are larger than 500 kBs after minification
vite.config.ts , build: { // 如果自己分片的话，就会生成37个文件 // chunkSizeWarningLimit: 1000, // rollupOptions: { // output: { // manualChunks(id) { // if (id.inclu ......
vue3 reactive响应式赋值页面不渲染问题
## 问题描述： ``` // 声明变量 let data = reactive([]); http().then(res=>{ data = res.data console.log(data) }) // data数据更新，页面没有渲染， ``` ## 1、因数据结构而导致的未渲染解决方法： * ......
.env.development（开发环境）、.env.prodction（正式环境）、自定义环境 例如：读取vue项目根目录 process.env.VUE_APP_filePath
.env.development（开发环境）、.env.prodction（正式环境）、自定义环境 原文链接：https://blog.csdn.net/qq_42855675/article/details/114261585 文章目录 1.配置文件：2.命名规则3.关于文件的加载使用自定义环境 ......
Vue3.3 的新功能的体验（下）：泛型组件（Generic Component) 与 defineSlots
> 上一篇说了 DefineOptions、defineModel、Props 的响应式解构和从外部导入类型 这几个新功能，但是没有说Generic、defineSlots等，这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。 这还要从 TS 的泛型说起。 ## 泛型的目的和意义 泛 ......
vue --version 显示的却是vue cli的版本号，为什么？
vue --version 显示的却是vue cli的版本号，为什么？ 如果您在运行 vue --version 命令时显示的是 Vue CLI 的版本号，而不是 Vue.js 的版本号，那可能是因为您已经全局安装了 Vue CLI。 Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工 ......
《Web安全基础》01. 基础知识
[TOC](基础) > 这里只是起跑线而不是终点线。 # 1：概念名词 ## 1.1：域名 - **什么是域名** 域名是用于标识 IP 地址的字符串。它用于将易于记忆的名称与 IP 地址相关联。 - **域名在哪里注册** 域名可以在许多互联网注册机构注册（如 GoDaddy、阿里云、腾讯等）。这 ......
vue iview render函数渲染table表头和列表内容
1 computed:{ 2 tableColumns(){ 3 return [ 4 { 5 title: "封面", 6 key: "pageImage", 7 render: (h, params) => { 8 return h("img", { 9 style: { 10 height: ......
Vue3 watch API 踩坑记录 | 方法未定义问题
在使用 setup() 语法糖时，方法的定义和 watch 的调用都在 setup内部进行。 需要确保方法在 watch 调用之前可访问。 **错误示例** ```html ``` 这个时候，会报错`Uncaught (in promise) ReferenceError: Cannot acces ......
Spring Web 过滤器使用常见错误。
案例1：@WebFilter过滤器使用@Order无效 假设我们还是基于Spring Boot去开发上节课的学籍管理系统，这里我们简单复习下上节课用到的代码。 首先，创建启动程序的代码如下： （https://www.java567.com，搜"spring"） @SpringBootApplica ......
Spring Web 过滤器使用常见错误
案例 1：@WebFilter 过滤器无法被自动注入 假设我们要基于 Spring Boot 去开发一个学籍管理系统。为了统计接口耗时，可以实现一个过滤器如下： （https://www.java567.com，搜"spring"） @WebFilter @Slf4j public class Ti ......
vue3 -ts文件导入js文件报错
1.背景 2.解决 在tsconfig.json文件中添加配置 "noImplicitAny": false, "allowJs": true, 或者使用 require 来导入文件 ......
Vue2+Vue-baidu-map 的使用
在Vue2项目中有时候会用到百度地图插件，更适配Vue项目的可以结合Vue-baidu-map来实现。 Vue-baidu-map地址 使用npm 安装 $ npm install vue-baidu-map --save 或者使用CDN来进行引入 <script src="https://unpk ......