前端 终端 实战vue
Vue中div和template的区别
template是作为占位符模板,用于包裹元素,自身并没有被渲染出来。 相较于使用div 会节省一个没必要的div标签的空间。 我们都知道 v-show隐藏元素的原理是 控制其元素的display:none; template并没有被作为 dom元素被渲染出来, 所有无法控制其 display:no ......
vue中van-picker的选项插槽使用方法
van-picker的内部选项怎么来自定义 首先要确保 Vant UI 的版本在2.10.0以上 然后利用插槽slot来实现,在Vant 里插槽有一个进阶用法 # <van-picker :show-toolbar="false" :default-index="2" // 默认选中第三行,选中第一 ......
记录VUE开发遇到异常el-select绑定值为对象的时候报key重复的异常问题
最近在用el-select时发现渲染出来的选项全部被激活了,一开始以为时v-for的key重复了,后来发现不是。 又以为时v-model绑定的数据不是响应式的,发现也不是。 查询Element UI 官方文档得到解决方案 <el-form :model="form2" ref="form2" siz ......
Required request body is missing: 前端接口报错错误解决
前几天遇到一个报错:Required request body is missing; 经过检查是因为在传递参数时使用params来传递的。 而使用params来传递参数会被拼接到url上不管是get还是post请求,这时候请求体也就是body是不存在的。 所有后端在获取参数时会报request b ......
使用axios+vue在离开页面时中断网络请求
最近做到一个需求需要在离开页面时中断未完成的网络请求 第一步: 引入axios和CancelToken实例子 import axios from 'axios' const CancelToken = axios.CancelToken 第二步:在封装好的接口方法中加入cancelToken配置属性 ......
拆解前端巨石应用
拆解前端巨石应用 EluxJS-让你像切蛋糕一样拆解前端巨石应用 大家好,EluxJS是一套基于“微模块”和“模型驱动”的跨平台、跨框架『同构方案』,欢迎了解... 可怕的巨石怪 工作中最可怕的是什么?是遇到业务复杂且乱作一团的巨石应用。改一发而动全身,无法渐进式重构,也没人敢对历史包袱进行优化,欠 ......
VSCode终端提示'pnpm'不是内部或外部命令,也不是可运行的程序或批处理文件
每次在终端中执行一个新命令时总会遇到执行失败的问题,这次记录一下解决办法,省得每次都要去百度或者询问ChatGPT。 1、检查是否已安装pnpm,如果尚未安装请先执行: npm install -g pnpm 2、如果安装后仍提示错误,则检查环境变量是否已设置好: 设置好环境变量之后重启一下vsco ......
vue中设置input输入框的值为正整数,不能为负数和小数
import Vue from 'vue' Vue.directive('Int', { bind: function (el) { const input = el.getElementsByTagName('input')[0] input.onkeyup = function (e) { if ......
[深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解
ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property,指向该内部值。 如果将对象分配为 ref 值,则它将被 reactive 函数处理为深层的响应式对象。 template 内使用 ref 对象,会自动解包。 <template> <d ......
vue+element-ui+springboot实现修改当前登录用户的信息
正文:话不多说,直接上代码 springboot代码 /** * 根据id修改当前登录用户的信息 * * @param username * @return */ @GetMapping("/username/{username}") public Result findOne(@PathVaria ......
在Vue中发起axios请求成功,却被catch捕捉返回Network Error
前端发起请求成功,后台接收处理返回,却被axios的catch捕获,没有走then函数。 最后添加了headers配置成功解决,如上,附上axios接口配置中文文档:axios中文文档|axios中文网 | axios (axios-js.com) 网上给出的答案:(虽然CSDN饱受诟病,对于初入行 ......
VUE 使用iconfont 动态加载不转义的问题
手牵手教学 我们正常使用图片是这种class的形式 <i class="iconfont icon-xxx"></i> 但是万一我们的图标是后台返回的,而不是写死的,那么这种class写法不行了,得使用unicode 那么正常我们使用是这样 <i class="iconfont">3</i ......
openGauss 数据库实战 主备高可用部署(主备部署模式)
猿创征文| openGauss 数据库实战 主备高可用部署(主备部署模式) 陈橘又青 于 2022-10-04 23:03:57 发布 1765 收藏 46分类专栏: 其他领域 文章标签: 数据库 服务器 网络版权 其他领域专栏收录该内容14 篇文章7 订阅订阅专栏前言openGauss是一款开源的 ......
vue+element 下拉框选择加搜索并且列表选项带图片
子组件代码: <template> <!-- 单选下拉框 --> <el-select v-model.trim="selectValue" filterable clearable :placeholder="placeText" :filter-method="filterMethod" :lo ......
限制左键拖拽图片阴影vue
<template> <div> <img ref="image" :src="imageUrl" :style="imageStyle" /> </div> </template> <script> export default { data() { return { imageUrl: "you ......
vue3 + el-date-picker(element-plus) 两种方式限制只能选一个月区间
1. <div style="float: right"> <el-date-picker v-model="state.rangeData[0]" type="date" value-format="YYYY-MM-DD" placeholder="开始" :disabled-date="pick ......
vue3
一、简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) github.com/vuejs/vue-n… 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实 ......
vue核心原理(Diff算法、虚拟dom)
核心原理&源码 Diff 算法 这里参考大佬文章:https://mp.weixin.qq.com/s/oAlVmZ4Hbt2VhOwFEkNEhw diff 算法的进化 关于 diff 算法的最经典的就是 Matt Esch 的 virtual-dom,以及 snabbdom(被整合进 vue 2 ......
vue-element-template去除登录
一、修改src目录下的permission.js文件 1、注释 //if (hasToken) { // if (to.path '/login') { // // if is logged in, redirect to the home page // next({ path: '/' }) / ......
vue-element-template改为从后台获取菜单
一、后端接口获取菜单信息 1、返回数据样式 { "code": 20000, "data": [{ "menuId": "2000000000000001", "parentMenuId": "0", "name": "Json工具", "menuType": 2, "component": "#" ......
前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合、更好看的图标,相比于字体图标更加多样性,而且svg图标加载更快,而当svg的图标被多次使用的时候,我们需要一种类似于变量的定义,然 ......
Vue插件router
路由 概念: 一组key-value对应关系 key1 + value1 => 路由route key2 + value2 => 路由route ...... - 上述路由的集合,就是'路由器'(router) - key为路径,value对应 组件或者 回调func 插件: vue-router, ......
微服务架构实战学习(一):微服务架构
微服务架构 什么是微服务 微服务是一种系统架构上的设计风格,它的主旨是架构将一个原本独立的系统拆分成多个小型的服务,每个服务都在各自的进程中运行(可以在不同物理机器上),每个小型服务可以独立部署运行,服务之间通过基于HTTP的RESTful API进行通信协作. 每个服务都是基于业务场景中一些耦合度 ......
vue打包后前端修改ip地址
1、在static文件夹下新建config.js文件 (function () { window.SITE_CONFIG = {} // 多个地址 window.SITE_CONFIG['baseUrl'] = '请求地址' window.SITE_CONFIG['baseUrl_1'] = '请求 ......
chatGPT充当前端智能思路助手
替代:百度、谷歌人工搜索 1、我想让你充当前端开发专家。我将提供一些关于Js、Node等前端代码问题的具体信息,而你的工作就是想出为我解决问题的策略。这可能包括建议代码、代码逻辑思路策略。我的第一个请求是“我需要能够动态监听某个元素节点距离当前电脑设备屏幕的左上角的X和Y轴,通过拖拽移动位置浏览器窗 ......
微前端解决方案
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。 将微前端 ......
前端转向PHP进阶之路
一、PHP简介 Hypertext Preprocessor,又称为超文本预处理器(HTML为超文本标签语言),就是我们所说的PHP。它是一种糅杂百家的后台语言,在PHP中,可以见到C、Java等语言的写法和它自创的一些写法,这也就是为什么说学过其他语言的人会比较容易接受PHP。 PHP开发时需要去 ......