Vue2
文章平均质量分 74
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
No Silver Bullet
业精于勤荒于嬉,行成于思毁于随。
学业由于勤奋而专精,由于玩乐而荒废;德行由于独立思考而有所成就,由于因循随俗而败坏。
——出自(唐)韩愈《进学解》
展开
-
Vue进阶(四十七):面试必备:2024 Vue经典面试题总结(含答案)
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View代表UI 组件,它负责将数据模型转化成UI展现出来,ViewModel是一个同步View和Model的对象。在MVVM架构下,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,Model和ViewModel之间的交互是双向的, 因此View数据的变化会同步到Model中,而Model数据的变化也会立即反应到View上。ViewModel。原创 2019-04-22 14:01:39 · 200749 阅读 · 75 评论 -
Vue进阶(四十五)Jest集成指南
在前期博文《Vue进阶(八十八)Jest》中,讲解了Jest基本用法及应用示例。一切顺利的话,按照文档集成应用即可,但是集成过程中遇到的问题可能五花八门,此篇博文主要分享Vue集成Jest阶段遇到的问题及解决方案。首先,需要确认项目自身环境参数配置,主要涉及babeljestbabel-jest,应用其中某个不合适的版本可能会导致各种嵌套问题出现,最终无法集成Jest。原创 2024-07-03 17:32:38 · 871 阅读 · 0 评论 -
Vue进阶(八十八)Jest
Jest 是由 Facebook 提供的开源JavaScript测试框架,特别适用于React和Node.js环境。它以简单的配置、高效的性能和易用性而闻名,旨在简化前端开发中的单元测试集成测试端到端测试和快照测试。Jest 提供了一套完整的测试解决方案,包括断言库测试运行器模拟工具等。此外,Jest还提供内置的代码覆盖率工具,帮助开发者优化测试范围,使得编写和运行测试变得更加简单和高效。开箱即用:Jest 内置了断言库、测试覆盖率报告等功能,无需额外配置即可开始编写测试。原创 2024-06-07 09:38:56 · 1369 阅读 · 0 评论 -
Vue进阶(贰零幺)变量动态绑定
data是Vue实例中的实例属性,表示Vue实例观察的数据对象。Vue实例的数据对象。Vue 会递归地把 data 的property转换为gettersetter,从而让 data 的property能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value对):浏览器 API创建的原生对象,原型上的property会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。一旦观察过,你就无法在根数据对象上添加响应式property。原创 2024-05-16 19:01:51 · 550 阅读 · 0 评论 -
Vue进阶(贰零贰)六种常用数据加密方式
在Vue.js项目中,通过数据加密确保敏感信息的安全应用场景十分常见。虽然Vue.js本身不提供数据加解密功能,但可以通过使用JavaScript库来实现这一目标。原创 2024-05-08 14:49:28 · 888 阅读 · 0 评论 -
Vue进阶(贰零捌)浏览器地址栏URL防篡改攻略
在应用 vue.js 开发前端项目时,浏览器中url 地址栏参数的处理是一个很基础但却很重要的问题。在很多情况下,我们需要从 url 中获取参数,比如从上一个页面跳转到当前页面,需要将一些信息传递给这个页面,这时候就需要将这些信息以参数的形式传递给 url。但是,有时候这些参数又需要被隐藏起来,毕竟 url 中敏感信息不应该被轻易泄露,因此本文将介绍如何在 vue.js 中隐藏地址栏参数。原创 2024-05-07 17:19:04 · 1187 阅读 · 0 评论 -
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
Flex是的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。注意:任何一个容器都可以指定为Flex布局。.box{行内元素也可以使用Flex布局。.box{Webkit内核的浏览器,必须加上-webkit前缀。.box{注意,设为Flex布局以后,子元素的floatclear和属性将失效。原创 2017-03-01 08:40:01 · 96708 阅读 · 1 评论 -
Vue进阶(幺柒零)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨
Vue项目改造升级后,原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误的提示信息。经过代码排查,发现项目中新引入了一些依赖包导致系统无法正常启动。出现以上错误,可从以下几个方面查找原因:可能与IE的某些插件冲突。把所有无关的IE加载项全部禁用后尝试;引用了不存在的 js 文件;页面的某些文件在文档模型还没建立时就已经开始引用相关的节点;令人感到疑惑的是:其他原本可以本地IE热部署的项目在进行同样的升级改造后,依旧可以实现本地IE部署,且没有任何错误信息。原创 2023-10-26 15:19:36 · 2178 阅读 · 2 评论 -
Vue进阶(幺陆伍)PhantomJS 实战讲解
在前期博文《Vue进阶(五十六):vue-cli 脚手架 karma.conf.js 配置文件详解》中讲解了文件用于配置前端项目自动化测试信息。// 这里使用的是PhantomJS作为浏览器测试环境,这个插件支持 DOM, CSS, JSON, Canvas, and SVG 的解析其中,使用了PhantomJS作为无头浏览器测试环境。PhantomJS具体作用是什么呢?本篇博文带你一探究竟。原创 2023-10-16 17:28:06 · 673 阅读 · 0 评论 -
Vue进阶(幺陆肆)babel 配置文件详解
项目开发阶段,使用可选链操作符?出现以下编译报错问题:分析:由于可选链操作符?是ES2020(即ES11)中推出的新语法,允许我们不需要校验当前属性的类型就可去尝试访问子属性。.b?.c;以上错误正是由于项目中无法解析可选链操作符等新的ES属性方法,如上图所示, 这时需要安装babel依赖,并添加到中。原创 2023-10-01 09:13:40 · 3285 阅读 · 1 评论 -
Vue进阶(三十六):created() 详解
vue.js中created方法是一个生命周期钩子函数,一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。一般可以在created函数中调用ajax获取页面初始化所需的数据。通俗来说,生命周期就是Vue实例或者组件从创建到销毁所经历的一系列过程。虽然不太严谨,但是也基本上可以理解。原创 2023-09-18 17:28:25 · 1317 阅读 · 1 评论 -
Vue进阶(三十三)Content-Security-Policy(CSP)详解
跨域脚本攻击(XSS)是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行,因为浏览器信任其内容来源,即使有的时候这些脚本并非来自于它本该来的地方。为了防止它,要采取很多编程措施(比如大多数人都知道的转义、过滤HTML)。很多人提出,能不能根本上解决问题,即浏览器自动禁止外部注入恶意脚本?这就是"内容安全策略"(,缩写CSP)的由来。CSP。原创 2023-09-05 17:25:30 · 6779 阅读 · 0 评论 -
Vue进阶(六十七)页面刷新路由传参丢失问题分析及解决
问题描述:Vue项目上线后,从A页面跳转至B页面,B页面通过data中接收来自A页面的参数信息,并在created页面生命周期调用服务接口serviceA,返回数据后进行B页面数据渲染展示。B页面刷新后,serviceA接口入参丢失且未做入参非空校验,导致serviceA全表查询,导致内存溢出。原创 2023-09-01 17:28:42 · 1673 阅读 · 0 评论 -
Vue进阶(幺捌柒)浏览器缓存问题解决
vue 项目打包部署上线之后,每一次都会有浏览器缓存问题,导致系统用户访问上个迭代批次的旧资源(css/js资源),若当前迭代批次项目包中不存在旧资源,系统就是出现404错误信息,需要系统用户手动清除缓存才能解决以上问题,导致用户体验非常不好。浏览器缓存(Browser Caching)机制是为了节约网络资源提升页面渲染性能,浏览器在用户磁盘上会对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,进而提升页面性能。原创 2023-08-24 17:29:31 · 6330 阅读 · 0 评论 -
Vue进阶(幺叁陆): transition标签实现页面跳转动画
在Vue项目开发过程中,应用全家桶vue-router实现路由跳转,且页面前进、后退跳转过程中,分别对应不同的切换动画。vue-router切换页面时怎么设置过渡动画?如何判断切换路由时是前进还是后退?每次切换时向左向右切换动画如何实现?可通过以下解决方案实现:给各个页面定义层级,在切换路由时判断用户是进入哪一层页面。如果用户进入更高层级路由那么做前进动画,如果用户退到低层级路由那么做后退动画。原创 2023-08-02 09:05:23 · 754 阅读 · 0 评论 -
Vue进阶(贰幺零):Vue 全局函数、组件、变量挂载方式
项目开发过程中,定义的方法、变量、组件如果被多处引用,就要考虑将其抽取为公共部分,提升代码复用度,便于维护。原创 2023-05-13 16:42:14 · 1464 阅读 · 0 评论 -
Vue进阶(贰零玖):@click.stop与@click.prevent应用讲解
这时再点击a标签的时候就不会跳转目标地址链接了。原创 2022-12-02 20:49:21 · 1575 阅读 · 0 评论 -
Vue进阶(贰零柒):Webpack 性能优化措施汇总
在这一篇文章中,我不会浪费篇幅给大家讲如何写配置文件。如果你想学习这方面的内容,那么完全可以去官网学习或者去网上搜下大致的配置。在这部分的内容中,我会聚焦于以下两个知识点,并且每一个知识点都属于高频考点:有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小前端面试大全:Webpack 性能优化减少 Webpack 打包时间优化 Loader对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST原创 2022-04-17 17:05:54 · 3679 阅读 · 0 评论 -
Vue进阶(贰零陆):Vue 培训课件
一、前言为方便前端开发入门级童鞋掌握前端开发框架Vue,对其有一个大致认知,特梳理此PPT。本文主要从走近vue、项目实战、学习进阶三个层面带你认识前端开发框架Vue。二、正文三、拓展阅读《Vue专栏》更多内容详参本文PPT下载...原创 2022-02-02 21:27:09 · 2447 阅读 · 0 评论 -
网站开发进阶(六十九)防抖节流
文章目录前言防抖 (debounce)节流 (throttle)总结拓展阅读前言防抖 (debounce)防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢?登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖;调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖;文本编辑器实时保存,当无任何更改操作原创 2021-07-18 17:44:49 · 1502 阅读 · 8 评论 -
Vue进阶(贰零叁):iframe嵌套页面IE不展示问题解决
在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。...原创 2021-12-07 13:51:00 · 3941 阅读 · 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 · 1749 阅读 · 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 · 3146 阅读 · 0 评论 -
Vue进阶(贰零肆):vant van-image无法读取本地图片
vant中的van-image组件的src当要引用本地的图片时,直接写图片的路径在vue项目中会刷不出图片(但用标签可以显示 )。原创 2021-11-29 19:23:45 · 5045 阅读 · 1 评论 -
Vue进阶(幺捌柒):vue项目build报错的解决办法(ERROR in static/js/***.js from UglifyJs)
Vue项目编译过程中,出现如下错误信息:二、问题分析我们知道,由于 只支持 而 可能引入了一部分 的写法,所以导致 打包失败。所以出现此类问题的一般是由于 语法转换为 失败导致。在配置中,由于各插件版本兼容性差异可能会引发此问题的产生。是一款可以解析、混淆、压缩JS的工具,此处的是配置在脚手架中,运行在环境中的小插件。关于:在深入查找问题所在后,决定用 来解析 , 要完成此操作只需要修改前端文件夹下的 文件即可,修改如下:修改前修改后:以上配置将 加入需要 解析的包中。之后再原创 2021-11-16 16:26:34 · 7283 阅读 · 2 评论 -
Vue进阶(幺捌玖):Echarts 实现 Dialog 弹框动态显示 message
在利用Echarts实现地图展示时,需要实现点击某一省份,模态框形式给出相应的省份信息,点击模态框中的下钻按钮,实现下钻至该省份下的区域地图部分,以此类推,直至下钻至区县三级地图。原创 2021-08-01 09:20:04 · 2481 阅读 · 0 评论 -
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 · 2342 阅读 · 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 · 1546 阅读 · 0 评论 -
Vue进阶(幺玖幺):ECharts 实现地图功能
文章目录前言拓展阅读前言拓展阅读原创 2021-06-22 16:17:28 · 1943 阅读 · 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 · 2324 阅读 · 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 · 1589 阅读 · 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 · 1746 阅读 · 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 · 4291 阅读 · 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 · 33767 阅读 · 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 · 1358 阅读 · 0 评论 -
Vue进阶(幺捌贰):父子组件元素获取、方法互相调用
场景复现在项目开发过程中,通过父子组件方式嵌套项目本身页面,在加载到子组件页面时,对子组件页面元素操作,发现document.getElementsByClassName(className)报空数组。原因分析解决方法原创 2021-04-13 14:47:45 · 3615 阅读 · 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 · 7158 阅读 · 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 · 1700 阅读 · 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 · 2423 阅读 · 0 评论 -
Vue进阶(九十四):自定义组件
做前端项目开发,自定义组件是必不可少的一项基本技能,前端应用框架(像Vue、React、Angular)都提供一些已封装好、可复用的组件。但在实际项目开发过程中,根据具体的项目开发特点,肯定会遇到一些定制化的开发需求,此时,框架提供的通用组件就不再满足我们的需求了,就需要自己完成可复用组件的编码。实现自定义组件编码的基本思路如下:思考这个组件需要实现什么效果;建立组件的模板,先把架子搭起来...原创 2020-01-20 14:48:05 · 6155 阅读 · 0 评论