Vue2
文章平均质量分 78
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
No Silver Bullet
业精于勤荒于嬉,行成于思毁于随。
学业由于勤奋而专精,由于玩乐而荒废;德行由于独立思考而有所成就,由于因循随俗而败坏。
——出自(唐)韩愈《进学解》
展开
-
Vue进阶(贰幺幺)前端开发需知悉的浏览器及其内核
只是用户看到仅仅只是浏览器本身,却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww(Library WorldWideWeb)浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款,分别是IE、Firefox、Google Chrome、Safari、Opera。转载 2023-11-28 11:09:02 · 214 阅读 · 0 评论 -
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
Flex是的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。注意:任何一个容器都可以指定为Flex布局。.box{行内元素也可以使用Flex布局。.box{Webkit内核的浏览器,必须加上-webkit前缀。.box{注意,设为Flex布局以后,子元素的floatclear和属性将失效。原创 2017-03-01 08:40:01 · 95972 阅读 · 1 评论 -
Vue进阶(幺柒零)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨
Vue项目改造升级后,原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误的提示信息。经过代码排查,发现项目中新引入了一些依赖包导致系统无法正常启动。出现以上错误,可从以下几个方面查找原因:可能与IE的某些插件冲突。把所有无关的IE加载项全部禁用后尝试;引用了不存在的 js 文件;页面的某些文件在文档模型还没建立时就已经开始引用相关的节点;令人感到疑惑的是:其他原本可以本地IE热部署的项目在进行同样的升级改造后,依旧可以实现本地IE部署,且没有任何错误信息。原创 2023-10-26 15:19:36 · 1434 阅读 · 2 评论 -
Vue进阶(幺陆伍)PhantomJS 实战讲解
在前期博文《Vue进阶(五十六):vue-cli 脚手架 karma.conf.js 配置文件详解》中讲解了文件用于配置前端项目自动化测试信息。// 这里使用的是PhantomJS作为浏览器测试环境,这个插件支持 DOM, CSS, JSON, Canvas, and SVG 的解析其中,使用了PhantomJS作为无头浏览器测试环境。PhantomJS具体作用是什么呢?本篇博文带你一探究竟。原创 2023-10-16 17:28:06 · 375 阅读 · 0 评论 -
Vue进阶(幺陆肆)babel.config.js配置文件详解
项目开发阶段,使用可选链操作符?出现以下编译报错问题:分析:由于可选链操作符?是ES2020(即ES11)中推出的新语法,允许我们不需要校验当前属性的类型就可去尝试访问子属性。.b?.c;以上错误正是由于项目中无法解析可选链操作符等新的ES属性方法,如上图所示, 这时需要安装babel依赖,并添加到中。原创 2023-10-01 09:13:40 · 1520 阅读 · 1 评论 -
Vue进阶(幺陆玖)信创终端适配改造
随着外部监管对国产化的要求越来越高,所在产品团队信创专项改造工作开始实施,需求如下:信创平台控件只能使用在信创终端使用,不能应用在Windows上,存量系统运行过程中需要能够识别业务人员当前使用的终端操作系统,若终端操作系统为Windows,则使用旧版本Windows控制,若信创平台为麒麟ARM64、通信UOS中的其中一个,则切换为信创平台。原创 2023-09-18 17:28:25 · 775 阅读 · 3 评论 -
Vue进阶(三十三)Content-Security-Policy(CSP)详解
跨域脚本攻击(XSS)是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行,因为浏览器信任其内容来源,即使有的时候这些脚本并非来自于它本该来的地方。为了防止它,要采取很多编程措施(比如大多数人都知道的转义、过滤HTML)。很多人提出,能不能根本上解决问题,即浏览器自动禁止外部注入恶意脚本?这就是"内容安全策略"(,缩写CSP)的由来。CSP。原创 2023-09-05 17:25:30 · 4054 阅读 · 0 评论 -
Vue进阶(六十七)页面刷新路由传参丢失问题分析及解决
问题描述:Vue项目上线后,从A页面跳转至B页面,B页面通过data中接收来自A页面的参数信息,并在created页面生命周期调用服务接口serviceA,返回数据后进行B页面数据渲染展示。B页面刷新后,serviceA接口入参丢失且未做入参非空校验,导致serviceA全表查询,导致内存溢出。原创 2023-09-01 17:28:42 · 1420 阅读 · 0 评论 -
Vue进阶(幺捌柒)浏览器缓存问题解决
vue 项目打包部署上线之后,每一次都会有浏览器缓存问题,导致系统用户访问上个迭代批次的旧资源(css/js资源),若当前迭代批次项目包中不存在旧资源,系统就是出现404错误信息,需要系统用户手动清除缓存才能解决以上问题,导致用户体验非常不好。浏览器缓存(Browser Caching)机制是为了节约网络资源提升页面渲染性能,浏览器在用户磁盘上会对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,进而提升页面性能。原创 2023-08-24 17:29:31 · 4197 阅读 · 0 评论 -
Vue进阶(幺叁陆): transition标签实现页面跳转动画
在Vue项目开发过程中,应用全家桶vue-router实现路由跳转,且页面前进、后退跳转过程中,分别对应不同的切换动画。vue-router切换页面时怎么设置过渡动画?如何判断切换路由时是前进还是后退?每次切换时向左向右切换动画如何实现?可通过以下解决方案实现:给各个页面定义层级,在切换路由时判断用户是进入哪一层页面。如果用户进入更高层级路由那么做前进动画,如果用户退到低层级路由那么做后退动画。原创 2023-08-02 09:05:23 · 619 阅读 · 0 评论 -
Vue进阶(贰幺零):Vue 全局函数、组件、变量挂载方式
项目开发过程中,定义的方法、变量、组件如果被多处引用,就要考虑将其抽取为公共部分,提升代码复用度,便于维护。原创 2023-05-13 16:42:14 · 1302 阅读 · 0 评论 -
Vue进阶(贰零玖):@click.stop与@click.prevent应用讲解
这时再点击a标签的时候就不会跳转目标地址链接了。原创 2022-12-02 20:49:21 · 1443 阅读 · 0 评论 -
Vue进阶(贰零柒):Webpack 性能优化措施汇总
在这一篇文章中,我不会浪费篇幅给大家讲如何写配置文件。如果你想学习这方面的内容,那么完全可以去官网学习或者去网上搜下大致的配置。在这部分的内容中,我会聚焦于以下两个知识点,并且每一个知识点都属于高频考点:有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小前端面试大全:Webpack 性能优化减少 Webpack 打包时间优化 Loader对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST原创 2022-04-17 17:05:54 · 3463 阅读 · 0 评论 -
Vue进阶(贰零陆):Vue 培训课件
一、前言为方便前端开发入门级童鞋掌握前端开发框架Vue,对其有一个大致认知,特梳理此PPT。本文主要从走近vue、项目实战、学习进阶三个层面带你认识前端开发框架Vue。二、正文三、拓展阅读《Vue专栏》更多内容详参本文PPT下载...原创 2022-02-02 21:27:09 · 2194 阅读 · 0 评论 -
网站开发进阶(六十九)防抖节流
文章目录前言防抖 (debounce)节流 (throttle)总结拓展阅读前言防抖 (debounce)防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢?登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖;调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖;文本编辑器实时保存,当无任何更改操作原创 2021-07-18 17:44:49 · 1468 阅读 · 8 评论 -
Vue进阶(贰零叁):iframe嵌套页面IE不展示问题解决
在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。...原创 2021-12-07 13:51:00 · 3740 阅读 · 0 评论 -
Vue进阶(幺玖柒):build 过程取消 console、debugger 控制台信息输出
文章目录一、前言二、配置文件修改三、拓展阅读一、前言Vue项目开发过程中,会经常需要使用console.log、console.info、alert等测试语句来输出内容,而在生产环境之中,我们不希望控制台同样输出以上信息,特别是用户信息相关。组包前,逐一去删除、注释显然费时费力,好在Vue提供了通过配置文件修改配置变量,实现在开发环境打印,而生产环境不打印控制台信息的方法。二、配置文件修改修改build/webpack.prod.conf.js配置文件,找到UglifyJsPlugin配置,在c原创 2021-12-07 10:40:52 · 1694 阅读 · 0 评论 -
Vue进阶(贰零伍):js map根据value获取key
文章目录一、前言二、拓展阅读一、前言前端通过对象保存字典值用于列表字段翻译或者加载下拉框都是很常见的操作,有时也会需要根据字典值的value获取对应的key。测试数据paramsMap: { orderType: { '0': '咨询', '1': '投诉', '2': '举报', '3': '建议', '4': '求助', '5': '表扬', }, subjectType: { 'LB': '劳保', 'XW': '消原创 2021-11-29 19:24:49 · 3043 阅读 · 0 评论 -
Vue进阶(贰零肆):vant van-image无法读取本地图片
文章目录一、前言二、解决方式一三、解决方式二四、拓展阅读一、前言vant中的van-image组件的src参数默认为图片的网络链接:<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>当要引用本地的图片时,直接写图片的路径在vue项目中会刷不出图片(但用 <img> 标签可以显示 )。二、解决方式一<van-swipe :autoplay="30原创 2021-11-29 19:23:45 · 4515 阅读 · 1 评论 -
Vue进阶(幺捌柒):vue项目build报错的解决办法(ERROR in static/js/***.js from UglifyJs)
Vue项目编译过程中,出现如下错误信息:二、问题分析我们知道,由于 只支持 而 可能引入了一部分 的写法,所以导致 打包失败。所以出现此类问题的一般是由于 语法转换为 失败导致。在配置中,由于各插件版本兼容性差异可能会引发此问题的产生。是一款可以解析、混淆、压缩JS的工具,此处的是配置在脚手架中,运行在环境中的小插件。关于:在深入查找问题所在后,决定用 来解析 , 要完成此操作只需要修改前端文件夹下的 文件即可,修改如下:修改前修改后:以上配置将 加入需要 解析的包中。之后再原创 2021-11-16 16:26:34 · 7001 阅读 · 2 评论 -
Vue进阶(幺捌玖):VantUI 实现 Dialog 弹框动态显示 message
文章目录前言拓展阅读前言拓展阅读原创 2021-08-01 09:20:04 · 2367 阅读 · 1 评论 -
Vue进阶(幺玖叁):$OPTIONS 讲解
文章目录前言拓展阅读前言vue实例属性$options是用来获取定义在data外的数据和方法。应用示例如下:<script>export default { name: "optionsTest", data() { return { }; }, //在data外面定义的属性和方法通过$options可以获取和调用 name: "CSDN", age: 12, testMethod() { console.log("shq5785"原创 2021-06-24 10:10:30 · 1884 阅读 · 0 评论 -
Vue进阶(幺玖贰):获取url传参
文章目录应用场景一:内部页面之间互相传值应用场景二:外系统跳转Vue项目时自带参数拓展阅读获取url参数有两种情况:应用场景一:内部页面之间互相传值假如要从A页面跳转到B页面,this.$router.push({name:"B",query:{ Id : this.tId , ...}})进入B页面之后,this.Id = this.$route.query.Id;就能将A页面的id传入B页面,进行参数获取。应用场景二:外系统跳转Vue项目时自带参数例如: htt原创 2021-06-23 17:34:20 · 1495 阅读 · 0 评论 -
Vue进阶(幺玖幺):ECharts 实现地图功能
文章目录前言拓展阅读前言拓展阅读原创 2021-06-22 16:17:28 · 1877 阅读 · 15 评论 -
Vue进阶(幺捌零):JS 向 Vue 传值
前言项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令规定了根据用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。另一个逻辑处理页面由Vue实现,该页面可以实时展示元素相关属性信息(包括size、width、height及left、top等属性)。思路监听器方式实现;Vuex state实现;代码实现.js// 鼠标按下事件el.onmousedown = function (e) { ... document.onmouseu原创 2021-04-22 15:46:43 · 2245 阅读 · 1 评论 -
Vue进阶(幺捌肆):CodeMirror 应用小结
前言CodeMirror支持在线编辑代码,风格包括js, java, php, c++等等100多种语言。能够做到代码自动补全,代码折叠,可配置键盘事件,支持vim, emacs, sublime text 编码风格、能完成查找替换,括号匹配,分栏显示,显示行号,自行配置字体大小和风格等。应用下载codemirrornpm install vue-codemirror --savemain.js引入:import VueCodeMirror from 'vue-codemirror'.原创 2021-04-22 15:45:57 · 1516 阅读 · 0 评论 -
Vue进阶(幺捌捌):应用 qs 插件实现参数格式化
在vue项目开发过程中,使用axios请求后台时,后台无法获取前端传参数据。qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。1、安装npm install qs2、在组件中应用import qs from 'qs'或定义为全局组件://在main.js引入qs import qs from 'qs' //配全局属性配置,在任意组件内可以使用this.$qs获取qs对象 Vue.prototype.$qs = qs3、具体应用主要使用qs.parse(),原创 2021-04-22 15:45:33 · 1630 阅读 · 0 评论 -
Vue进阶(幺捌陆):异步请求导致页面数据渲染错误问题解决
场景描述在Vue项目优化过程中,页面部分应用JS调用promise返回的异步数据,导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作(例如折叠栏位的操作),后台数据可以正常渲染展示。处理逻辑大致如下:<template> <div v-for="(items, index) in results" :key="items.itemsID"> <span v-for="(item, index) in items.appendItems" :key="it原创 2021-04-22 15:44:38 · 4043 阅读 · 0 评论 -
Vue进阶(幺玖零):表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别
前言利用elementUI实现表单元素校验时,出现下拉框内容选中后校验不消失的异常校验情形。通过去除校验规则中相应元素的trigger:'blur'属性,可解决以上问题。至于表单校验时,校验元素trigger属性值的选择,需要继续深究。若不设置trigger属性,该属性是否有默认值?表单验证时,trigger:‘blur’ OR trigger:‘change’ OR 不设置?对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证。下拉框(el-selec原创 2021-04-22 15:44:07 · 30286 阅读 · 0 评论 -
Vue进阶(幺捌叁):IE9兼容性问题-数据初始化问题
前言在Vue项目开发过程中,以父子组件的形式进行页面调用,在测试过程中发现IE9下,子组件中定义初始化数据dataA=0,执行异步逻辑A,在异步请求方法前,输出dataA结果为0,请求结束后时,后台返回值将dataA赋值为1,输出dataA结果为1。再次触发子组件同样事件,但后台请求结果不满足赋值条件,对dataA不做赋值操作,发现在异步请求方法前后,输出dataA结果为1!伪码如下:data () { return { dataA: 0 }}<script> methods原创 2021-04-13 14:48:55 · 1338 阅读 · 0 评论 -
Vue进阶(幺捌贰):父子组件元素获取、方法互相调用
场景复现在项目开发过程中,通过父子组件方式嵌套项目本身页面,在加载到子组件页面时,对子组件页面元素操作,发现document.getElementsByClassName(className)报空数组。原因分析解决方法原创 2021-04-13 14:47:45 · 2969 阅读 · 1 评论 -
Vue进阶(幺捌幺):elementUI 中 select 多选,数据回显错误的问题解决方法
前言在项目开发过程中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他组件数据能正常显示,多选却无法正常回显。表单代码如需:<el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect原创 2021-04-13 14:47:15 · 6201 阅读 · 2 评论 -
Vue进阶(幺柒捌):延伸阅读Sass、Scss、Less与Stylus编程特性
1.混合(Mixins)Mixins是CSS预处理器语言中最强大的特性,简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。平时你在写样式时肯定有碰到过,某段CSS样式经常要用到多个元素中,这样你就需要重复的写多次。在CSS预处理器语言中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性,Mixins被当作一个公认的选择器,还可以在Mixins中定义变量或者默认参数。Sass的混合原创 2021-04-13 14:46:13 · 1644 阅读 · 0 评论 -
Vue进阶(幺捌伍):动态设置系统字体
前言在项目优化过程中,实现了主体色替换功能,接下来考虑实现系统字体设置,主要提供3种字体大小供用户选择。实现思路<el-dropdown-menu style="color: #20a0ff" slot="dropdown"> <!--切换主题色--> <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 220px; padding-to原创 2021-04-13 14:43:45 · 2325 阅读 · 0 评论 -
Vue进阶(九十四):自定义组件
做前端项目开发,自定义组件是必不可少的一项基本技能,前端应用框架(像Vue、React、Angular)都提供一些已封装好、可复用的组件。但在实际项目开发过程中,根据具体的项目开发特点,肯定会遇到一些定制化的开发需求,此时,框架提供的通用组件就不再满足我们的需求了,就需要自己完成可复用组件的编码。实现自定义组件编码的基本思路如下:思考这个组件需要实现什么效果;建立组件的模板,先把架子搭起来...原创 2020-01-20 14:48:05 · 5875 阅读 · 0 评论 -
Vue进阶(幺玖肆):<keep-alive> 实现页面缓存
引入场景有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,原创 2021-03-15 10:42:36 · 4217 阅读 · 3 评论 -
Vue进阶(幺柒柒):Vue 应用 Sass、Scss、Less 和 Stylus
Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 ()。如果当时没有选择,内置的webpack仍然会被预配置为可以完成所有的处理,也可以手动安装相应的# Sass# Less# Stylus然后,就可以导入相应的文件类型,或在.vue下面主要讲解一下vue中应用less或者sass的方法,以less为例(style.less)。...原创 2021-03-14 22:09:19 · 2921 阅读 · 4 评论 -
Vue进阶(幺柒陆):CSS 预编译语言 Sass、Scss、Less 和 Stylus
CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS 预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。...原创 2021-03-14 22:08:00 · 4060 阅读 · 6 评论 -
Vue进阶(幺柒伍):前端用户体验提升(六)色彩搭配
Vue进阶(幺柒伍):前端用户体验提升(六)色彩搭配原创 2021-03-14 22:00:28 · 3040 阅读 · 2 评论 -
Vue进阶(幺柒叁):表单元素日期校验
本文主要讲解基于element-ui datetimepicker实现日期时间,在表单校验中的校验逻辑及实现方法。注:在表单检验时间组件时,应在检验中增加type: 'date',否则会提示检验对象错误问题。vue部分<!--开始/结束日期,时间--><template> <el-row style="margin-top: 13px;"> <el-col :span="12"> <!--开始日期,时间--> <原创 2021-03-14 21:58:58 · 2443 阅读 · 0 评论