![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 63
绝对零度HCL
天道酬勤
展开
-
Vue面试题18问
前端面试 vue面试试题,前端面试题锦集原创 2023-05-22 16:08:09 · 1462 阅读 · 0 评论 -
快速定位到ant-design form表单校验未通过的item
在项目开发中,我们经常遇见长长的表单,长到表单写花眼的那种,一屏放不下,滚动条还得往下滚动几下。当我们提交表单的时候,有的表单项校验未通过,且这个表单项未可视区域,这就会给用户造成一定的困扰,认为提交按钮点击没有反应或者认为系统做的不够人性化。于是就引申出下面的需求,点击提交按钮,未校验通过的表单项如果不在可视区域就滚动到可视区域。原创 2023-05-16 10:40:12 · 547 阅读 · 0 评论 -
vue核心原理之--理解Tree-Shaking
这个概念在前端领域是因为rollup.js而起,后来webpack等也加入支持的行列中。简单来说就是移除掉项目中永远不会被执行的代码(dead code),实际情况中,代码虽然依赖了某个模块,但其实只使用其中的某些功能。通过,将没有使用的模块代码移除掉,这样来达到删除无用代码的目的。原创 2023-05-15 15:28:14 · 826 阅读 · 0 评论 -
多页面应用MPA与多页面应用SPA的优缺
对比项SPAMPA项目结构一个主页面+若干路由组件多个完整的页面用户体验首次加载速度慢,后续页面切换响应速度快多个页面切换慢资源文件公用资源只需加载一次每个页面都需要加载自己的公用资源适用场景后台管理系统等不需要SEO的应用适用于对SEO要求高的应用,例如商城等页面效果切面页面可以轻松实现动画效果不利于实现刷新方式切换组件可以局部更新数据内容需要整页刷新数据处理单页面可以使用VUEX等共享数据浏览器本地缓存,URL参数等方式开发维护成本。原创 2023-02-24 14:59:06 · 485 阅读 · 0 评论 -
vue核心原理之--理解框架的编译时与运行时
现在我们已经大概了解了什么是运行时编译时编译+运行时、纯编译时等框架的区别,其实在我们使用的现代框架中Vue就是一个编译+运行时的框架。由于它没有编译的过程,因此我们没办法分析用户提供的内容,但是如果加入编译步骤,可能就大不一样了,我们可以分析用户提供的内容,看看哪些内容未来可能会改变,哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信息,然后将其传递给Render函数,Render函数得到这些信息之后,就可以做进一步的优化了。然而,假如我们设计的框架是纯编译时的,那么它也可以分析用户提供的内容。原创 2023-02-13 17:55:07 · 914 阅读 · 0 评论 -
vue核心原理之--现代框架为什么使用虚拟DOM
在权衡了性能消耗、代码的可维护性,Vue(包括React等)主流框架,使用了虚拟DOM这个概念。当然这也仅仅是其中的一部分使用的理由,因为还有响应式等等。。。原创 2023-02-03 11:48:01 · 528 阅读 · 0 评论 -
Web前端安全系列之:XSS攻防及Vue防御(万字长文)
Web 攻击技术的发展也可以分为几个阶段。在Web 1.0时代,人们更多的是关注服务器端动态脚本的安全问题,比如将一个可执行脚本(俗称webshell)上传到服务器上,从而获得权限。后续有出现了SQL注入,SQL注入的出现是Web安全史上的一个里程碑,SQL注入漏洞至今仍然是Web安全领域中的一个重要组成部分。再后续另一个里程碑的安全问题问世–XSS(跨站脚本攻击)。伴随着Web 2.0的兴起,XSS、CSRF等攻击已经变得更为强大。Web攻击的思路也从服务器端转向了客户端,转向了浏览器和用户。原创 2022-10-20 15:38:42 · 9586 阅读 · 0 评论 -
Vue项目使用ant-design-vue文件上传到腾讯云
Bucket我们在项目中封装了http请求的公共方法,同时为看安全起见,将腾讯云的关键信息存储在远程服务器,需要上传文件时,先调用请求获取关键参数。//获取上传文件tokenconstgetCosAuth=function(params){......原创 2022-07-28 11:41:20 · 847 阅读 · 1 评论 -
vue3 无限下拉滚动插件vue3-infinite-scroll-better 使用详解
支持Vue3的滚动加载插件,所有用法和vue-infinite-scroll一致。并解决了一些bug。原创 2022-06-16 09:19:50 · 4351 阅读 · 0 评论 -
fullCalendar日程表在Vue项目中的应用
fullCalendar日程表在Vue项目中的应用fullCalendar相关API使用fullCalendar插件在项目中实现日程排版,支持天、月日程转换,自定义事件页面布局通过按钮切换天与月视图的转换,天视图回显具体的时分排版项目,月视图回显缩略信息<div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st原创 2022-05-06 11:56:55 · 5571 阅读 · 11 评论 -
Pinia学习笔记之--核心概念Plugins and TypeScript
Plugins多亏了一个低级API, Pinia stores可以完全扩展。下面是一些你可以做的事情清单:为stores增加新属性在定义stores时添加新选项为stores增加新方法包装现有的方法改变甚至取消actions实现像Local Storage一样的副作用仅应用于特定的stores使用pinia.use()将插件添加到pinia实例中。最简单的例子是通过返回一个对象向所有stores添加一个静态属性:import { createPinia } from 'pinia'原创 2022-04-15 11:17:23 · 1431 阅读 · 0 评论 -
Pinia学习笔记之--核心概念Actions
ActionsActions相当于组件中的方法。他们可以被定义在defineStore()的actions属性下,它们非常适合定义业务逻辑。export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ }, randomizeCounter() { this.原创 2022-04-13 18:34:22 · 1178 阅读 · 0 评论 -
Pinia学习笔记之--核心概念Getters
Gettersgetter与Store状态的计算值完全相同。它们可以用defineStore()中的getters属性来定义。它们接收state作为第一个参数,以鼓励使用箭头函数:export const useStore = defineStore('main', { state: () => ({ counter: 0 }), getters: { doubleCount: (state) => state.counter * 2原创 2022-04-08 17:23:19 · 2627 阅读 · 0 评论 -
Pinia学习笔记之--核心概念State
核心概念定义Store在深入核心概念之前,我们需要知道store是使用defineStore()定义的,它需要一个唯一的名称,作为第一个参数传递import { defineStore } from 'pinia'// useStore 可以是任意的定义,比如useUser、useCart// 第一个参数必须是一个在应用程序中唯一的名称export const useStore = defineStore('main', { // 其它配置项})这个名称(也称为id)是必需的,P原创 2022-03-23 17:56:35 · 3288 阅读 · 0 评论 -
Pinia学习笔记之1--概览
Why PiniaPinia (pronounced /piːnjʌ/, like “peenya” in English) is the closest word to piña (pineapple in Spanish) that is a valid package name. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar原创 2022-03-23 17:54:16 · 1344 阅读 · 0 评论 -
Vue3.0 + tsx + ant-design-Vue中使用插槽slot+自定义v-model
vue3.0 + tsx + ant-design-vue中使用插槽slot+自定义v-model原创 2021-11-23 10:44:28 · 4797 阅读 · 4 评论 -
vue keep-alive实现动态缓存以及缓存销毁
vue keep-alive实现动态缓存以及缓存销毁需求来源及描述后台管理系统中,左侧为功能菜单栏,点击菜单列表,右侧显示该菜单的功能页面,本来是一个非常简单的后台管理系统布局,现在增加了tabs菜单按钮;点击左侧菜单栏时,右侧页面头部header显示当前的页面标题,形成一个tabs列表,点击可切换页面内容和关闭tabs;需求要求,点击左侧时,右侧显示页面内容,同时右侧header增加该页...原创 2019-07-17 14:03:24 · 5963 阅读 · 8 评论 -
hash路由监听
<script> function Router () { this.routes = {}; this.currentUrl = ''; } Router.prototype.add = function (path, callback) { this.routes[path] = callback || function() {} }; Router.prototype.refresh = function() { this.current原创 2021-03-26 17:54:35 · 340 阅读 · 0 评论 -
js es6实现企业微信扫码登录,重写路由重定向
// 定义类export const WxCodeLogin = class { constructor (option, node, callback) { this.node = node this.callback = callback this.appid = option.appid this.agentid = option.agentid this.redirect_uri = option.redirect_uri this.state原创 2020-12-24 09:41:45 · 939 阅读 · 2 评论 -
Ant vue range-picker实现时间选择范围
时间选择范围,实现最大选择一个月html<a-range-picker inputReadOnly @openChange="openChange" @calendarChange="calendarChange" :disabled-date="disabledDate" v-model="rangeTime" @change="changePicker" format="YYYY-MM-DD"></a-range-picker>原创 2020-11-16 20:10:55 · 2573 阅读 · 0 评论 -
git commit 校验eslint格式
插件依赖'lint-staged''husky'package.json配置"husky": { "hooks": { "pre-commit": "lint-staged" }},"lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ]}原创 2020-09-24 15:39:17 · 231 阅读 · 0 评论 -
vue项目解决页面登录时,禁止浏览器提醒是否保存密码
主要思路1.通过input输入框,监听输入值,进行替换成*符号,避免使用input的type="password"类型,造成浏览器提醒是否记住密码;如果是vue、react等项目请自行改造一下代码!vue项目解决页面登录时,禁止浏览器提醒是否保存密码......原创 2020-08-15 21:00:52 · 3406 阅读 · 0 评论 -
vue + xlsx 实现前端读取excel文件内容
前端实现js读取Excel文档数据内容html代码如下 <div class="fl f-c-w"> <p>上传填好的顾客信息<span class="tip-msg">(仅支持xls/xlsx格式)</span></p> <el-button type="text" @click...原创 2020-04-14 15:26:42 · 2482 阅读 · 0 评论 -
vue element-ui实现input输入框金额数字添加千分位
在util.js中定义方法包含金额添加过滤千分位,验证金额格式等const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;// 金额添加千分位const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,...原创 2019-12-26 09:39:00 · 9347 阅读 · 3 评论