m0_57712926的博客

文章目录前言一、基本说明1.computed2. methods3. watch二、三者的加载顺序1. computed2. methods3. 默认加载的时候4. 触发某一事件后总结前言今天我们一起看看vue中methods、computed、watch几个分别有什么样的区别？虽说这个问题不明而喻，但是还是有必要掌握牢固的~一、基本说明1.computed计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例2. metho

目录前言一、mock1. 什么是mock?2. 使用场景3. 实现方式二、vue项目中如何使用？1. 步骤2. 代码演示3. 效果展示总结前言当后端接口还没有开发完毕的时候，我们又急需一份数据来展示看效果时应该怎么办呢？这时我们可以根据后端提供给我们的接口文档，来弄一份真的假数据来协助我们完成前端开发工作，一起来看看如何实现吧~一、mock1. 什么是mock?mock：假的前端程序员提到的mock数据的含义是：真的假数据真的：符合接口规范要求的。假数据：数据是人为创建出来的

目录前言一、 Vue 项目进行 SEO 优化1. SSR服务器渲染2. 静态化 (博客, 介绍性官网)3. 预渲染 prerender-spa-plugin (插件)4. 使用Phantomjs `针对爬虫` 做处理小结总结前言众所周知，vue项目是单页面的应用，是十分不利于SEO优化的。今天我们一起聊一聊关于SEO优化的解决方案~一、 Vue 项目进行 SEO 优化Vue SPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案1. SSR服务器渲染服务端渲染, 在

文章目录前言一、通过 query 传参二、通过 params 传参三、 区别总结前言今天一起看看vue中路由传参的方式都有哪些，又是怎样的方式可以获取到的呢？再来看看它们之间有什么样的区别呢~一、通过 query 传参代码如下（示例）：this.$router.push('/login?username=pp&age=18&desc=xx')this.$router.push({ path: '/login', query: { userna

文章目录前言一、什么是单页面应用二、优缺点1. 优点2. 缺点总结前言今天一起聊一聊单页面应用，看一看它都有什么优缺点。单页面应用见名知意，就是只有一张web页面的应用。一、什么是单页面应用单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS，一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新

目录前言一、概念二、各个生命周期的作用三、生命周期示意图总结前言今天一起来看一下vue2中生命周期，并看一下各个生命周期的作用，看完这篇文章相信你会对vue2生命周期有更好的理解~来看下吧一、概念每个 Vue 实例(每个组件也都是一个vue实例)都有⼀个完整的⽣命周期：开始创建 (空实例)初始化数据编译模版挂载 DOM渲染、更新数据 => 重新渲染卸载这⼀系列过程我们称之为 Vue 的⽣命周期。二、各个生命周期的作用生命周期执行时机beforeCr

目录前言一、active-class二、引起的问题三、解决方法1. 在 router-link 中写入 exact2. 在路由中加入重定向总结前言首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选中样式的切换，在 vue-router 中要使用 active-class 。一、active-class首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选

目录前言一、表单校验的意义二、如何对表单进行校验？1. 准备2. 步骤3. 使用三、结果演示总结前言为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~一、表单校验的意义当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作可以让用户的信息都按一定的规则来设置，方便统一管理通过表单校验可以有效地规避不法分子进行危险输入二、如何对表单进行校验？这里使用一个专门做表单校验的第三方包，文档：vee

目录前言一、应用场景二、代码演示三、 效果演示总结前言今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现一、应用场景用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。二、代码演示用到的butto

文章目录前言一、封装的意义二、如何封装？1. 封装2. 使用三、效果演示总结前言今天一起搞一个支持promise里API的询问框组件，有意学习vue3的同学或者想锻炼自己封装思想的小伙伴不要错过哟~一、封装的意义用户进行敏感操作时，进行询问框提示，可以提高用户体验，避免了用户误操作可扩展性强代码复用性、可维护性高二、如何封装？和之前一样，我们将自己封装的全局组件统一放置在src/components目录下结合之前封装过的my-button.vue和my-message.vue组

文章目录前言一、封装的意义二、如何封装？1. 封装2. 使用三、 效果演示总结前言用elementUI组件库虽然很舒服，不知道各位有没有好奇它其中的el-button是如何封装的呢？今天就一起来看看如何封装自己的按钮组件吧~一、封装的意义项目中按钮风格的统一代码的复用性，可维护性高二、如何封装？用到的地方很多，封装为全局组件。还是和之前一样，放在src/components目录下1. 封装src/components下新建my-button.vue文件代码如下（示例）：&

文章目录前言一、封装的意义二、如何封装？1. 准备2. 使用三、 效果演示总结前言本文章实现一个触底无限加载的功能，简言之就是当还有数据未加载完毕时，显示正在加载中，全部加载完毕后显示加载已完毕的一个效果。一起来看看如何实现~一、封装的意义数据较多的时候，滑动滚动条显示加载状态，可以给用户很好的体验代码维护性更好代码可复用二、如何封装？需要用到@vueuse/core中的useIntersectionObserver，用来判断元素是否出现在可视区链接：useIntersecti

目录前言一、封装的意义二、如何封装？1. 封装2. 使用3. @vueuse/core实现三、 效果演示总结前言复选框的效果在网页中很常见，那么你知道复选框是如何实现的吗？还不会的话快来看看，看完后你就可以自己实现复选框的封装了~一、封装的意义复用性更好代码可维护性可以拓展其他业务二、如何封装？使用到的字体图标为阿里CDN上的字体图标资源，在public/index.html的head标签中引入即可<link rel="stylesheet" href="//at.alicd

目录前言一、为什么封装？二、如何封装？1. 封装2. 使用三、 效果演示总结前言消息提示的弹出框相信大家在浏览网页的时候经常见到，今天跟着本文的脚步一起来自己封装一个消息提示的全局组件吧~一、为什么封装？为了统一项目中提示信息的风格统一项目是由多人合作开发，封装一次，其他人也可以使用二、如何封装？1. 封装和之前文章一样的操作，将公共组件放至src/components下，新建my-message.vue组件代码如下（示例）：<template> <Tran

目录前言一、为什么封装？二、如何封装？1. 封装2. 使用三、效果演示总结前言分页功能相信大家经常见到，不管是前台页面还是后台管理系统，只要涉及到数据较多的时候，就会用到分页组件。本文将带你自己封装一个分页组件，事不宜迟，开整~一、为什么封装？分页功能使用场景较多，故考虑封装为全局组件自己封装成本较低，需要什么功能就添加什么功能相对使用现成组件库，自己封装代码体积可控二、如何封装？1. 封装和之前文章一样的步骤，src/components文件夹下新建my-paginatio

目录前言一、Vue-router 是什么，原理是什么?二、路由中跳转的方式1. 方式一2. 方式二3. 方式三4. 方式四三、Vue-router 的钩子函数都有哪些?1. 全局钩子函数2. 单独路由独享组件3. 组件内钩子总结前言Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用，vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。一、Vue-router 是什么，原理是什么?Vue-route

目录前言一、封装的意义二、如何封装？1. 思路2. 准备2. 使用三、 效果演示总结前言本文将带你用vue3自己封装一个实现计数功能的全局组件，其应用场景相信各位一看便知，那就是购物网站中常见的数量选择模块，一起来看看如何实现哇一、封装的意义项目中需要用到的地方较多模块化开发，降低了代码冗余，是开发更加高效一次封装，到处使用二、如何封装？1. 思路使用vue3中v-model来完成父子组件之间的相互传值，本文章使用vueuse/core中封装好的useVModel来实现这一

目录前言一、准备1. axios2. vueuse/core二、代码实现1. 封装2. 使用三、 效果演示总结前言本文将带你实现地址的选择，将其注册为全局组件，进行三级联动后选定地址。一起来看看吧~一、准备1. axios利用axios发送请求，拿到全部城市数据在项目根目录下打开任意终端，执行npm i axios命令项目中需要发送请求的代码统一放置在src/api目录下，这个目录下新建index.js文件import axios from 'axios'// 获取城市数

目录前言一、封装的意义二、如何封装？1. 准备2. 开始封装3. 使用三、 效果演示总结前言逛购物网站的时候，想必大家都见过鼠标放到商品上，会有一个放大的效果。今天我们就自己动手封装一个放大镜效果的全局组件，一起来看下吧~一、封装的意义从技术角度通过vue插件方式封装为全局组件，整个项目其他位置也可以使用，且使用方便模块化开发思想，一个模块实现一个功能用户角度可以带来更好的浏览体验可以看到商品的细节二、如何封装？1. 准备需要用到@vueuse/core

目录前言一、为什么需要面包屑？二、初级封装1. 实现思路2. 代码演示3. 使用4. 不足三、进阶封装1. 实现思路2. 代码演示3. 使用4. 不足四、高阶封装1. 思路2. 代码演示3. 使用五、使用jsx优化总结前言面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式，我们一起来看看如何实现的吧~一、为什么需要面包屑？面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格

目录前言一、为什么需要组件数据懒加载？二、如何实现组件数据懒加载？1. 准备2. 分析3. 代码演示三、如何使用？总结前言网页中使用懒加载数据是非常常见的场景之一，其可以提高网页的响应速度，也可以避免刚打开网页就加载所有资源的情况，可以给用户带来很好的体验。接下来跟着本文一起来看看如何实现组件数据的懒加载吧~一、为什么需要组件数据懒加载？刚打开网页用户可以看到的视口有限，加载出现在用户视口内的组件，未进入视口的不加载。网页加载速度提高，用户看哪一部分就加载哪一部分资源提高用户体验二、如

目录前言一、为什么封装？二、如何封装？1. 准备2. 注册为全局组件3. 使用演示总结前言vue3项目中如何封装自己的轮播图效果组件呢，希望轮播图可以控制是否自动轮播，当鼠标悬停的时候停止自动轮播。点击左右切换或者分页指示器可以切换图片。这些功能是如何实现的呢？又是如何通过插件方式注册为全局组件的呢？一起来看看如何实现的吧~一、为什么封装？为了迎合es6模块化开发思想注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可二、如何封装？1. 准备像之前vue3——自己封装骨

目录前言一、样式穿透1. 什么是样式穿透？2. 如何使用？二、混入1. 什么是混入？2. 如何使用？三、 less自动化导入1. 自动化导入好处2. 如何实现？总结前言我们所能看到的美观的网页都是经过UI精心设计后，由前端攻城狮搭建的。网页想要有炫酷的样式，就需要用到css来处理，其中不乏会出现大量重复、冗余的代码，这时，像less、sass、scss等样式预处理器就出现了，极大地精简了css代码，提高了开发效率。今天跟着本文一起看看在vue项目中使用less语法如何穿透效果和混入吧~一

目录前言一、为什么需要骨架屏？二、如何封装？1. 准备组件2. 注册为组件3. 注册为插件三、 如何使用？1. 使用演示2. 应用场景介绍总结前言有很多时候，我们在浏览网页的时候，因为网络原因，没有办法第一时间看到网页里面的内容，那么骨架屏可以对网页有一个大致的展示。也可以很友好的让用户感知网页正在加载中，学会这一技术，必不可少~一起来看看如何实现吧一、为什么需要骨架屏？当用户刚打开网页的时候，后台还没有返回数据，页面没有办法渲染。如果用户正好网络状态不是很好，如果页面什么都不显示的话，用

目录前言一、什么是vuex？1. vuex中的模块2. 快速上手二、vue3中使用vuex1. 准备2. 使用三、 vuex持久化1. 为什么需要持久化处理？2. 如何做持久化处理？3. 效果展示总结前言vue2和vue3中如何使用vuex呢？有什么不同之处呢？vue3中vuex如何做持久化处理呢？本篇文章将给你答疑解惑，一起来看一下吧~一、什么是vuex？官网：vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的

目录前言一、为什么需要封装axios？二、如何封装？1. 安装依赖2. 封装3. 使用扩展1. 对象访问方式2. 动态键总结前言如何在vue项目中封装通用的axios呢?为什么要封装呢？直接发请求不好吗？封装后有什么好处呢？你是否同样有这样的疑问呢？一起跟随本文的脚步来看看如何封装一个通用的axios吧~一、为什么需要封装axios？统一管理基地址对请求、响应进行处理方便向后台服务器发送请求，减少冗余代码二、如何封装？1. 安装依赖在vue项目根目录下打开任意终端窗口,运行如下

目录前言一 、为什么学Vue31. 现状2. Vue3优点3. Vue3展望二、 如何创建vue3应用1. 基于Vue脚手架创建项目2. 入口文件分析3. App.vue根组件结构分析4. router文件分析5. vuex文件分析三、 选项API 和 组合API1. 选项API2. 组合API四、 组合API相关方法1. setup函数2. 生命周期五、数据响应式1. reactive函数2. toRef函数3. toRefs函数4. ref函数总结5. computed计算属性6. wa

目录前言一、路由懒加载1. 为什么需要路由懒加载2. 如何实现路由懒加载3. 路由懒加载中的魔法注释二、分析包大小1. 需求2. 如何生成打包分析文件三、webpack配置排除打包1. 需求2. 排除打包四、 引用网络资源1. 需求2. CDN3. 实现步骤五、 打包去除console.log1. 需求2. 代码演示总结前言Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~一、路由懒加载1. 为什么需要路由懒

文章目录前言一、基本结构二、效果预览总结前言Vue项目借助elementUI开发后台管理系统时，遇到的一个需求，就是每页展示5条数据，数据序号为1-5，下一页就需要从6开始，以此类推…一起来看看如何实现吧~一、基本结构使用elementUI提供的表格组件和分页组件表格组件序号那一列将type设置为index,可以让这一列内容按照索引排序，索引+1即为第几条数据。可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。分页组件监听size-chang

目录前言多语言国际化一、国际化处理1. 安装依赖包2. 多语言配置3. 挂载i18n插件二、自定义多语言配置1. 自定义语言配置文件2. 模板中渲染3. 手动修改语言验收成果三、 项目中使用1. 使用下拉框2. 修改语言3. 效果演示全屏功能一、 实现步骤1. 安装依赖包2. 使用插件总结前言Vue项目中如何配合elementUI做国际化操作呢？能不能自定义多语言配置呢？一起来看看实现的步骤吧~多语言国际化一、国际化处理国际化处理经常可以见到的场景，通过一个按钮，将一个网页的主要语言改变，也

目录前言一、什么是RBAC？二、RBAC的应用1. 用户分配角色2. 角色分配权限总结前言做后台管理系统，肯定会牵扯到用户权限的问题。为的是做到不同的用户进入管理系统看到的页面不同，并且根据用户权限来提供相对应的功能。那么怎么在项目中实现呢？一起来看看吧~一、什么是RBAC？为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。二、RBAC的应用先

目录前言一、404页面1. 出现的原因2. 解决方案二、刷新白屏1. 出现原因2. 解决方案三、路由重复1. 出现原因2. 解决方案总结前言这两天做vue后台权限管理系统的时候，发现使用vue提供的addRoute添加路由以后，会出现两个bug，一起来看看如何解决吧~一、404页面1. 出现的原因使用vue提供的addRoutes添加了动态路由以后，404页面的路由设置不在路由的末尾了2. 解决方案将404页面的路由添加到动态路由的末尾代码如下（示例）：// xxx => 用户

目录前言一、为什么要把大文件存储到云服务器?二、如何申请云服务器？1.注册账号2.申请对象存储3.开启跨域访问CORS设置4、访问密钥三、如何用代码向云服务器上传文件？1、下载第三方包2、实例化cos对象3、使用cos提供的api完成上传总结前言这两天用Vue做后台管理系统的时候，要把大文件存储到云服务器，自己服务器存储云服务器返回的地址。那这是如何实现的呢?快来看看操作步骤~一、为什么要把大文件存储到云服务器?云服务器在计算能力、存储空间等各方面都要比自己的服务器强大的多图片的大小比url

目录前言一、如何自定义校验规则？二、结果演示总结前言使用Vue做后台管理系统绕不开的一个框架就是ElementUI，而做后台管理系统，经常会遇见的就是对表单进行规则校验，从而减少不必要的Ajax请求。很多时候ElementUI提供的基础校验没有办法达到我们的需求，这时候就需要我们自定义校验规则。那么就来看看使用ElementUI提供的表单时如何自定义校验规则吧。一、如何自定义校验规则？官网：ElementUI代码如下（示例）：为了统一管理，在src/utils目录下，新建validate.j

目录前言一、技术支持二、注意事项三、效果展示总结前言本文将实现一个集播放音乐和MV的音乐播放器，所有样式和功能均为原创，本项目源码在码云仓库，地址在本文中。感兴趣的小伙伴儿，可以拿上代码自己研究研究~一、技术支持less:布局样式，修改滚动条样式svg：使用到的小图标axios：向服务器发送请求vue:父子组件之间相互传值二、注意事项代码下载下来后，需在终端中npm run serve启动项目播放歌曲时，默认最大音量，辛苦自行调节一下三、效果展示源码地址：Leo的仓库总结

目录前言一、代码演示二、结果演示总结前言你是不是和我一样，早就看PC端浏览器自带的滚动条不爽了呢？快来看看如何修改滚动条的样式吧~一、代码演示在Vue项目中，这个样式可以直接加到App.vue的style标签中。代码如下（示例）：::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0;}::-webkit-scrollbar { -webkit-appearance: none

目录前言一、需求二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、需求示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimpor

目录前言一、基本定义1、MVVM基本定义2、MVC基本定义二、使用场景三、两者之间的区别总结前言一、基本定义1、MVVM基本定义MVVM即Model-View-ViewModel的简写，即模型-视图-视图模型，模型（Model）指的是后端传递的数据，视图（View）指的是所看到的的页面，视图模型（ViewModel）是mvvm模式的核心，它是链接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图（View），即将后端传递的数据转化成所看到的的页面，实现的方式是：数

目录前言一、为什么要封装全局组件？二、如何封装全局组件1.方法一代码演示2.方式二思路代码演示优点总结前言一、为什么要封装全局组件？项目中需要多次使用，进行一次封装，全局使用。迎合了es6的模块化开发思想。二、如何封装全局组件为了统一管理全局组件，建议将封装的全局组件都写在src根目录下一个专门的文件夹中，比如src/components。注：示例中xxx、文件夹名和.vue结尾的文件的名字均可以可以自定义。1.方法一代码演示代码如下（示例）：在src/components文件夹

目录前言前端工程化一、小白眼中的前端VS实际的前端开发二、什么是前端工程化三、前端工程化的好处四、前端工程化的解决方案webpack一、什么是webpack1、概念2、 主要功能3、好处二、webpack基本使用1、在项目中安装webpack2、在项目中配置webpack3、webpack打包入口、出口三、webpack中的插件1、webpack插件的作用2、常用的插件3、devServer节点四、webpack中的loader(加载器)1、loader加载器的作用2、常用的loader加载器打包发布一、为