目录一、什么是生命周期二、生命周期函数三、生命周期的流程四、简单的生命周期代码总结 一、什么是生命周期 每一个组件都可能经历从创建，挂载，更新，卸载的过程。 在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的逻辑代码（比如组件创建完后就请求一些服务器数据） 但是我们如何知道目前组...[2022/2/14]

目录一、认识插槽Slot二、插槽的基本使用三、插槽的默认内容四、多个插槽实现的效果五、动态插槽六、具名插槽的缩写七、渲染作用域八、作用域插槽的案例九、独占默认插槽缩写十、默认插槽和具名的混合总结 一、认识插槽Slot 前面我们会通过props传递给组件一些数据，让组件来进行展示，但是为了让这个组...[2022/2/14]

目录一、Provide和Inject二、Provide和Inject的另一种写法三、全局事件总线mitt库总结 我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provid...[2022/2/14]

目录一、props二、细节三props大小写命名三、非props的attributes属性四、子组件传递给父组件五、简单例子总结 在vue中如何实现父子组件通信，本篇博客将会详细介绍父子组件通信的流程。 如图所示，父组件向子组件传递数据，可以通过props，子组件向父组件传递数据可以通过触...[2022/2/14]

目录一、引入二、vue中的异步组件三、异步组件和suspense总结 一、引入 我们在讲异步组件之前，我们再来回顾一下webpack打包时的分包操作。我们可以使用import()异步加载模块来实现分包操作。import函数的返回值是一个Promise，所以我们可以使用then进行下一步处理。 ...[2022/2/14]

目录首次渲染init方法内部$mount内部 - 编译版本内部逻辑$mount内部 - 运行时版本内部逻辑(最终执行) runtime/index中的 $mount方法core/instance/lifecycle 中的mountComponentsrc/core/observer/watcher总...[2022/2/9]

目录think-swagger-ui-vuele使用方式登陆主页设置swagger 信息展示 think-swagger-ui-vuele swagger-ui有非常多的版本，觉得不太好用，用postman，每个接口都要自己进行录入。所以在基于think-vuele进行了swagger格式jso...[2022/2/9]

目录Vue的同步和异步调用顺序例如Vue两个异步方法顺序执行第一个异步方法第二个异步方法 Vue的同步和异步调用顺序 Vue中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制。 以下方法中都带有promise函数或异步调用。 ?? ?init...[2022/1/24]

目录v-for循环遍历图片不显示错误错误vue本地图片路径正确，但for循环不显示经过改正加个require()就可以显示了 v-for循环遍历图片不显示错误 <template> <div cla ="demo" :style="{width:innerWidth} + ...[2022/1/24]

目录数据加载,插值表达式闪烁问题1.在公共的c 样式中加入2.在el挂载的标签上添加解决插值表达式渲染数据闪动先看代码出现的问题解决方法如下图 数据加载,插值表达式闪烁问题 1.在公共的c 样式中加入 [v-cloak] { ? ? display: none !important; }...[2022/1/24]

目录Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue同步和异步的问题基本语法实例 Vue的同步调用和异步调用 Promise实现异步调用 异步调用，增加a、b两个方法，并在mounted中调用。 观察客户端，并没有按照方法执行的顺序输出，使用...[2022/1/24]

目录自定义指令directives及常用钩子函数说明钩子函数vue 全局定义局部定义（vue-cli）钩子函数里面的参数vue 自定义指令 directives选项directives选项中定义 指令 自定义指令directives及常用钩子函数 说明 除了核心功能默认内置的指令 ...[2022/1/24]

目录vue 局部过滤器获取不到thisvue filters为什么获取不到this问题原因解决方法 vue 局部过滤器获取不到this data里面加个字段赋值this。 <el-table-column property="sendLab" label="项目流向" width...[2022/1/24]

目录前言集成阿里云验证前端需要什么引入阿里云验证封装一个验证组件使用组件思考 前言 滑块验证是比较常见的人机鉴别手段，但是自己做一时半会还真搞不出来，想想这玩意还挺难琢磨，怎么识别是否是人机呢？本文介绍Vue+阿里云验证做出这个小功能。 集成阿里云验证 前端需要什么 appkey...[2022/1/19]

目录前言如图所示：方法如下：总结 前言 vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下，一个好的组件必须有其必不可少的有优点：一是能提高应用开发效率、测试性、复用性等；二是组件应该是高内聚、低耦合的；三是组件应遵循单向数据流的原则。 在实现我的图片的拖拽组...[2022/1/18]

昨天在做的一个功能时，同时弹出多个框展示多个表格数据。 这些弹出框可以自由拖动。单独的拖动好实现，给元素绑定 mousedowm 事件。 这里就想到了 Vue 里面自定义指令来实现。 一、自定义指令 在使用自定义指令之前，先对自定义指令有一定的了解。从以下几个方面着手： 1、自定...[2022/1/18]

目录一、相关配置情况一（使用的工具是 vue-cil）情况二（使用的工具是 webpack） 二、打包  一、相关配置 情况一（使用的工具是 vue-cil）         如果是用 vue...[2022/1/18]

目录一、在 VS Code 中配置调试二、debugger语句三、Vue Devtools总结 一、在 VS Code 中配置调试 使用 Vue CLI 2搭建项目时： 更新 config/index.js 内的 devtool property： devtool: ''source-m...[2022/1/18]

目录前言创建应用添加 Loading 效果开始创建应用多页面改造总结 前言 Vue 开发实践为本人的最佳实践，非业内最佳，仅用于提供给各位做参考，这是系列文，但发布时间和内容不固定。 通常情况下一个 前端工程 只会导出 一个 前端单页应用，而 main.js 就是这个应用的入口文件。 创...[2022/1/17]

按如下步骤进行 1.request.js内容：http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容：请求数据方式封装 3.utils.js内容：获取token，判断token是否存在 4.store文件： vuex 仓库配置...[2022/1/3]

目录一、相关配置情况一（使用的工具是 vue-cil）情况二（使用的工具是 webpack） 二、打包 总结 一、相关配置 情况一（使用的工具是 vue-cil） 如果是用 vue-cli 创建的项目，则项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；...[2022/1/3]

目录1：前端手写分页(数据量小的情况下)2：后端分页，前端只需要关注传递的page和pageSize 总结 1：前端手写分页(数据量小的情况下) 前端需要使用slice截取： tableData((page-1)pageSize,pagepageSize) 2：后端分页，前端只需...[2021/12/31]

新建server.js yarn init -y yarn add expre nodemon -D var expre = require("expre "); const fs = require("fs"); var path = require("path"); cons...[2021/12/31]

本文主要介绍了vue拖拽添加的简单实现，具体如下： 效果图 并没有判断是否重复,没有删除旧数据 数据体 <MyShuttle :dataOrigin=''[ { Name:"数据001", ...[2021/12/31]

目录1.问题描述 2.原因分析 3.解决思路 4.处理过程 1.问题描述 对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时，正常切换两个便捷页签时是可以正常缓存的，但删除最后一个页签时，此时另一个页签页面此时已经不缓存了。 2.原因分析 keep-alive默认支...[2021/12/31]

目录一、基础 1.ref 2.toRef3.toRefs4.最佳的使用方式二、深入 1.为什么需要ref2.ref为什么需要.value3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法，其各自的作用当然也不尽相同，每一种方法都有其自己的应用场景，今天我们来聊聊什么是r...[2021/12/31]

利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <div cla ="companyManage"> <router-view ...[2021/12/31]

前言 如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装 支持代码高亮 62种主题颜色，例如monokai等等 支持json, sql, javascript，c ，xml, htm...[2021/12/31]

目录1. 安装 vue 脚手架 2. 创建项目 3. 引入 bimface 文件 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1、安装 vue 脚手架 ...[2021/12/31]

目录前言一、需求及效果需求效果二、代码实现index.vue(html)datemethods测试效果三、资料参考inputTimePicker(时间选择器)详细在官网地址： 总结 前言 vue2 整合 cube-ui 时间选择器(供有点点基础的看) 一、需求及效果 需求 我们要在...[2021/12/20]

目录效果前端实现后端实现总结 读取两个表的数据 将用户及图像联系在一起 效果 前端实现 修改关联的时候，前端向后端传入array[number]，后端存为字符串 这时在前端获取数据时，需要循环处理为数字数组 <template> ...[2021/12/20]

首先需要安装Vue-cli： npm install -g vue-cli 全局先安装Vue-cli，安装好了Vue-cli。就可以使用它来构建项目 vue init webpack vw-layout 进入到刚创建的vw-layout: ...[2021/12/20]

目录$nextTick()$forceUpdate()$set().sync——2.3.0+ 新增（Vue 3.x中已被v-model替换，不再支持）总结 $nextTick() this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 D...[2021/12/20]

vue3组件通信方式为以下几种 props $emit $expose / ref $attrs v-model provide / inject Vuex mitt props &l...[2021/12/15]

目录1、beforeCreate和created函数2、beforeMount和mounted函数3、beforeUpdate和updated函数4、beforeDestroy和destroyed函数总结 1、beforeCreate和created函数 beforeCreate和create...[2021/12/15]

目录介绍开始安装 ①直接下载方式 ②CND方式③NPM方式④Yarn方式NPM方式安装的使用方式 store概念及使用概念：定义使用mutations概念及使用概念：使用：定义使用action概念及使用概念：定义使用getters概念及使用概念：定义使用总结 介绍 Vuex是实现组件全局状态（...[2021/12/15]

网上找了好多方法改着也没用，后面从一个大佬上看到的，就摘下来了，字体的话还是原来系统自带的看着舒服，就自己添加上去了，需要改动的可自行修改，在右上角文件--首选项--设置--搜索setting---在setting.json编辑，把其他的注释掉，换上下面的代码块就可以了，字体大小和行高可自行修改 ...[2021/12/15]

目录Vue2响应式原理回顾Vue3响应式原理剖析嵌套对象响应式避免重复代理总结 Vue2响应式原理回顾 1.对象响应化：遍历每个key，定义getter、setter 2.数组响应化：覆盖数组原型方法，额外增加通知逻辑 const originalProto = Array...[2021/12/15]

目录方法一一、配置与安装步骤： 方法二方法三总结 方法一 一、配置与安装步骤： 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹： 2、在 config 文件夹中创建 rem.js： 3、将以下代码复制到 rem.js 中： ...[2021/12/9]

目录前言如何实现多语言切换 ？1、安装包vue-i18n2、在src目录下新建如图：3、 在main.js中4、在vue文件中使用如何动态切换语言并更改elementUI语言 ？1、利用vuex，在mutations中写一个方法更改element语言2、使用更改完elementUI组件视图不更新？1...[2021/12/9]

目录错误示范通过computed当图片不变的时候直接引入通过c 变量切换图片通过c 绘制总结 在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范 也许你的代码里常常会这样写 <template> <...[2021/12/9]

目录总结放前面：???? 前言：????公共????????全局????????弹框??????????结语： 总结放前面： Tipes: 封装弹框组件使用了Teleport，避免了组件嵌套可能导致的定位层级的隐患，还使用了defineProps，defineEmits，插槽增加了组件的拓展性。...[2021/12/9]

目录侦听器watch?格式设置侦听器：总结 侦听器watch? 函数名就是要侦听的元素的名字 传入的参数第一个是变化后的新值newval，第二个是变化前的旧值oldval? 格式 方法格式的侦听器 无法在刚进入页面时自动触发，只有在侦听到变化才会触...[2021/12/8]

目录1.匿名插槽2.具名插槽总结 slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。 插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。 slot又分三类，默认插槽，具名插槽和作用域插槽。（这里...[2021/12/8]

目录npm下载步骤（1）导入（2）vue-qr参数 示例总结 “二维码”的英文是“QR Code”，“QR”是“Quick Response”的缩写，反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。 npm下载 npm in...[2021/12/8]

目录1. Vue概述Vue官网MVVM架构模式Vue简介2. 初识Vue3. 模板语法 1、插值语法：2、指令语法：4. 数据绑定5. el与data的两种写法1、el有2种写法new2、data有2种写法3、一个重要的原则：总结 1. Vue概述 Vue官网 英文官网: https: v...[2021/12/8]

使用token做登录验证的思路大致如下： 1、在第一次登录的时候前端调用后端的接口，把用户名和密码传给后端。 2、后端收到请求，验证用户名和密码，验证成功后，返回给前端一个token值。 3、前端收到后端传给的token值，将token存储在本地 loaclStorage和vuex中。...[2021/11/29]

目录一、安装：二、使用：三、内置方法：四、使用：总结 官网： https: github.com/xyxiao001/vue-cropper 一、安装： npm install vue-cropper 或者 yarn add vue-cropper...[2021/11/24]

目录Vue监听属性什么是监听属性？监听属性和计算属性的区别？监听属性的使用深度监听立即调用总结 Vue监听属性 什么是监听属性？ 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。 监听属性和计算属性的区别？ 计算属性是依赖...[2021/11/24]

如何定义和使用： 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下放置，为了方便使用，一般都会都插槽slot指定一个name属性值，当要使用该插槽时，只需要在要使用的标签内添加...[2021/11/24]