![](https://img-blog.csdnimg.cn/107d1a1654054c12a64e1715d79ebec4.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 笔记相关
文章平均质量分 87
Vue.js笔记,主要是记录有关vue的相关知识点,同时也适合编程入门的。
灵魂学者
一个简单的平凡人
展开
-
Vite 脚手架 搭建 Vue项目
在之前讲过搭建 Vue 项目的脚手架 Vue-Cli,Vue-Cli目前是处于这个维护阶段,随着Vue3的到来官方推荐使用 Vite 来搭建Vue项目,Vite是一个轻量级的、速度极快的构建工具,由于其原生ES模块导入方式,可以实现闪电般的冷服务器启动。那么本篇就来使用Vite脚手架搭建Vue项目,同时也提供在VScode中需要安装哪些插件可以帮助使用者来更好的编写代码。原创 2023-07-22 18:33:35 · 2061 阅读 · 1 评论 -
跨域 —— 反向代理配置
本篇就来讲跨域中的反向代理配置,之前在Node栏目讲到可以通过后端的配置,使用cors配置解决跨域,或者可以使用jsonp解决跨域,以及还有另外一种实际情况,在本篇当中会有涉及。原创 2023-06-10 15:46:04 · 1312 阅读 · 0 评论 -
移动端事件300ms延迟解决
有移动端与PC端的项目开发,那么移动端和PC端开发上是存在差异的,比如 click 事件的300ms 延迟,即移动Web页面上的click事件响应都要慢上300ms,移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容;这样做的原因是为了确定用户是“单机”还是“双击”,safari(macOS浏览器) 需要通过300ms的延迟来判断!关于 “300毫秒的延迟” 是一个默认的规范,首先先来了解这个300ms的延迟是怎么样的!原创 2023-06-09 15:20:44 · 1951 阅读 · 0 评论 -
vuex-persistedstate —— 数据持久化
本篇内容就来介绍如何来使用这款第三方包来完成数据持久化 —— vuex-persistedstate;在之前的篇目当中对于 Vuex 中的相关内容都讲得差不多,但是在项目中去使用vuex,虽然数据状态得到管理了,但数据在每一次都需要去重新加载,那么对于数据的持久化vue是没有给解决的,而是通过第三方的工具去进行数据的持久化的,[ 注:怎么读?persistedstate —— per西施特day ]原创 2023-07-02 14:22:07 · 1554 阅读 · 0 评论 -
Vuex —— 状态管理 | Module
在前面讲到了关于Vuex数据状态管理的内容,讲了Vuex的五大核心属性,在这五大核心属性中就 state、mutation 和 actions 在前面介绍 Vuex 状态管理和讲 Vuex 中的同步和异步操作已经比较熟悉了,getter 是基于state 的计算属性,vue 中 computed从data中派生出的计算属性, vuex中 getter是从state中派生出的属性,对于getter的使用还是比较简单的,那么本篇主要来讲关于这最后一个核心属性 —— Module .原创 2023-09-22 09:06:01 · 252 阅读 · 0 评论 -
Vuex —— 同步和异步请求
上一篇讲到 Vuex 状态管理的内容,那么本篇就来将关于Vuex中的同步和异步数据请求,先来简单的回顾一下 Vuex ,Vuex 中有五个核心属性:state 、getter、mutation、action、module。state: 存放数据状态,不能被直接的修改;getter: 基于 state 的计算属性;mutation: 直接更新 state 的多个方法的对象;action: 通过 mutation 间接更新state;module:分模块化;原创 2023-06-27 23:54:49 · 2372 阅读 · 0 评论 -
Vuex 状态管理 —— 核心store
在上一篇当中讲到关于接口请求函数获取数据,拿到 response.data ,简化调用,那么在拿到请求的响应数据之后呢?在前面讲到组件间的通信当中,如父子通信(父传子props,子传父$emit)以及组件与组件之前不能通过直接通信,但可以通过间接的方式,即中间人模式,这种方式仍存在问题,到后续通过事件中心的方式来进行处理,这当中也反应了一些问题:1.传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。2.经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。原创 2023-06-22 15:58:27 · 548 阅读 · 0 评论 -
Vue 封装ajax请求[接口]函数
本篇主讲如何在项目中封装ajax请求接口函数模块以及封装项目中各接口函数,结合后端提供的API接口文档进行编写,锻炼结合API文档封装项目接口请求函数的能力,让你在项目开发的道路上向前一步!原创 2023-08-26 16:20:46 · 483 阅读 · 0 评论 -
Vue路由 —— vue-router
本篇讲的是关于命名路由、路由拦截以及优化的路由懒加载将举一个非常常见的场景,当你打开一个网站的时候,你想浏览该网站的时候,当你点击阅读的时候它会突然跳转到一个登录界面,如果你还没有选择登录继续点击阅读其他内容时,又弹出来一个登录界面,当你登录的时候,就不会再出现了;这种显然没有任何问题,但是不是最好的,如果需要检查的页面多了,那么就需要在每一个组件当中去检查是否有token,需要检查的都需要编写,这样一来不仅重复代码很多,写起来很难受,有没有一种好的方法呢?原创 2023-02-12 14:35:52 · 556 阅读 · 0 评论 -
Vue路由 —— vue-router
本篇讲的是路由中的嵌套路由、编程式导航以及动态路由,router获取到的是全局的路由对象,而route是匹配到当前的路由对象;原创 2023-02-11 12:14:40 · 654 阅读 · 0 评论 -
Vue路由 —— vue-router
在上一篇内容讲到关于单页面组件的内容,同时也附上补充讲了关于单页面(SPA)和多页面(MPA)之间的优缺点,通过vue-router了解到了基础的路由信息、一级路由配置、声明式导航和在声明式导航中了解到了路由切换会触发location.hash执行以及路由的重定向问题。原创 2023-02-09 11:28:35 · 565 阅读 · 0 评论 -
Vue组件 —— 单文件组件
本篇讲vue单文件组件内容,解决先前vue组件编写方式存在的问题等一系列问题,那么现在在项目当中,也是本篇目中最重要的内容就是Vue的单文件组件,接下来就是开始对Vue单文件组件内容的学习!原创 2023-02-04 11:24:10 · 3516 阅读 · 0 评论 -
Vue-Cli 脚手架 搭建 Vue项目
本篇主讲如何通过vue提供的vue-cli脚手架来搭建vue项目,自此开始进行Vue基于项目中的介绍,Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具,通过脚手架创建项目势必会较为高效!原创 2023-02-03 22:20:13 · 2196 阅读 · 1 评论 -
第四十三篇 filter - 过滤器
本篇内容简单的介绍 filter过滤器 的一个使用,通过管道符的形式进行,Vue.filter设置过滤器,从而可以达到过滤器的可复用,比之前使用的讲到的方式会好用许多!原创 2023-01-30 17:34:59 · 202 阅读 · 0 评论 -
第四十二篇 nextTick
nextTick是什么呢?即在下次DOM更新循环结束之后执行延迟回调;在修改数据之后立即使用这个方法,获取更新后的DOM。在前面封装swiper组件当中,通过许多种方式方法,其一从mounted初始化过早转到updated后出现初始化重复,再者通过设置key值和使用v-if控制swiper组件,然后通过Vue.diretive自定义指令的方式来封装swiper组件,那么本篇的nextTick其实也是为封装swiper组件遇到的问题提供另外一种解决思路!原创 2023-01-05 17:07:40 · 561 阅读 · 0 评论 -
第四十一篇 指令中的VNode
前面讲到了自定义指令的引入使用,以及结合封装swiper组件一起进行结合使用,还记在inserted 指令生命周期当中使用的参数吗?第一个参数是可以拿到DOM节点(el),第二个参数是可以拿到使用自定义指令绑定的值(binding),那么它还有第三个参数,就是本篇内容要讲的这个 VNode ,那么当听到这个虚拟DOM,VNode,虚拟节点 和 vdom这些词其实指的是。原创 2022-12-05 16:41:21 · 1152 阅读 · 0 评论 -
第四十篇 Vue封装swiper组件(v-swiper指令) 3.0
本篇通过指令进行swiper组件的封装,在这之前封装swiper组件所遇到的问题就是swiper什么时候开始进行初始化的问题,不是初始化过早,就是会被重复执行,所以需要知道到底在什么时机来对swiper进行初始化?上一篇内容讲到自定义指令当中我们知道自定义指令其实就是操作底层DOM,但目的并不一定是非要去操作DOM,虽然大多时候需要去操作DOM需求其实并不多,但是有时候需要知道的是DOM在什么时候会被刚刚创建完;原创 2022-12-02 17:00:03 · 1101 阅读 · 0 评论 -
第三十九篇 自定义指令 - directive
本篇内容记录的是关于自定义指令的内容,自定义指令其实是对底层DOM的操作,但目的并非是一定要去操作DOM为目的,而是通过指令能够准确的知道DOM会在什么时候会被创建;不仅支持支持全局自定义指令 directive,也支持局部指令,可以在组件当中通过diretives 进行定义。原创 2022-11-29 21:18:00 · 1140 阅读 · 0 评论 -
第三十八篇 Vue中封装Swiper组件 2.0
组件的封装不仅需要组件的可复用性,同时还需要组件具备灵活性,本篇内容就通过封装Swiper组件的后续进一步的理解封装组件当中会遇到哪一些问题以及如何解决,通过代码编写测试效果和图示进行讲解原创 2022-11-27 17:39:27 · 811 阅读 · 0 评论 -
第三十七篇 Vue中封装Swiper组件
在上一篇内容的结尾讲到了将swiper初始化从mounted生命周期转移到updated中来能够让swiper动起来,但同时是否会造其他的一个问题?什么问题呢?在每次data中的状态发什么改变,updated中的内容会又重新执行,这样会导致swiper的初始化会重复的执行,如果封装成组件显然不合适,那么如何改进并将swiper封装成一个组件,封装为一个可复用性的组件;那么下面就来如何从静态的swiper组件再到一个动态可被复用的软件;原创 2022-11-25 16:28:50 · 588 阅读 · 0 评论 -
第三十六篇 Vue中使用Swiper
本篇记录如何在Vue当中来使前swiper,在Vue中通过动态请求数据渲染到swiper上需要注意swiper过早的问题,在使用一些第三方库的时候有一些库是很依赖DOM操作的,那么在Vue当中就需要我们知道swiper的节点在什么时候会更新到DOM上,知道什么时候更新我们就能够进行一个Swiper的初始化;原创 2022-11-23 14:00:35 · 1231 阅读 · 0 评论 -
第三十五篇 Swiper 引入使用
本篇记录的时swiper的引入和使用;对于Swiper来说,相信有很多人都不默认了,也有使用过swiper插件的,封装过类似的组件,Swiper的一个使用是非常广泛的,是开源免费、非常强大的一个触摸滑动组件,最典型的就是轮播图了;原创 2022-11-21 16:00:59 · 1981 阅读 · 0 评论 -
第三十四篇 生命周期 - 易理解
通过之前一系列内容的推进来到生命周期的内容了,那么对于生命周期图示这块内容原文档内容需要的是了解和知道含义,这里给大家提供了两个图示和一些简单的例子使用讲解,也为后续的讲解内容做一层铺垫!原创 2022-11-20 20:34:02 · 225 阅读 · 0 评论 -
第三十三篇 transition-group 列表过渡
本篇内容记录的是 列表过渡的一个使用和场景以及所遇到的问题,以及再一次的涉及key的设置,了解Vue中虚拟DOM的一个diff,transition和transition-group提供的一个解决动画的方案,transition能够渲染一个真实DOM而transition-group默认是一个span标签,可以通过tag特性转换元素使用;原创 2022-11-19 21:30:10 · 2198 阅读 · 0 评论 -
第三十二篇 transition 过渡动画
在完成之前的抽屉效果时候是没有完成一个过渡的动画效果,通过其他技术手段应用动画也是可以的,比如动态的切换 class 和 style,通过动态的添加和删除对应的状态是能够驱动动画的,那么本篇内容讲到的是vue当中提供的内置组件 transition 可以帮助你基于状态改变的过渡和动画。原创 2022-11-16 23:40:16 · 2642 阅读 · 0 评论 -
第三十一篇 v-slot 插槽使用
在上一篇 的内容讲到了插槽 slot 的使用,在篇目的尾声也讲到了 是在Vue版本2.6之前使用,而在Vue2.6起是废弃了,改用,那么在上篇内容讲到插槽有两种,一种是单个插槽,另外一种是具名插槽,即有具体名字的;给组件添加这样一个slot,它是属于属性呢还是其他的呢?我们所见的一些指令都是 "v-" 开头的(v-model,v-bind...),那么在新版当中呢相当于规范化一些,即使用 v-slot;原创 2022-11-16 23:47:48 · 1098 阅读 · 0 评论 -
第三十篇 slot - 插槽
在组件的内容中讲到组件的复用性是很重要的以及灵活度,那么本篇目就讲了关于slot内置组件的使用以及所运用的场景,能够提高你对组件的认识以及对场景的应用认识。原创 2022-11-14 18:10:03 · 1721 阅读 · 2 评论 -
第二十九篇 动态组件 - component
在不同组件之间来进行动态的一个切换是一种比较常见的场景,本篇通过使用component组件可以来更好的实现不同组件之间的动态切换,当然使用先前的方式也可以;同时也讲到缓存组件keep-alive组件来保留状态,避免重新渲染!原创 2022-11-12 11:54:39 · 4221 阅读 · 0 评论 -
第二十八篇 v-model 组件运用
在Vue当中我们知道有这样一个指令v-model,它的本质是一层语法糖,能够来实现数据的双向绑定,那么v-model使用在组件上以及通信上会有哪些的妙用之处。原创 2022-11-11 23:26:55 · 100 阅读 · 0 评论 -
第二十七篇 属性修改问题
避免直接修改属性。从组件的引入和使用到父子通信方式以及组件与组件之间的通信进行了一个简单的内容讲解,但在这些内容过程当中,相比会有一些操作让人疑惑,本篇内容就是来盘点这几篇内容当中需要去注意的一些问题,为什么先前的操作是这样的,而跟你想的有些不大一样。原创 2022-11-10 16:30:02 · 266 阅读 · 0 评论 -
第二十六篇 组件通信 - 事件中心bus
关于组件与组件之间的通信,组件与组件之间不能进行直接的来进行通信,需要通过一个"中间人"来进行传递,但在上一篇内容末尾提及到了这样也有一定的缺陷,如果当多个组件需要进行通信,那么这样一来组件与组件的通信变得复杂貌似像一场灾难,那么这篇内容讲述如何拯救这场灾难!前面讲组件通信是通过的是中间人的方式,如下图:那么事件中心是怎样的呢?其实就像公众号一样,发布者将东西发布上去供别人观看使用,而订阅者将东西订阅下来每次有发布就能收到消息;原创 2022-11-08 13:54:19 · 324 阅读 · 0 评论 -
第二十五篇 组件通信 - 间接
组件与组件之间并不能进行直接的组件通信,但是可以通过间接的一种通信方式来实现组件与组件之间的通信,可以找一个中间人这样的模式,但是会发现这种方式有一定的缺陷,如当有多个组件需要这样进行往返的通信,是不是会发现这样子的通信貌似像是一场灾难!原创 2022-11-04 23:02:17 · 319 阅读 · 0 评论 -
第二十四篇 ref 访问子组件
组件的引入和使用,以及父传子props、子传父$emit所对应的场景有了了解之后,知道组件其实是一种孤岛,无法直接访问外部组件的状态或者方法,但是能够间接的使用组件通信来进行组件与组件之间的通信;在讲到的时候进行这样的一个比喻:父传子通过属性,子传父通过事件,尽管有了props和事件,有的时候你仍可能需要在 javascript 里直接访问一个子组件。通过 ref 方法 可以直接访问子组件的实例或子元素;原创 2022-11-02 10:22:39 · 577 阅读 · 0 评论 -
第二十三篇 Vue中子传父 - $emit
上一篇内容讲到Vue中组件通信的父传子,知道父组件向子组件传值是有必要的,有与之相应的应用场景,组件通信当中的子传父,本篇内容记录就是关于这个子组件向父组件传值是通过怎样的方式以及子组件向父组件传递可以有哪些场景运用;通过以上的这个图片能够简单的先了解它的一个过程,下面通过代码编写演示,让你更加清楚知道子传父是一个怎样的过程;通过上面的演示,通过$emit能够将子组件中的值传递到父组件中去,$emit可以触发父组件中定义的事件,就这样实现一个子传父;原创 2022-10-31 21:38:45 · 721 阅读 · 0 评论 -
第二十二篇 Vue中父传子 - props
这一篇内容主要讲Vue中组件传值的方式之一:父组件向子组件传值,通过props传值的方式,以及讲到在父传子中需要注意的一些问题和将组件进行封装使用到这个属性绑定的问题进行简单的讲解!原创 2022-10-30 22:58:13 · 581 阅读 · 0 评论 -
第二十一篇 vue组件引入使用
这篇内容是关于组件在vue中的引入和使用;什么是组件以及做组件化的开发,在Vue中,组件是构成页面中独立结构单元,能够减少重复代码的编写,提高开发效率,降低代码耦合度,便于维护和管理;原创 2022-10-29 23:30:47 · 7386 阅读 · 0 评论 -
第二十篇 axios使用
上一篇 内容讲到在符合W3C标准的浏览器可以直接来使用这个fetch做请求,那么使用vue呢,前面内容也提到推荐使用这个axios第三方库,axios的使用也是非常的方便的,下面来对axios进行了解,了解之后就能够结合上一篇fetch的内容进行对比,知道为啥用这个axios。原创 2022-10-27 20:55:20 · 3007 阅读 · 2 评论 -
第十九篇 fetch请求
本篇就开始讲到关于请求的内容了,当然关于 Vue 的大部分还是会想到axios,因为这是官方推荐用的,了解 Vue 的知道在axios之前还有一个vue-resource,后来也由于作者尤雨溪声明vue-resource 已经不维护了,推荐使用这个axios,那么在此之前先来讲在这个fetch,为什么呢?因为它正是W3C的正式标准,即在任何页面当中不需要引入任何库,就可以直接来使用的;原生的XHR(XMLHttpRequest)是一个设计简陋的API,配置调用方式较为混乱,基于事件的异步不友好,且兼容性不好原创 2022-10-26 23:59:35 · 2499 阅读 · 0 评论 -
第十八篇 Mixins - 混入使用
mixins (混入) 是一种分发Vue组件中可以复用功能,是一种非常灵活的方式,混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项;暂时还没有到使用项目的时候,先进行对 mixins 一个基本的使用和掌握。原创 2022-10-25 21:32:02 · 779 阅读 · 0 评论 -
第十七篇 watch监听(computed、methods、watch区别)
computed:注重结果1. 逻辑计算,防止模板过重,有缓存2. 监听:依赖修改,get方法必须 returnmethods:1. 点击事件处理函数,return 是不必需要的2. 函数表达式的逻辑处理,没有缓存watch:注重过程1. 监听,充当观察者2. 不用return 调用。原创 2022-10-24 10:23:53 · 974 阅读 · 0 评论