vue
文章平均质量分 91
详细介绍vue的相关知识
前端不释卷leo
热爱前端,一起学习,一起进步。积极更新博客。
展开
-
Vue 国际化之 vue-i18n 的使用
Vue 国际化之 vue-i18n,使用起来很简单。vue2、vue3 版本都在这儿,还有一些踩坑记录。原创 2022-09-03 18:37:40 · 31898 阅读 · 12 评论 -
15个 Vue 技巧,开发有段时间了,才知道还能这么用(你所知道真的包括这些吗?)
目录前言1、将一个 prop 限制在一个类型的列表中2、使用引号来监听嵌套属性3、知道何时使用 v-if4、单个作用域插槽的简写5、将局部和全局的 style 混合在一起6、重写子组件的样式7、如何在 Vue 之外创建一个具有响应性的变量8、v-for 中的解构9、在指定范围内循环10、窃取 prop 类型11、检测元素外部(或内部)的单击12、从组件外部调用一个方法13、监听数组和对象14、template 标签的另一个用途15、处理错误(和原创 2021-12-29 21:06:28 · 15501 阅读 · 41 评论 -
Vue 常见面试题汇总(这些技巧你真的都掌握了吗?呕心沥血2w字整理)
前言本文汇总了vue常用知识点与常见面试题,附上本人对该vue知识介绍相关博客,适合收藏,经常回顾,也许每次阅读都会有进一步理解。Vue 的优缺点优点1、创建单页面应用的轻量级Web应用框架2、简单易用3、双向数据绑定4、组件化的思想5、虚拟DOM6、数据驱动视图7、前后端分离缺点1、Vue在开发多页应时不够灵活,需要配置多入口2、不支持IE8SPA的理解SPA是Single-Page-Application的缩写,翻译过来就是单页应用。在WE..原创 2021-12-26 20:43:06 · 12494 阅读 · 34 评论 -
Vue 插槽(slot)详细介绍(对比版本变化,避免踩坑)
Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。感谢大家支持,该版本为优化版,文章重新排版,优化阅读体验。原创 2021-11-30 21:47:14 · 65460 阅读 · 90 评论 -
Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
以下是我在工作中用到过的vue组件之间的通信方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,话不多说直接开始,满满的干货,建议收藏。1、父子组件之间的通信父 >>> 子 (Props)一个组件里面引入另外一个组件,此时构成了一种“父子关系”,当前组件为“父”,引入的组件为“子”,如当前组件(父),在父组件中通过 “:message” 向子组件通信。<template> <div class="paren...原创 2021-09-20 00:47:53 · 5976 阅读 · 6 评论 -
Vue Excel 文件流导出乱码快速解决方案
Vue Excel 文件流导出乱码快速解决方案,深入排查版。原创 2024-05-13 11:54:14 · 837 阅读 · 0 评论 -
如何写出易于维护的Vue代码(踩坑经验)
在开发时你心里是否在想着:把功能实现就行了!如果是,那么该文章比较适合你。如何写出易于维护的代码?看了就知道。原创 2022-07-30 09:08:28 · 1676 阅读 · 3 评论 -
微前端之 qiankun 入门、上手、实战(构建大型 web 应用)
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值:技术栈无关主框架不限制接入应用的技术栈,微应用具备完全自主权,独立开发、独立部署,微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新。增量升级,在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略。独立运行时,每个微应用之间状态隔离,运行时状态不共享。.........原创 2022-07-16 21:55:07 · 9046 阅读 · 39 评论 -
Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
目录前言正文一、向后移植的功能二、与 Vue3 的差异三、项目升级四、后续支持总结尽管现在 Vue3 是默认版本,但还有许多用户、相关库、周边生态使用的是 Vue2,且由于依赖兼容性、浏览器支持要求或没有足够的带宽升级,导致不得不继续使用 Vue2。难道 Vue3 发布了这么多“真香”的特性,我们 Vue2 的用户与项目就只能眼巴巴地看着?当然不是!有一个好消息是,前两天 Vue2.7 正式发布了。在此版本中,从 Vue3 向后移植了一些最重要的功能,以便 Vue2 用户也可以从中受益。在 Vue2.7 中原创 2022-07-02 12:53:53 · 20741 阅读 · 31 评论 -
下班前几分钟,我弄清了v-model与.sync的区别
目录前言正文一、v-model1、作用2、本质3、特殊用法二、.sync1、作用2、本质总结一、v-model 与 .sync 的区别1、相同点2、区别点在平时开发过程中,v-model 使用频率很高。一般来说,v-model 可用于在表单及元素上创建双向数据绑定,其本质是语法糖。但提到语法糖,这里就不得不提另一个与 v-model 有着相似功能的双向数据绑定语法糖,那就是 .sync 修饰符。使用过 vue 框架的朋友应该对这个指令不会感到陌生,v-model 可用于对 、及 等元素上的数据进行双向绑定原创 2022-06-26 11:59:42 · 1146 阅读 · 8 评论 -
下班前几分钟,我用几行代码搭建了个 Vue3 项目
目录前言正文一、项目初始化二、引入UI框架三、引入路由 Vue-Router四、引入状态管理器 Vuex五、引入 Axios六、总结前言如今,Vue3 已成为 Vue 的默认版本。相信现在有很多人在用 Vue3 开发项目,但是很多时候没有机会从零开始搭建一个项目,毕竟只有相关负责人才有可能有机会将框架搭建出来,之后我们在此基础上进行业务迭代、模块开发。下班前几分钟,从零搭建一个 Vue3 最小原型系统,麻雀虽小,五脏俱全。正文一、项目初始化既然想搭建一个原创 2022-03-17 13:30:56 · 5089 阅读 · 29 评论 -
下班前几分钟,我学会了如何使用 Vuex
目录前言正文一、基本概念二、项目场景三、如何使用1、安装2、State 初始值3、Getters 修饰值4、Mutations 修改值5、Actions 异步修改值四、总结五、建议何时使用 Vuex ?前言本人曾对 Vuex 作过详细介绍,但是今天去回顾的时候发现文章思路有些繁琐,不容易找到重点。于是,在下班前几分钟,我对其重新梳理了一遍。tips:本文的案例均为Vue2版本。正文一、基本概念Vuex 是一个专为 Vue.js原创 2022-02-24 21:13:06 · 6186 阅读 · 22 评论 -
在 Vue3 成为默认版本后,盘点了 Vue3 与 Vue2 的区别
目录前言正文一、Vue3 与 Vue2 区别概览二、Vue3 与 Vue2 区别详述生命周期多根节点Composition API异步组件(Suspense)Teleport响应式原理虚拟DOM事件缓存Diff算法优化打包优化自定义渲染APITypeScript支持三、Options API 与 Composition APIOptions APIComposition API如何选择?展望前言不知道大家有没有留意到原创 2022-02-13 12:36:23 · 6638 阅读 · 31 评论 -
Pinia 上手指南 -- 新一代状态管理工具,它会成为 Vuex 的良好替代品吗?
一、简介Pinia 是 Vue 的存储库,它允许你跨组件/页面共享状态。如果你熟悉 Composition API,你可能已经使用过简单的export const state = reactive({}),这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,则会将你的应用程序暴露给安全漏洞。即使在小型单页应用程序中,你也可以从使用 Pinia 中获得很多好处:开发工具支持 跟踪动作、突变的时间表 store只出现在使用它们的组件中 时间旅行和更容易的调试 热模块更...原创 2022-01-24 21:16:18 · 4823 阅读 · 17 评论 -
尤雨溪:Vue3 将在2022年2月7日成为新的默认版本(你准备好了吗?)
划重点:Vue 3 将在 2022 年 2 月 7 日成为新的默认版本!请务必阅读可能需要采取的措施部分,来确认你是否需要在默认版本切换之前做相应改动以避免发生异常。从库到框架在最开始的时候,Vue 仅仅是一个运行时库。但这些年来,它已经逐步发展成了一个包含许多子项目的框架: 核心库,即vuenpm 包 内容足够当作一本书的文档 构建工具链(Vue CLI、Vue Loader 和其他支持包) 用于构建单页应用的路由 Vue Router 用于状..原创 2022-01-21 19:48:14 · 1751 阅读 · 10 评论 -
10分钟,从0到1学会Vue内置指令与自定义指令(图文并茂版)
目录前言正文Vue指令的含义Vue指令的特点Vue内置指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-oncev-memov-isVue自定义指令全局自定义指令注册局部指令钩子函数钩子函数参数前言Vue指令无论是在面试中还是在工作中,都是高频知识点。因此,学会Vue指令非常有必要,本文原创 2022-01-17 11:47:48 · 3050 阅读 · 18 评论 -
【Vue】当 $parent 与 $children 遇上 slot 时,一件有趣的事情发生了(一次真实项目场景记录)
以下是我在做项目时遇到的真实场景,新手可能会比较容易产生误区,在这里记录一下。项目中有多个页面,整体布局风格一致,于是我将其封装成通用组件,方便重用,如 Layout<template> <div> <!-- 该组件为重用组件,保持布局风格一致 --> <header></header> <div class="main"></div> <footer></fo原创 2022-01-08 09:25:05 · 2501 阅读 · 7 评论 -
Vue 取消 axios 重复请求,将性能优化进行到底(你知道发出去的请求还能这么取消吗?)
目录前言如何取消请求?1、CancelToken.source工厂2、CancelToken构造函数全局请求优化1、如何判断重复请求?2、如何取消重复请求?3、配置拦截器前言在项目开发过程中,我们经常会遇到重复请求的场景,如果我们不对重复的请求进行处理,则可能会导致程序出现各种问题。比如重复的 post 请求可能会导致服务端产生两笔记录。那么重复请求是如何产生的呢?这里我们举 2 个常见的场景: 假设页面中有一个按钮,用户点击按钮后会发起一个请求。如果未对该..原创 2022-01-05 21:50:27 · 4266 阅读 · 17 评论 -
Vue Provide / Inject 详细介绍(跨组件通信、响应式变化、版本变化)
背景通常,当我们需要从父组件向子组件传递数据时,我们使用props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。对于这种情况,我们可以使用一对provide和inject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个provide选项来提供数据,子组件有一个inject选项来开始使用这些数据。使用假设有一个组件...原创 2021-12-21 21:44:18 · 18558 阅读 · 18 评论 -
Vue keep-alive 详细介绍(动态组件、路由组件缓存优化)
用法keep-alive 是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。在 2.2.0 及其更高版本中,activated和deactivated将会在<keep-ali...原创 2021-12-15 20:32:50 · 5028 阅读 · 4 评论 -
Vue 混入(mixin)详细介绍(可复用性、全局混入)
基础混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。基本使用1、定义一个混入(mixin)let mixin = { created() { console.log("我是mixin里面的created!") }, methods: { hello() { .原创 2021-12-13 20:47:09 · 30733 阅读 · 21 评论 -
Vue 路由(Router)详细介绍(切换,传参,通信)
在一个vue项目中,免不了对组件(页面)进行切换与跳转。而用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。话不多说,直接开始!!!准备工作在使用脚手架vue-cli3创建(vue create projectName)一个vue项目时,原创 2021-12-09 22:31:33 · 16048 阅读 · 9 评论 -
Vue项目 跨域 解决方案与 vue.config.js 配置解析
为什么会出现跨域?出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。什么是跨域?当一个请求url的协议、域名、端口三原创 2021-12-07 19:49:21 · 18411 阅读 · 8 评论 -
Vue 防抖节流 详细介绍(面试常客、去繁从简、性能优化)
本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的。前置知识点:js、闭包、es6、vue等。使用背景:很多场景下,页面具有交互性,免不了会触发一些事件以及发送一些请求,依赖于像输入框、选择框、点击按钮等等。这时候就会出现一个现象,对使用者的操作不可控。如一个点击按钮,其绑定一个事件或发送一个请求,那么在连续快速点击时,如果不做限制,那么点击多次,将触发对应次数的事件或者发送对应次数的请求,这对使用者来说可能就是短时间内的简单操作,但是试想一下,在连续点击多次的情况原创 2021-12-04 18:20:50 · 5575 阅读 · 7 评论 -
Vue axios 详细介绍(核心使用、封装、个性化配置,破万字)
前言:axios在Vue项目中可以用来向后台发送请求(调接口API),获取响应信息的一个方法。axios介绍axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。首先需要知道:axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:从浏览器中创建 XMLHttpRequests 从 nod原创 2021-12-03 22:46:08 · 35472 阅读 · 3 评论 -
Vue 生命周期 详细介绍(面试必考,内附实例截图)
Vue的生命周期是不仅是面试必考点,理解它更能为我们在Vue项目开发带来促进作用。什么是Vue的生命周期?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。简单理解就是Vue实例从创建到销毁的这么一个过程。如图(官网)所示:Vue生命周期函数(钩子)执行顺序从上图可知主要为八大生命周期钩子:befor原创 2021-12-02 22:09:47 · 2812 阅读 · 3 评论 -
即将2022年了,Vue3.x详细版为尔奉上(对比Vue2.x,打包带走)
Vue3知识已经为你总结好,赶紧体验一下吧~~~Vue3新特性体验--上(内附简单实例,可直接使用)_前端不释卷leo的博客-CSDN博客1、先创建一个简单vue2项目,node、vue-cli、webpack等准备完成之后,创建vue3-test文件夹,cd vue3-test,然后vue init webpack,配置项目信息,创建vue2项目(安装vue-router、vuex)。vue2项目文件目录详情2、记录文件main.js、HelloWorld.vue、A.vue、B.vue 、route原创 2021-11-28 09:23:58 · 659 阅读 · 4 评论 -
Vue 全局API 详细介绍(nextTick、set、delete、......)
Tips:Vue全局(内置)API,在实例中对应使用方式this.$apiName。Vue.extend(options)使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data选项是特例,需要注意 - 在Vue.extend()中它必须是函数。// 创建构造器var Greet = Vue.extend({ template: '<p>{{firstName}} {{lastName}} say {{alias}}</p>',...原创 2021-11-27 22:02:42 · 3751 阅读 · 3 评论 -
Vue项目导入excel表,自动下载导入失败数据的excel表(使用ElementUI upload组件,自定义导入excel表)
有这么一个需求:一个导入按钮,点击按钮导入excel表,如果excel表中部分数据导入失败,则自动下载该部分导入失败数据的excel表,如果全部导入成功,则提示“导入成功”。首先附上ElementUI的上传文件组件Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/upload官原创 2021-11-23 21:13:25 · 2417 阅读 · 6 评论 -
上手体验Vue3 Vite的魅力(“快”的艺术),有了它,你还会用webpack吗?
Vite是什么?Vite(法语单词,“快” 的意思)是一种新型的前端构建工具,最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板。目前来说,Vue 使用的是 vue-cli 脚手架,React 一般使用 create-react-app 脚手架。虽然脚手架工具不一样,但是内部的打包工具都是 Webpack,为什么要开发一个全新的构建工具,是 Webpack 不香了吗?Vite 方式构建的项目,和使用 Webpack 构建的项目,有什么不同原创 2021-11-03 21:52:33 · 2081 阅读 · 6 评论 -
Vue3新特性体验--下(各式各样API,完结篇)
这是Vue3新特性体验的最后一篇,推荐先把上、中篇看完,然后继续本文的阅读。Vue3新特性体验--上(内附简单实例,可直接使用)_前端菜小白leo的博客-CSDN博客Vue3新特性体验--中(Composition API)_前端菜小白leo的博客-CSDN博客依然使用与上、中篇同样的简单实例。回顾一下实例目录与页面展示接下来,继续Vue3新特性的体验之旅。provide和inject我们已经了解父子组件通信可以使用props跟emit,那么跨层级(祖孙)通信该如何?可以..原创 2021-10-31 13:06:08 · 439 阅读 · 3 评论 -
Vue3新特性体验--中(Composition API)
Vue3中的Composition API主要作用是便于整合代码,将实现相同功能的代码集中在一起,便于维护管理,Composition API新特性的入口-- setup()函数,该函数是为组件提供的新属性。造个简单的实例感受一下。本篇实例代码在上篇的基础上进行修改:Vue3新特性体验--上(内附简单实例,可直接使用)_前端菜小白leo的博客-CSDN博客现在,我们在A组件实现一个小功能,点击按钮改变显示内容。vue2中的写法:<template> <div cl原创 2021-10-30 12:59:07 · 747 阅读 · 2 评论 -
Vue3新特性体验--上(内附简单实例,可直接使用)
1、先创建一个简单vue2项目,node、vue-cli、webpack等准备完成之后,创建vue3-test文件夹,cd vue3-test,然后vue init webpack,配置项目信息,创建vue2项目(安装vue-router、vuex)。vue2项目文件目录详情2、记录文件main.js、HelloWorld.vue、A.vue、B.vue 、router、vuex。(与vue3做对比)main.jsimport Vue from 'vue'import App fr.原创 2021-10-29 22:25:07 · 804 阅读 · 2 评论 -
Vuex核心用法,一学就会!(中秋特辑,快来get你的月饼啦)
今天是中秋佳节,祝各位大佬中秋节快乐!来get自己的月饼吧。趁着这个美好的节日,怀着美丽的心情,建造自己的“工厂”,我将以个人理解,用“月饼工厂”,模拟vuex的精简用法,嘻嘻嘻......话不多说,直接“造”(燥)起来。...原创 2021-09-21 12:47:07 · 520 阅读 · 3 评论