
Vue
文章平均质量分 60
Greg_Zhong
这个作者很懒,什么都没留下…
展开
-
在编辑操作时,el-select多选下拉组件,选中label标签后,框中无法回显选中的label,,,
3.柳暗花明:在网上寻觅方案无法解决之后,我冷静下来思考,为什么新增的时候我不出现这种问题,编辑的时候下拉组件就无法选中新的label进行显示,后面我想应该是出在数据格式有啥问题,排查代码,最后突然想到是不是我在封装表格数据渲染完成后依旧使用的是浅拷贝方式,导致一直引用的是同一个内存地址,导致后面下拉组件点击新的时候,无法做到回显最新,而依旧使用老的内存里值展示?想着,反正就是死马当活马医,试试看,然后,,,,,啊啊啊,正常了!,而change事件中监听已获取最新选中的Label。原创 2023-04-01 10:04:50 · 1221 阅读 · 0 评论 -
vue中使用v-loading不生效的问题
vue中使用v-loading加载biaoz 的时候,因为折叠面板导致实效原创 2022-06-23 19:32:41 · 6091 阅读 · 0 评论 -
el-table动态表格(表头和表格内容都是数组对象接口方式渲染)
el-table动态渲染表格原创 2022-06-01 19:28:19 · 7104 阅读 · 1 评论 -
Axios的两种请求类型的区别( application/json;charset=utf-8 、x-www-form-urlencoded)
前言问:Axios中(请求头中里面的)请求类型(Content-Type)是做什么的?答:前端在请求接口(api)服务时,需要将api所需要的参数传递给后端,那么使用何种方式传参给api,就是由请求类型定义的,请求类型就是一个规范,这个规范由后端同事在写接口时定义好的,所以前端需要请求接口时,需要保持请求类型和传参的格式与后端接口定义的一致,否则请求接口不成功!亲身体验在vue项目中使用axios请求登陆api接口时,请求返回状态码401?当时第一时间以为是token失效?想着不对劲,感觉原创 2022-04-14 21:11:47 · 10596 阅读 · 0 评论 -
element中el-tree和级联菜单
<template> <div> <el-container> <!--头--> <el-header style="background-color: #00c355" class="header">Header</el-header> <!--中--> <el-container>原创 2022-01-24 09:29:56 · 1374 阅读 · 0 评论 -
vue中表单验证必传字段
致自己:你自己想要的必须自己争取!步入主题:*rules 定义表单哪些字段属于必填字段或其他判断字符长度等… 作用:若为真则放行请求api,否则拦截不继续下执行!*ref 作用:就是后续表单点击提交按钮时,通过这个ref的拿到表单对象,进行置空操作,第1步:form表单上定义规则rules,和定义表单标识ref ,注意:这两个是放在最外面的form表单上面!!!别放错位置!第2步:定义规则必须与表单对象的属性名称保持一致!第3步:使用prop给表单属性添加校验规则!原创 2022-01-20 11:13:13 · 1353 阅读 · 0 评论 -
关于Vue中及时清空表单校验规则和重置表单
其一1.关于及时清空表单校验规则的必要。【设置prpo的规则清空】我们会在创建表单时,对应一些必传的属性进行添加校验规则,vue中我们给表单必填字段做校验,同时我们需要在没有使用表单时,进行清空表单校验。为什么需要这样做?解:例如我们做新增操作,未填写必传字段,就点击保存按钮,然后关闭form表单了,第一次进来后页面仍旧会显示上一次操作的表单校验规则!一般用于表单api服务请求成功后,关闭form页面时,触发!其二2.关于vue表单进行提交后,及时重置表单的必要。【页面的属性ngm原创 2022-01-20 10:42:58 · 5107 阅读 · 3 评论 -
vue中我们更新数组中的对象,在业务层看到了数据更新了,而在视图层我们的数据仍旧没有发生改变
致自己:遇到问题,只有深入探索理解结合实践,才能巩固记忆变成自己的!场景:修改列表中某一条数据后,我们使用静态更新数据方式,将后端返回更新后得对象覆盖旧对象,业务层(js代码层)打印日志可以看到数组中旧对象已经被更新,而页面上(视图层)这条数据没有改变!步入主题:1.我们在列表中进行某一个员工的编辑,当我们做了修改,点击提交!2.前端调取修改员工的服务,请求成功后,后端会返回我们修改这个员工对象,3.我们需要将这个对象,去覆盖列表中的旧对象,因为ID是不可变得条件,4.我们依次为条件,去数原创 2022-01-20 10:11:53 · 656 阅读 · 0 评论 -
Vue报错:Unknown custom element: <RosterListChildren> - did you register the component correctly? For r
问题场景:创建了一个新组件A(页面),打算将其放到另一个组件B中展示,然后再父组件(A)中,引入路径然后,注册到component中,最后使用!解决:写在最后:很多细节问题,不注意最后就是一个个问题why?还记得经常在写路由跳转代码时:this.$route.push( { path:’ ’ })毫不犹豫选择route,人家正确的是选router啊...原创 2021-08-31 17:13:55 · 317 阅读 · 0 评论 -
vue中父组件与子组件互相传值
前言:A person often meets his destiny on the road he took to avoid it.一个人常常在逃避命运的路上遭遇命运。缘由:项目内一个页面分类太多太多,一共八个分类(其中某些分类,还可以继续追加,如:工作经历、培训经历、教育经历等),就搭建完这个页面,就存静态代码都两千行了,所以学习父子组件互相传值,记录总结。实例演示页面包含关系的体现:目录层级体现:前提:搞清!谁是父组件?谁是子组件?举例说明:A组件(页面)内,原创 2021-08-26 08:49:24 · 445 阅读 · 0 评论 -
Vue页面如何~及时更新页面数据
Vue页面如何~及时更新页面数据前言:什么是Vue单页面正题:如何让单页面二次(后续)访问页面,数据渲染(更新)We need to be thinking about tomorrow. So we keep going.我思想明日,是故吾继。前言:什么是Vue单页面代码层面,可以将一个页面HTML、JS、CSS代码统一写在一个 .Vue文件里。页面展示:通过控制当前页面路径#号后面的路由名称,来达到控制(切换)不同页面的展示效果,请记住:这样显隐方式~页面不会重新请求api。补充:(凡原创 2021-08-11 10:25:54 · 6293 阅读 · 0 评论 -
Vue中hash和history两种路由模式的区别
Vue中的两种路由模式Hash和HistoryHash模式History模式Vue文档对路由模式~阐述Hash模式属于Vue路由的默认模式。访问的路径中包含#号,#后面就是对应页面的路由名称。支持页面刷新。获取当前页面路由某个参数值,使用js中split()进行截取获取。History模式另一种vue路由模式,路径中没有#号,访问路径看起来像api请求一样。需要将前端对应路由,配置到后端数据库,否则直接配置history模式,页面无法刷新(404)获取当前页面路由某个参数值,使用th原创 2021-08-11 09:27:46 · 1444 阅读 · 0 评论 -
通过配置代理解决跨域
Do everything you can right now, and then decide.全力以赴,历而后择。直入主题首先创建vue.config.js并~加入如下配置:(红色部分)将上一步的配置到axios.defaults.baseURL中最后,重启项目(vue.config.js重启才会被加载)注:以上两步实现配置代理,后续请求API直接填写API名称即可,前缀已配置在vue.config.js中!知识扩展!浏览器的同源策略:保证浏览器的安全性给出的请求地址,.原创 2021-07-21 10:26:23 · 576 阅读 · 2 评论 -
记录Vue项目开发过程中遇到的知识点(待更新)
Vue知识小梳理场景一:设置全局样式之背景色场景二:动态切换:src和:class场景三:路由跳转场景四:路由守卫(官网称:“导航守卫”)场景五:路由嵌套(官网称:“嵌套路由”)一个人可以失败许多次,但是只要他没有开始责怪别人,他还不是一个失败者。场景一:设置全局样式之背景色1. 提出疑问: 在Vue中,我们都知道每一个.vue组件,又可以称之“单页面组件”,若需要给单页面设置背景色,是否可以在组件内的template的容器中,设置背景颜色就可以呢?这肯定是不够的。2.&原创 2021-07-09 18:04:39 · 160 阅读 · 0 评论 -
修改代码后,Vue项目不能自动刷新,发现控制台报:Uncaught SyntaxError: Unexpected token ‘<‘
前言别人认为重要的,并不就是你的追求。只有自己才知道什么最合适。问题由来~及描述将vue项目部署到nginx上,如果是第一次往nginx上部署vue项目,本地项目无需修改,只需要修改nginx上的配置,当需要在nginx上部署多个vue项目时,则本地vue项目需要做配置…(详情省略,具体我的文章有),其中一项是在项目的根路径,创建了vue.config.js文件。1.第一次配置的:vue.config.js2.线上是没有任何问题,但是本地项目重启后(vue.config.js只有在项原创 2021-07-09 16:51:20 · 4327 阅读 · 0 评论 -
vue项目启动Ok,根目录访问就报错:URIError: Failed to decode param ‘/%3C%=%20BASE_URL%20%%3Efavicon.ico‘
故事缘由:将vue项目部署到nginx上运行,由于线上的nginx上已经部署过一个前端项目,若继续想在nginx上部署新项目,需要在新的vue项目中,创建了vue.config.js文件,并配置了路径…(步骤省略,有需要我的博客中有)。线上访问没问题,本地项目在根目录下访问时,就会出现报错:URIError: Failed to decode param ‘/%3C%=%20BASE_URL%20%%3Efavicon.ico’问题定位:根据报错信息,其实就可以知道可能是新创建的文件,配置原创 2021-07-08 15:53:12 · 8606 阅读 · 5 评论 -
使用Nginx部署多个前端Vue项目
Nginx部署多个Vue项目第一步:vue项目中的配置第二步:修改Nginx上的配置文件最后:暂停nginx服务,重新开启即可。第一步:vue项目中的配置1. 创建vue.config.js 文件(该文件会被 @vue/cli-service 自动加载)详情见:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE2. 路由文件中配置,3.&原创 2021-07-08 13:11:20 · 9065 阅读 · 5 评论 -
浅谈Vue的文件和路由的懒加载
心中有信仰,脚下有力量。Vue项目文件理解懒加载Belief in our hearts means strength in our legs.Vue项目文件理解index.html介绍及场景使用 :所有组件(后缀.vue)都通过该文件,进行渲染加载(貌似其他的组件就是html的templetes模板);App.vue介绍:后缀.vue的组件,相比其他的.vue组件,该组件级别最高(可以来理解它是所有其他组件的~父亲)。main.js介绍及使用场景:项目的入口原创 2021-07-01 15:12:56 · 214 阅读 · 0 评论 -
初次使用Nginx部署项目(待更新)
Nginx部署Vue项目第一步:Nginx介绍第二部:本地Windows使用Nginx部署Vue静态项目第三步:阿里云 CentOS 7.6 64 位操作系统~部署Vue前端项目步骤一:步骤二:写在最后:第一步:Nginx介绍概念: 一个高性能的Web服务器和反向代理服务器;问世:由俄罗斯人lgor Sysoev采用C语言开发编写于2004年10月4日发布第一个版本;特点:占内存少,并发处理能力强,以高性能、底系统资源消耗而闻名,Nginx官方测试为5万并发请求。与Nginx的并发处理能原创 2021-06-23 17:40:39 · 706 阅读 · 1 评论 -
Vue2.x+ElementUI搭建项目
Vue2.x+ElementUI搭建项目第一步:创建Vue新项目第二步:安装Axios用于请求API第三步:项目引入ElementUI(桌面端)组件第四步:总结第一步:创建Vue新项目安装Vue脚手架Cli执行命令:npm install -g @vue/cli ;通过脚手架,执行Vue命令:vue create 项目名 ~创建项目;安装路由,通过npm安装:npm install vue-router --save ;创建路由文件,并将其路径配置到全局入口main.js实例中;*这原创 2021-06-01 16:09:29 · 2354 阅读 · 2 评论