Vue
文章平均质量分 70
主要记录Vue.js学习过程中遇到的问题和心得体会。
小绵杨Yancy
Trouble is a friend.
展开
-
vue3组合式api的正确用法
在复杂的业务逻辑的压力下,很容易就会写出这种流水账代码,更糟糕的是可能会有类似于使用一个reactive包裹页面中所有数据,然后在按顺序写methods、computed、watch、生命周期函数的代码,那这和vue2有什么区别呢?在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。通过这种写法,就避免了原来选项式api,逻辑冗余,需要不停滚动去查看data、method的问题。vue3官网也提出了。原创 2024-06-18 09:45:01 · 606 阅读 · 0 评论 -
ElementPlus非表单组件ElUpload值更新后校验不消失问题
先触发表单的必填校验(点击提交按钮),然后再上传文件,必填校验的提示一直存在,如果再次点击提交,手动触发表单校验,必填校验消失,说明表单中的值是改变了的,但是值改变没有触发校验。原创 2024-06-16 15:09:36 · 835 阅读 · 2 评论 -
elementUI动态嵌套el-form表单校验
前端项目开发过程中表单校验是非常常见的需求,elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。Form 组件允许你验证用户的输入是否符合规范,来帮助你找到和纠正错误。Form 组件提供了表单验证的功能,只需为 rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。原创 2023-03-19 09:00:00 · 7431 阅读 · 2 评论 -
vue3项目使用样式穿透修改elementUI默认样式
在css单文件中,我们在style标签中写组件的样式,可以看到,一般style标签都会带上一个scoped属性,这样可以实现及时不同组件选择器一样,但是样式互不干扰。看一个例子,我们在两个组件中都定义一个类,在对应的scope标签中设置不同的样式。可以看到,vue为我们在不同的组件中的标签上加上了一个。然后通过属性选择器,实现不同属性的标签样式互不干扰。css属性选择器的作用是:为带有特定属性的 HTML 元素设置样式这也是style标签scoped属性实现样式模块化的原理。原创 2023-03-12 16:01:07 · 7753 阅读 · 0 评论 -
ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)
如图,虽然11号不能选择,但是点击事件选择框,则可以选择一整天的时间。显然,这样用户体验十分不好,最理想的应该是用户可以选择11号,点开时间选择框`只能选择当前之后的时分秒`。在网上找了很多方案,发现全是旧版elementUI的,好像elementPLUS把selectableRange已经去掉了,而文档中也没有明确指出限制时分秒的属性,原创 2023-03-11 23:27:46 · 17297 阅读 · 13 评论 -
vue3中使用echarts初次渲染图表十分小的问题及解决方法
项目场景:vue3中引入了echarts图表,在onMounted中初始化图表。vue3中使用echarts初次渲染图表十分小的问题及解决方法原创 2023-03-08 16:26:53 · 3550 阅读 · 1 评论 -
vue3新一代状态管理器 — pinia的学习与使用
最终,我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容,并决定实现它 取而代之的是新的建议。它们可以使用 defineStore() 中的 actions 属性定义,并且它们非常适合定义业务逻辑,也可以直接在store实例上调用action。相比较于vuex,pinia去除了mutation,同步和异步操作都通过actions,并且没有了module的概念,defineStore会创建一个新的store。我们也可以在定义常规函数时通过 this 访问到整个 store 的实例。原创 2022-11-26 09:00:00 · 4767 阅读 · 0 评论 -
vue2升级vue3的新变化
vue 作者(尤大)在2022-2-7起宣布 vue3 正式作为默认版本,vue3目前也是可以投入生产项目中了,vue3 + vite + TS也是当前比较流行的配置。本篇博客主要记录一下相比较于vue2,vue3的新变化。原创 2022-11-24 22:16:34 · 4177 阅读 · 0 评论 -
【Echarts】自定义提示框tooltip样式,实现点击路由跳转
后来搜索了相关的解决办法,我采用了一个比较简单的方法,在vue中定义一个路由跳转方法,将该方法挂载到window上,这样模板字符串就可以直接调用路由跳转的事件了。修改echarts提供的默认tooltip样式,并且点击tooltip中的菜单能够实现路由跳转 😑。这里formatter的返回值是一个字符串,用于生成HTML模板(也就是我们自定义的内容)。因为该方法直接挂载到了window上,所以字符串模板中的HTML也可以直接调用。需要注意的是,我们返回的模板字符串并不能使用vue的data数据和指令(原创 2022-09-13 14:58:44 · 2460 阅读 · 0 评论 -
【Vue】Axios取消请求
有的时候我们需要取消axios发出的请求,例如在退出页面时,取消掉仍然在进行的请求。AbortController和CancelToken。CancelTokenAbortController和CancleToken原创 2022-09-02 15:08:45 · 3086 阅读 · 0 评论 -
Vue项目使用echarts实现图表数据展示
官网有许多图表案例,并且可以直接复制对应的配置代码。对于入门学习,不考虑项目的体积等问题,直接全部引入即可。我看有的教程是直接在main.js中将echarts挂载到vue实例上的,但我感觉在需要使用图表的组件或者页面中直接引入更好。原创 2022-08-25 09:00:00 · 2572 阅读 · 0 评论 -
解决Vue中ecahrts组件不能自适应问题
vue2项目中使用了echarts图标库来进行数据展示,需要解决图表自适应窗口变化以及菜单收缩后容器变化。原创 2022-08-15 09:00:00 · 1427 阅读 · 0 评论 -
Vue2 + ElementUI登录界面模板
几乎每个项目都会使用登录页面,这里直接写了一个模板,方便以后直接cv。//模拟异步请求后台接口 登录操作。原创 2022-08-08 15:45:44 · 10158 阅读 · 0 评论 -
【Vue】事件修饰符
对事件可以添加一些通用的限制。语法:或者简写:vue中,事件修饰符处理了许多DOM事件的细节,让我们不用再花费大量的事件去处理这些烦恼的事情,例如事件冒泡等。阻止默认的冒泡事件。如果不阻止冒泡,那么点击子div时,也会触发父div的点击事件,即两次弹窗。与事件冒泡的方向相反,事件捕获由外到内。此时点击child的div会先触发parent的点击事件,然后才触发child div的点击事件,即由外到内顺序触发。跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行,若不是,则冒泡跳过该元原创 2022-06-26 16:11:39 · 587 阅读 · 0 评论 -
vue3动态添加路由
有的时候我们需要根据不同的用户身份生成不同的路由规则,例如:初始化vite + vue + ts项目,引入vue-router。目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用。初始化路由:现在如果去访问vip路由,则会跳转到404页面。如果需要访问vip页面,那么就需要我们动态地添加vip路由,下面代码实现了添加:此时我们再去访问vip路由路径:可以成功访问了。可以了解到,动态添加路由就是使用了router对象的addRoute方法。有时候可能是添加嵌套原创 2022-06-17 16:04:54 · 5168 阅读 · 2 评论 -
Vue3使用ElementPlus的图标icon
vue3项目中。element-push版本:当前版本的icon还没有默认在组件中,需要另外安装才能使用图标。虽然在vue3项目中引入了element-plus,但是不能使用icon图标,因为element-plus组件库目前没有包含icon组件。安装icons-vue在main.ts中注册图标组件:相当于现在一个图标是一个组件,而不是原来的使用class来定义组件了,所以循环遍历ElementPlusIconsVue,将每个图标都作为组件注册到项目中。当然如果你并不需要引入全部的图标,可以在需要的原创 2022-06-01 16:07:13 · 3427 阅读 · 0 评论 -
vue3 + vite中开发环境和生产环境全局变量配置
开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境。生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了。对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容。例如:开发环境时,我们可以请求自己本地的接口(‘/api’ proxy代理)。而部署到服务器上后,应该请求服务器提供的接口(‘http://xxxxxx/api/’ 真实接口)。原创 2022-06-01 09:00:00 · 14140 阅读 · 5 评论 -
【Vue3】新建Vue3.2 + Vite + TS项目
目录一、Vite二、创建项目1、npm create vite@latest2、npm install3、npm run dev三、其他依赖一、Vitevite是尤大(vue作者)写的一个web应用开发工具。首先,vite为什么叫做vite,vite实际上是法语中快的意思,所以顾名思义,这个工具给我们带来的就是更快的开发体验,它实际上是一个面向现代浏览器,基于ECMA标准的ES module实现的一个更轻更快的web应用开发工具。而现代浏览器支持的特性中,在vite中最为重要的一个,就是ES mod原创 2022-05-11 09:58:44 · 3088 阅读 · 0 评论 -
【Vue】使用mock模拟数据
目录一、mock.js二、vue项目使用mock.js三、mock.js文档一、mock.js对于前后端分离的项目,前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟,这是比较浪费时间的,也是十分无聊的。引入mock.js,这样就可以在后端没有提供接口的时候,自己模拟一个mock接口去请求,并且mock.js甚至可以返回你希望得到的随机数据!官方网站地址:http://mockjs.com二、vue项目使用mock.js下面我们尝试在vue中引入mock和axios来原创 2022-05-02 22:34:45 · 7371 阅读 · 3 评论 -
【Vue】v-for中的key
一、v-for官方介绍:当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。我们都知道在使用v-for时,应该搭配上一个key属性,经常直接使用index来作为key,但是这样是存在问题的。二、实例<div id="app"> <ul> <li v-for="(item, ind原创 2022-04-16 12:00:00 · 1619 阅读 · 0 评论 -
【Vue】vue中的$nextTick()
目录一、定义二、实例三、使用nextTick()一、定义vue官方定义:Vue.nextTick([callback,context]),在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOM。nextTick是前端面试中vue框架中必考的部分,一定要掌握。它主要是处理我们再变更完数据以后,无法立刻拿到最新的DOM节点对象的问题。我们可以这样理解:vue执行完渲染后会执行this.nextTick()里面的callback函数。二、实例对于上面的定义,原创 2022-04-15 17:16:36 · 7522 阅读 · 2 评论 -
VueRouter — vue路由hash模式和history模式
目录一、前言二、hash模式三、history模式一、前言对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了。vue脚手架搭建的项目的路由默认是hash模式。hash模式:创建路由实例时,添加mode:"history"属性,即可使用history模式。const router = new VueRouter({ routes, mode: "history"})history模式:二、hash模式最开始学习超链接a时,就可以利用锚点”#”实现跳转原创 2022-03-23 16:42:14 · 11968 阅读 · 3 评论 -
Vue学习 — Vue响应式原理
一、 Object.defineProperty在学习vue响应式原理之前,必须搞懂 Object.defineProperty。Object.defineProperty(obj, prop, descriptor)看到一篇写的十分不错的博客:理解Object.defineProperty方法。二、vue响应式更新所谓响应式,简单说就是用户更改数据(Data)时,视图可以自动刷新,页面UI能够响应数据变化。Vue 最独特的特性之一,是其非侵入性的响应式系统。 ——原创 2022-03-19 15:29:19 · 692 阅读 · 0 评论 -
Vue学习 — 详解Vue生命周期
目录一、前言二、生命周期三、双向绑定一、前言二、生命周期三、双向绑定原创 2022-03-19 10:34:50 · 1245 阅读 · 0 评论 -
Vue学习 — vue组件通信
目录一、 前言二、父子组件传参props / $emitprops$emit三、兄弟组件传参$emit / $on四、爷孙组件$attrs/ $listeners五、使用Vuex通信一、 前言引用自vue.js官网:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:组件化开发是vue非常重要的一个特征,组件是相互独立的,但是许多的组件需要结合在一起,才能组成我们的大型应用,在构建原创 2022-03-17 22:35:07 · 416 阅读 · 0 评论 -
解决vantUI底部tabbar导航与页面不对应问题(window.loaction.hash)
目录前言解决写在最后前言有一个需求是利用vant底部的tabbr组件,搭配vueRouter,实现路由导航。需要自定义图标,并且选中后图标应该变换选中后的样式。vantui是提供了路由模式的tabbar的,但是好像不支持自定义图标。所以用了下图的方法:使用后,发现一个问题,就是如果进入二级页面,也就是不包含tabbar组件的页面,那么当前选中的tabbar项就丢失了,会变回默认的0,所以必须在离开tabbar组件所在页面的时候,记住当前选中的tabbar项或者判断当前路由,实现根据路由重新初始化ta原创 2022-02-12 20:03:58 · 1938 阅读 · 1 评论 -
Vue elementUI中的Breadcrumb面包屑
目录一、前言二、组件使用一、前言面包屑用于显示当前页面的路径,快速返回之前的任意页面。例如:二、组件使用elementUI官网的实例十分简单,并没有配合路由来创建面包屑。但是文档中发现Breadcrumb Item的属性中是有"to"属性的,所以可以通过给"to"属性赋值,来实现同ruter-link一样的效果,即点击单个面包屑项来实现路由跳转。文件目录:路由配置:{ path: '/bread-crumb', name: 'BreadCrumb', com原创 2022-02-09 17:10:08 · 12285 阅读 · 4 评论 -
Vue全家桶学习—Axios的配置
学习了axios的基本使用,就可以完成最基本的请求接口的数据操作了。axios的基础学习,这篇博客更深入学习一下axios。一、Axios的配置如果没有自己配置axios,则使用的就是axios的默认配置。全局配置axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Con原创 2022-01-20 21:20:58 · 4468 阅读 · 0 评论 -
Vue全家桶学习—VueRouter跳转传参
在上一篇博客里,我记录了Vue中路由的基础知识Vue全家桶学习—VueRouter路由基础,今天写一下路由的“ 高级用法 ”,主要包括路由跳转传参和路由前置守卫,顺便记录一下命名路由和嵌套路由。一、命名路由二、嵌套路由三、路由传参四、前置守卫...原创 2022-01-17 19:49:15 · 2785 阅读 · 1 评论 -
Vue全家桶学习—Axios基础
一、AjaxAjax是 Asynchronous JavaScript and XML的缩写,意思是异步网络请求。原生的ajax:var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象//ajax是异步的,设置回调函数request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成原创 2022-01-12 16:45:45 · 253 阅读 · 0 评论 -
Vue全家桶学习—VueRouter路由守卫
一、需求正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。即路由改变时,需要经过"守卫"的检查,判断能不能跳转,或者应该跳转去哪儿。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。。最常使用的就是跳转页面前,判断用户是否登录,如果用户已经登录,则直接跳转,否则跳转到登录界面。在跳转到购物车或者我的页面时,判断是否登录,没有登录则跳转到登录界面。二、实现:在路由配置中,为Me新添加一个默认子路由,即代表Me中子路由默认显示的组件为用户信息。原创 2022-01-07 13:07:05 · 763 阅读 · 0 评论 -
Vue全家桶学习—VueRouter之嵌套路由与命名视图
一、需求在前面的例子中,我们始终只在App.vue中用到了一个router-view。如果现在我有这样一个需求:在“我的”界面中,需要有两个组件,登录和注册。也就是在“我的”界面下,要实现登录和注册的转换。那么在“我的”界面中,就要加入一个router-view。二、实现在路由配置index.js文件中添加Me的子路由:在Me.vue中引入:可以看到在Me.vue中我们加入了router-view,所以在Me.vue中就可以实现登录注册的切换了。三、效果:打开Me页面:点击登录:原创 2022-01-06 21:03:04 · 1361 阅读 · 0 评论 -
Vue全家桶学习—Vuex的4个辅助函数
一、辅助函数当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'...原创 2021-12-21 17:34:11 · 2385 阅读 · 0 评论 -
Vue全家桶学习—VueRouter路由基础
一、VueRouter1、用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。路由本质上就是超链接。2、选中路由的渲染:(1)、router-link-exact-active类当路由到哪里时,该类名就添加到对应的路由标签上。比如:当点击About时,原创 2021-12-20 14:17:41 · 505 阅读 · 0 评论 -
Vue全家桶学习—Vuex核心的五个概念之Module
一、ModuleVuex集中式存储管理应用的所有组件的状态,放在store中,当项目达到一定的规模,那么这个store就会变得十分的复杂。这时候就需要将这样一个庞大的store进行分类处理,也就是将将store分割成一个个module(模块),便于日后的修改和管理。这与我们生活中对仓库中的物品进行分类是一样的,例如将电子类产品放在a货架上,将日常生活产品放在b货架上,这样的货架就对应了一个个module。每个module拥有自己的state、mutations、actions以及getters。cons原创 2021-12-19 22:32:19 · 604 阅读 · 0 评论 -
Vue全家桶学习—Vuex核心的5个概念之Mutations和Actions
一、Mutaions和Actionsaction类似于mutation,二者的关系:1、Action 提交的是 mutation,而不是直接变更状态。2、Action 可以包含任意异步操作。为什么要使用action?mutation必须同步执行,而引入action来分发mutation就可以实现异步的操作。...原创 2021-12-19 12:48:23 · 959 阅读 · 0 评论 -
Vue图片懒加载
1、问题在vue项目中,如果图片是从服务器端加载到页面上,图片较大的时候,就会存在一部分一部分加载的情况,会显示非常卡顿,影响体验。2、实现(1)、图片懒加载首先将图片的src链接设为一张我们已经准备好的图片(比如类似加载中的图片),并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。这样就可以缓解服务器压力,并且提高用户体验。(2)、安装vue-lazyloadnpm i vue-lazyload原创 2021-12-11 08:49:05 · 3880 阅读 · 0 评论 -
Vue全家桶学习—Vuex核心的5个概念之Getters
一、Vuex的5个核心概念(1)、State(2)、Getters(3)、Mutations(4)、Actions(5)、Modules前面一篇博客大致了解了以下state和mutations两个属性。今天主要学习一下Getters属性。二、Getters不禁会让人想到java中的getter。事实上,二者还是有区别的,官方对于getters的解释是:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根原创 2021-12-10 10:28:50 · 1118 阅读 · 0 评论 -
Vue全家桶学习—Vuex入门
一、关于Vuexvuex官网:vuex中文官网官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。我的理解就是将一个组件的数据放在一个公共的区域(理解为仓库),其他组件需要使用的时候,只需调用"仓库"中提供的方法获取或者更改存储的组件值。不必要通过父子组件繁琐地传递值,简化了数据传递的步骤。(个人理解,可能有错,欢迎指正)二、创建一个Vuex项目(购物车)1、创建并获取购物车商品信息原创 2021-12-08 17:14:00 · 544 阅读 · 0 评论 -
qq推广移动端无法唤醒qq“显示需要更新QQ”
问题上次发了一篇关于qq推广的博客:qq不加好友实现网页在线聊天(qq在线客服)但是在使用时候发现了一个问题,无法在手机端唤起qq,会一直卡在提醒qq更新界面,但是显然不是qq版本的问题。解决在页面中加入:即判断用户设备是否是pc端data () { return{ isPc: false } }, created() {if(/Android|webOS|ipad|iPhone|iPod|BlackBerry/i.test(navigator.userAg原创 2021-11-25 22:53:33 · 724 阅读 · 0 评论