- 博客(192)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue整体实现思想及mini-vue的实现
vue整体实现思想及mini-vue的实现一、三大核心系统二、实现Mini-Vue1、描述2、渲染系统实现一、三大核心系统Compiler模块：编译模板系统主要用来将template模板转换为render渲染函数Runtime模块：也可以称之为Renderer模块，真正渲染的模块主要用来将虚拟DOM转变为真实DOM，并且渲染到浏览器页面上主要的实现原理是利用了snabbdom的思想，具体可以看我的另一篇转载文章，点下方虚拟DOM原理Reactivity模块：响应式系统主要用来当dom发生
2022-06-01 15:40:16
837
转载 vue虚拟DOM原理了解
vue虚拟DOM原理了解一、什么是虚拟DOM？二、为什么要使用虚拟 DOM？三、虚拟DOM的作用四、虚拟DOM的实现原理1、snabbdom2、snabbdom模块3、snabbdom源码概述4、Snabbdom 源码实现一、什么是虚拟DOM？虚拟 DOM(Virtual DOM) 是由普通的 JavaScript 对象来描述 DOM对象状态的变化首先作用于虚拟 DOM，最终映射到真实的DOM中Vue.js2.x内部使用的虚拟 DOM是改造的Snabbdom二、为什么要使用虚拟 DOM？虚
2022-05-24 18:15:07
5903
原创 数组去重以及数组对象去重方法总结
数组去重以及数组对象去重方法总结一、数组对象去重1、reduce方法2、利用原生js+空对象+空数组3、利用原生js+标志位+空数组4、利用双指针思想+splice方法二、数组去重1、利用新数组+标志位2、排序+新数组+相邻比较3、新对象+新数组4、新数组+indexOf5、新数组+includes6、新数组+filter+includes7、新数组+foreach+includes8、 双指针思想+splice9、新数组+lastIndexOf10、ES6的set 方法一、数组对象去重1、reduce
2022-05-09 15:46:07
5281
原创 vue3的Teleport和插件的认识与 了解
vue3的Teleport和插件的认识与 了解一、认识Teleport二、和组件结合使用三、多个teleport四、认识Vue插件五、插件的编写方式一、认识Teleport在组件化开发中，我们封装一个组件A，在另外一个组件B中使用那么组件A中template的元素，会被挂载到组件B中template的某个位置最终我们的应用程序会形成一颗DOM树结构但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置比如移动到body元素上，或者我们有其他的div#
2022-04-19 19:54:46
423
1
原创 vue3的自定义指令详解
vue3的自定义指令详解一、认识自定义指令二、指令的生命周期三、指令的参数和修饰符四、自定义指令练习一、认识自定义指令在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令注意：在Vue中，代码的复用和抽象主要还是通过组件通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令自定义指令分为两种自定义局部指令：组件中通过directives 选项，只能在当前组件中
2022-04-18 20:26:25
4821
2
原创 vue中render函数和h函数以及jsx使用的详解
vue中h函数的详解一、认识h函数二、h()函数 如何使用呢？三、h函数的基本使用四、h函数计数器案例五、setup函数计数器案例六、函数组件和插槽的使用七、jsx组件的使用一、认识h函数Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）
2022-04-15 20:05:30
3724
原创 vue3中的单文件组件＜script setup＞详解
vue3中的单文件组件<script setup>详解一、相比普通script语法的优势二、基本语法三、响应式四、使用组件五、使用自定义指令六、defineProps 和 defineEmits七、defineExpose八、useSlots 和 useAttrs九、顶层 await一、相比普通script语法的优势<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势更少的
2022-04-15 17:32:11
35103
5
原创 vue3的Composition API详解，包含hook的思想
vue3的Composition API详解一、Options API的弊端二、认识Composition API三、setup1、setup函数的参数2、setup函数的返回值3、setup不可以使用this4、Reactive API5、Ref API1、基本使用2、Ref自动解包6、readonly1、认识readonly2、readonly的使用3、readonly的应用一、Options API的弊端在Vue2中，我们编写组件的方式是Options APIOptions API的一大特点就
2022-04-14 22:14:49
2239
3
原创 vue3中的Mixin和extends详解
vue3中的Mixin详解一、认识Mixin二、Mixin的基本使用三、Mixin的合并规则一、认识Mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能一个Mixin对象可以包含任何组件选项当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选
2022-04-13 14:12:48
1180
原创 vue3过渡和动画详解
vue3过渡和动画详解一、认识动画二、Vue的transition动画三、Transition组件的原理一、认识动画在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-groupVue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果我们来看一个案例Hello World的显示和隐藏通过下面
2022-04-11 21:06:18
1120
原创 从vue2迁移到vue3，细节处有啥变化？
vue3新增api及vue2部分属性在vue3中变化的地方一、说明二、子传父时使用的emit一、说明其实vue3大部分的知识点和vue2都是一样的，这篇文章是介绍vue2中部分属性在vue3中的变化，以及vue3新增加的一些东西。二、子传父时使用的emit在 Vue 2 中，你可以定义一个组件可接收的 prop，但是你无法声明它可以触发哪些事件<template> <div> <p>{{ text }}</p> &
2022-04-08 17:52:22
3855
1
原创 vue的动态组件和异步组件及keep-alive
vue的动态组件和异步组件一、动态组件二、keep-alive三、异步组件一、动态组件动态组件是使用 component 组件，通过一个特殊的attribute is 来实现下面通过一个例子去解释动态组件怎么用如上图所示，比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示这个案例我们可以通过三种不同的实现思路来实现方式一：通过v-if来判断，显示不同的组件方式二：动态组件的方式方式三：使用路由router-link和router-viewv-if显
2022-04-07 22:09:16
518
原创 Vite入门与了解
Vite入门与了解一、认识vite二、浏览器原生支持模块化三、Vite的安装和使用四、Vite对css的支持五、Vite对TypeScript的支持六、Vite对vue的支持七、Vite打包项目八、ESBuild解析九、Vite脚手架工具一、认识viteWebpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具比如rollup、parcel、gulp、vite等等什么是vite呢？ 官方的定位：下一代前端开发与构建工具如何定义下一代开发和构建工具呢？我们知
2022-04-06 15:42:20
2354
原创 webpack5常用配置--从零开始学webpack，搭建自己的脚手架
webpack入门学习一、是什么一、是什么本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。我们来对上面的解释进行拆解：打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具静态的static：这样表述的原因是我们
2022-04-01 18:21:36
3505
原创 javascript对象的引用赋值以及浅拷贝与深拷贝
javascript对象的引用赋值以及浅拷贝与深拷贝一、对象的引用赋值1、js中的数据类型2、案例一3、案例二3、案例三4、案例四5、总结：(精髓所在)二、浅拷贝与深拷贝1、区别与概念2、如果是基本数据类型，名字和值都会储存在栈内存中3、如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值4、实现浅拷贝的方法5、 实现深拷贝的方法一、对象的引用赋值1、js中的数据类型基本类型数字（number）字符串（string）布尔值（boolean）空值
2022-03-24 22:32:24
2580
原创 后台管理系统模板
后台管理系统模板介绍项目地址项目截图介绍此项目为后台管理系统模板，含有权限控制，包括菜单权限控制，按钮权限控制，界面权限控制，请求和响应控制前端主要技术栈vue2.x+vuex+vue-router+token认证+ant-design-vue+自定义主题+按需加载+jsonp+axios+viser-vue+wangeditor后端主要技术栈nodejs+express+mongodb+mongoose等项目地址gitee链接项目截图1、登录首页分类管理分类管理–修改分类名
2022-03-16 14:45:31
2158
原创 vue权限管理---按钮权限如何写？
vue权限管理---按钮权限如何写？一、问题描述二、方法一三、方法二一、问题描述我们都知道前端权限控制主要也就四个方面1、菜单的控制在登录请求中，会得到权限数据（有可能后端会返回完整的路由，也有可能只返回一个路径数组，前端按情况去做相应代码编写即可）这个需要后端返回的数据支持，前端根据权限数据，展示对应的菜单，点击菜单，才能看到相关的界面2、界面的控制如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面，如果用户已经登录，可是手动敲入非权限内的地址，则需要
2022-03-11 12:07:59
11111
6
原创 使用ant-design-vue的modal，modal封装成一个组件，父组件调用关闭modal之后重新刷新父组件的表格数据怎么办？
使用ant-design-vue的modal，modal封装成一个组件，父组件调用关闭modal之后重新刷新父组件的表格数据怎么办？一、问题描述二、问题解决一、问题描述最近实践过程中遇到这样一个问题，我封装了一个modal组件，在父组件中引入并且使用，当打开modal修改完数据点击确定之后，关闭modal，此时发现表格的数据没有重新加载。这样很不合理，明明数据已经更新了，但是并没有立即展示出来。二、问题解决最初的想法是，在父组件中把刷新表格的方法，以及当前页，每页显示的条数，传给子组件。然后子组件通
2022-03-07 21:12:14
2193
原创 使用ant-design-vue的madal在table中，只能点击一次，并且会报错Avoid mutating a prop directly since...
使用ant-design-vue的madal在table中，只能点击一次，并且会报错一、问题描述二、解决办法一、问题描述最近学习过程中遇到这样一个问题。我想实现点击表格的每一行的修改按钮，都弹出一个modal框。最初的思路（注意：之前用element-ui这么做没问题），封装一个modal组件，然后在父组件进行引入，当点击修改按钮的时候，改变显示与否的状态，并且传给modal子组件，子组件通过props接收。但问题来了，点击第一次，可以正常弹出并且关闭，点击第二次modal框不弹了，并且始终报错[
2022-03-07 10:50:35
1059
原创 vue中v-model直接绑定vuex中的状态属性遇到的问题
vue中v-model直接绑定vuex中的状态属性遇到的问题一、问题描述二、问题解决一、问题描述最近做项目，遇到这样一个问题。我在vuex的state中保存了一个状态属性，当点击某一按钮的时候，改变其值，然后另一个组件也用到了这个属性，需要用v-model绑定，我就想着直接绑定用v-model = 'this.$store.state.xxx',结果报错了，说这个属性没有定义。错误的代码二、问题解决上面之所以报错的原因是因为v-model主要提供了两个功能，view层输入值影响data的
2022-03-02 16:58:48
1803
原创 发送请求的时候如何将Request Payload转换为Form Data格式
发送请求的时候如何将Request Payload转换为Form Data格式一、问题描述二、问题解决一、问题描述最近做项目遇到了一个问题，前端利用封装好的axios发一个请求给后端，请求可以发送成功，但拿不到正确的数据，在swagger上测试接口拿到的数据和在chorme控制台测试拿到的数据不一样，通过仔细比较，发现控制台payload下一个是Form Data，另一个是Request Payload，所以我想问题就在这里。如下图，正确的方式错误的方式再看一下有问题的代码，只列举主要地方看
2022-02-25 16:19:01
3178
2
原创 网页自定义滚动条的样式
网页自定义滚动条的样式基础代码如下<div class="content"> <div class="contentHeight"></div></div>.content { width: 300px; height: 300px; overflow: hidden; overflow-y: scroll; background-color: #00FFFF; border: 1px solid #000;}.contentHei
2022-02-24 21:52:58
435
原创 Node.js中路径模块的join方法以及__dirname和./的区别
Node.js中路径模块的join方法以及__dirname和./的区别一、join方法二、__dirname 和 ./ 的区别三、综合应用一、join方法path.join() 方法使用特定于平台的分隔符作为定界符将所有给定的 path 片段连接在一起，然后规范化生成的路径。零长度的 path 片段被忽略。 如果连接的路径字符串是零长度字符串，则将返回 ‘.’，表示当前工作目录path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');//
2022-02-23 18:20:06
2644
原创 Node.js 路径模块
Node.js 路径模块一、path.basename()二、path.dirname()三、path.extname()四、path.isAbsolute()五、path.join()六、path.normalize()七、path.parse()八、path.relative()九、path.resolve()一、path.basename()返回路径的最后一部分。 第二个参数可以过滤掉文件的扩展名：require('path').basename('/test/something') //som
2022-02-23 17:54:18
137
原创 前端跨域解决方案总结
前端跨域解决方案总结一、什么是跨域？二、为什么会产生跨域三、常见的跨域场景四、9种跨域解决方案1、JSONP跨域1、概述2、实现流程3、jsonp简单实现1)、原生JS实现2）jquery Ajax实现：3）Vue axios实现：4)、后端node.js代码：2、跨域资源共享（CORS）一、什么是跨域？在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。二、为什么会产生跨域因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源
2022-02-20 21:36:43
4107
2
原创 mongoose如何给一个对象添加对应Schema中没有的字段--＞利用_doc
mongoose如何给一个对象添加对应Schema中没有的字段-->利用_doc一、问题描述二、问题原因三、问题解决一、问题描述最近学习nodejs，用express+mongodb+mongoose去搭建后台api接口，但是遇到了一个问题。当登录的时候，我想判断得到用户的相关权限，以便根据权限展示对应的菜单。我的思路是这样的，首先获取前台传过来的username和password，后台验证之后，如果当前登录用户有role_id这个属性，那么就根据这个属性，去roles集合中查找对应的角色信息（
2022-02-18 22:08:41
831
原创 关闭浏览器窗口的时候，如何清空localStorage的数据
关闭浏览器窗口的时候，如何清空localStorage的数据一、对于单页面应用，例如vue等二、对于多页面应用1、第一种方案（对于vue）2、第二种方案（对于原生js）一、对于单页面应用，例如vue等将window.onbeforeunload监听的方法放在App.vue<template> <div id="main" class="app-main"> <router-view></router-view> </div>
2022-02-18 14:40:48
11666
5
原创 mongoose 入门（四）使用aggregate 聚合管道、使用 populate 实现关联查询
使用aggregate 聚合管道、使用 populate 实现关联查询一、mongoose中两个表关联查询aggregate1、案例一2、案例二二、mongoose中多表（N个表）关联查询aggregate三、 Populate 实现多个表的关联查询一、mongoose中两个表关联查询aggregate1、案例一db.js//连接数据库var mongoose = require('mongoose');//useNewUrlParser这个属性会在url里识别验证用户所需的db,未升级前
2022-02-12 17:29:04
1976
原创 mongoose 入门（三）Mongoose 索引、内置 CURD 方 法、扩展的静态方法和实例方法、数据校验
Mongoose 索引、内置 CURD 方 法、扩展的静态方法和实例方法、数据校验一、Mongoose 索引二、Mongoose 内置 CURD三、扩展 Mongoose CURD 方法四、Mongoose数据校验1、Mongoose 校验参数2、Mongoose 自定义的验证器一、Mongoose 索引索引是对数据库表中一列或多列的值进行排序的一种结构，可以让我们查询数据库变得更 快。MongoDB 的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的查询 优化技巧。mongoose 中除
2022-02-12 15:56:57
550
原创 mongoose 入门（二）预定义模式修饰符、 Getters 与 Setters 自定义修饰符
预定义模式修饰符、 Getters 与 Setters 自定义修饰符一、mongoose 预定义模式修饰符二、Mongoose Getters 与 Setters 自定义修饰符一、mongoose 预定义模式修饰符lowercase、uppercase 、trimmongoose 提供的预定义模式修饰符，可以对我们增加的数据进行一些格式化db.js//连接数据库var mongoose=require('mongoose');//useNewUrlParser这个属性会在url里识别验证
2022-02-12 14:55:12
829
原创 mongoose 入门（一） mongoose 实现数据 的增、删、改、查、默认参数 、模块化
mongoose 入门以及 mongoose 实现数据 的增、删、改、查一、mongoose 介绍二、mongoose 的安装以及使用1. 安装2、引入 mongoose 并连接数据库3、定义 Schema4、创建数据模型5、查找数据6、增加数据7、修改数据8、删除数据9、保存成功查找10、案例三、mongoose默认参数四、mongoose模块化一、mongoose 介绍Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具。Mongoose 是 NodeJS
2022-02-12 14:16:50
1863
1
原创 Express框架入门（三）结合 multer 上传图片
Express框架入门（三）结合 multer 上传图片一、 Multer 模块介绍二、 Express 上传文件模块 multer 的使用1. 安装 multer2. 引入配置 multer 模块3.使用 multer三、 Express 按照日期生成上传文件目录四、 多文件上传五、综合案例一、 Multer 模块介绍Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。它是写在 busboy 之上非常高效。注意: Mul
2022-02-12 13:21:58
1841
原创 Express 框架入门（二）Cookie、session、应用程序生成器
Express 框架入门（二）Cookie、session、应用程序生成器一、Cookie 简介二、Cookie 特点三、Cookie 的使用四、加密Cookie五、cookie 综合案例六、Session 简单介绍七、Session 的工作流程八、express-session 的使用九、 express-session 的常用参数十、express-session 的常用方法十一、session综合案例十二、负载均衡配置 Session，把 Session 保存到数据库里面十三、Express 路由模块
2022-02-09 22:15:13
1256
原创 Express 框架入门（一）介绍 安装 路由 动态路由 get 传值
Express 框架入门（一）介绍 安装 路由 动态路由 get 传值一、 Express 简单介绍二、 Express 安装使用三、 Express 框架中的路由四、 Express 框架中 ejs 的安装使用五、 利用 Express. static 托管静态文件六、 Express 中间件七、获取 Get Post 请求的参数一、 Express 简单介绍Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架，它提供一系 列强大的特性，帮助你创建各种 Web 和移动
2022-02-09 17:23:08
1076
原创 Nodejs 操作 MongoDb 数据库
Nodejs 操作 MongoDb 数据库一、在 Nodejs 中使用 Mongodb二、Nodejs 操作 MongoDb 数据库一、在 Nodejs 中使用 MongodbNodejs 操作 mongodb 数据库官方文档：http://mongodb.github.io/node-mongodb-native/npm install mongodb --save 或者cnpm install mongodb --save 或者yarn add mongodb二、Nodejs 操作
2022-02-09 11:31:04
1274
原创 MongoDB数据库入门（四） MongoDB的高级查询 、MongoDB多表关联查询、aggregate聚合管道
MongoDB的高级查询 、MongoDB多表关联查询、aggregate聚合管道一、关系型数据库表（集合）与表（集合）之 间的几种关系1、一对一的关系2、一对多的关系3、多对多的关系二、MongoDB 聚合管道（Aggregation Pipeline）三、MongoDB Aggregation 管道操作符与表达式四、 $project五、 $match六、 $group七、 $sort八、 $limit九、 $skip十、 $lookup 表关联十一、导入导出一、关系型数据库表（集合）与表（集合）之
2022-02-08 22:05:06
1262
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人