丑小鸭变黑天鹅的博客

vue整体实现思想及mini-vue的实现一、三大核心系统二、实现Mini-Vue1、描述2、渲染系统实现一、三大核心系统Compiler模块：编译模板系统主要用来将template模板转换为render渲染函数Runtime模块：也可以称之为Renderer模块，真正渲染的模块主要用来将虚拟DOM转变为真实DOM，并且渲染到浏览器页面上主要的实现原理是利用了snabbdom的思想，具体可以看我的另一篇转载文章，点下方虚拟DOM原理Reactivity模块：响应式系统主要用来当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？虚

vue3的Teleport和插件的认识与 了解一、认识Teleport二、和组件结合使用三、多个teleport四、认识Vue插件五、插件的编写方式一、认识Teleport在组件化开发中，我们封装一个组件A，在另外一个组件B中使用那么组件A中template的元素，会被挂载到组件B中template的某个位置最终我们的应用程序会形成一颗DOM树结构但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置比如移动到body元素上，或者我们有其他的div#

vue3的自定义指令详解一、认识自定义指令二、指令的生命周期三、指令的参数和修饰符四、自定义指令练习一、认识自定义指令在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令注意：在Vue中，代码的复用和抽象主要还是通过组件通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令自定义指令分为两种自定义局部指令：组件中通过directives 选项，只能在当前组件中

vue中h函数的详解一、认识h函数二、h()函数 如何使用呢？三、h函数的基本使用四、h函数计数器案例五、setup函数计数器案例六、函数组件和插槽的使用七、jsx组件的使用一、认识h函数Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）

vue3中的单文件组件<script setup>详解一、相比普通script语法的优势二、基本语法三、响应式四、使用组件五、使用自定义指令六、defineProps 和 defineEmits七、defineExpose八、useSlots 和 useAttrs九、顶层 await一、相比普通script语法的优势<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势更少的

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的一大特点就

vue3中的Mixin详解一、认识Mixin二、Mixin的基本使用三、Mixin的合并规则一、认识Mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能一个Mixin对象可以包含任何组件选项当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选

vue3过渡和动画详解一、认识动画二、Vue的transition动画三、Transition组件的原理一、认识动画在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-groupVue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果我们来看一个案例Hello World的显示和隐藏通过下面

vue3新增api及vue2部分属性在vue3中变化的地方一、说明二、子传父时使用的emit一、说明其实vue3大部分的知识点和vue2都是一样的，这篇文章是介绍vue2中部分属性在vue3中的变化，以及vue3新增加的一些东西。二、子传父时使用的emit在 Vue 2 中，你可以定义一个组件可接收的 prop，但是你无法声明它可以触发哪些事件<template> <div> <p>{{ text }}</p> &

vue的动态组件和异步组件一、动态组件二、keep-alive三、异步组件一、动态组件动态组件是使用 component 组件，通过一个特殊的attribute is 来实现下面通过一个例子去解释动态组件怎么用如上图所示，比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示这个案例我们可以通过三种不同的实现思路来实现方式一：通过v-if来判断，显示不同的组件方式二：动态组件的方式方式三：使用路由router-link和router-viewv-if显

后台管理系统模板介绍项目地址项目截图介绍此项目为后台管理系统模板，含有权限控制，包括菜单权限控制，按钮权限控制，界面权限控制，请求和响应控制前端主要技术栈vue2.x+vuex+vue-router+token认证+ant-design-vue+自定义主题+按需加载+jsonp+axios+viser-vue+wangeditor后端主要技术栈nodejs+express+mongodb+mongoose等项目地址gitee链接项目截图1、登录首页分类管理分类管理–修改分类名

vue权限管理---按钮权限如何写？一、问题描述二、方法一三、方法二一、问题描述我们都知道前端权限控制主要也就四个方面1、菜单的控制在登录请求中，会得到权限数据（有可能后端会返回完整的路由，也有可能只返回一个路径数组，前端按情况去做相应代码编写即可）这个需要后端返回的数据支持，前端根据权限数据，展示对应的菜单，点击菜单，才能看到相关的界面2、界面的控制如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面，如果用户已经登录，可是手动敲入非权限内的地址，则需要

使用ant-design-vue的modal，modal封装成一个组件，父组件调用关闭modal之后重新刷新父组件的表格数据怎么办？一、问题描述二、问题解决一、问题描述最近实践过程中遇到这样一个问题，我封装了一个modal组件，在父组件中引入并且使用，当打开modal修改完数据点击确定之后，关闭modal，此时发现表格的数据没有重新加载。这样很不合理，明明数据已经更新了，但是并没有立即展示出来。二、问题解决最初的想法是，在父组件中把刷新表格的方法，以及当前页，每页显示的条数，传给子组件。然后子组件通

使用ant-design-vue的madal在table中，只能点击一次，并且会报错一、问题描述二、解决办法一、问题描述最近学习过程中遇到这样一个问题。我想实现点击表格的每一行的修改按钮，都弹出一个modal框。最初的思路（注意：之前用element-ui这么做没问题），封装一个modal组件，然后在父组件进行引入，当点击修改按钮的时候，改变显示与否的状态，并且传给modal子组件，子组件通过props接收。但问题来了，点击第一次，可以正常弹出并且关闭，点击第二次modal框不弹了，并且始终报错[

vue中v-model直接绑定vuex中的状态属性遇到的问题一、问题描述二、问题解决一、问题描述最近做项目，遇到这样一个问题。我在vuex的state中保存了一个状态属性，当点击某一按钮的时候，改变其值，然后另一个组件也用到了这个属性，需要用v-model绑定，我就想着直接绑定用v-model = 'this.$store.state.xxx',结果报错了，说这个属性没有定义。错误的代码二、问题解决上面之所以报错的原因是因为v-model主要提供了两个功能，view层输入值影响data的

vue项目怎样解决跨域问题呢？一、问题描述二、问题解决一、问题描述在开发过程中，和后端交互的时候避免不了有跨域，解决跨域的方法很多，今天聊一聊前端vue项目是如何解决跨域的。二、问题解决先提前说明一下下面提的这些方法只是配置不一样，但原理都一样。target是你要代理的域名，必须要加上http。changeOrigin必须为true封装的axios中的baseUrl引号的内容是最终要拼接到你要访问的url上的proxy里引号的内容匹配的就是request中的baseUrl引号的内容废

新版本vue项目，如何关闭eslint检测一、问题描述二、问题解决1、首先是比较旧的vue项目2、创建项目的时候，不要选eslint3、如果你使用的编辑软件是webstorm4、创建的项目没有webpack.base.conf.js文件，但是有 .eslintrc.js5、比较新的vue项目，目录没有（直接）webpack.base.conf.js文件，但node_module中可能有。并且也没有.eslintrc.js文件6、修改.eslintignore 文件一、问题描述我们在开发vue项目的时候，

vue项目用原生js动态创建的div的样式不起作用该怎么办一、问题描述二、问题解决一、问题描述最近做项目遇到这样一个奇怪的问题，用了高德地图的自定义窗体，但是发现样式无论如何都不起作用。网上查了些资料才得以解决先看一下不起作用的代码可以看到样式和动态创建的div都没问题，但是样式就是不起作用，如下图二、问题解决通过查看控制台可以看到样式起作用的div都有这样一个特征都有data-v-xxxxxx这样类似的再看看我们自己写的渲染出来是什么样的可以发现并没有上面的特征，所以我就猜想是

vue插槽的使用，以及vue2.6之前和vue2.6之后（包含vue3.x）的区别一、插槽的作用二、插槽的使用以及区别1、插槽内容2、编译作用域3、备用内容4、具名插槽5、作用域插槽6、独占默认插槽的缩写语法7、解构插槽 Prop8、动态插槽名9、具名插槽的缩写10、官方文档提供的其它示例一、插槽的作用Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。插槽可以实现组件的扩展性 ， 抽取共性， 保留不同二、插槽

Ant design vue中的a-select在动态给option赋值之后，placeholder失效一、问题描述二、解决办法一、问题描述最近做一个项目，用到了a-select，placeholder出现了问题先看一下不起作用的代码 <a-col :md="8" :sm="24"> <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }

前端权限控制与管理如何写？一、课程提供的笔记二、自己根据知识点做了一个示例一、课程提供的笔记二、自己根据知识点做了一个示例本示例采用的技术栈为vue+vue-router+vuex+mock.js有两个用户管理员，所有权限都有普通用户，不可以访问商品管理页面，不可以进行添加操作，不可以进行编辑操作示例截图1、登录页2、登录进去的首页3、用户管理页总的来说，权限控制就这四个方面，前端控制之后，用户体验会更好，项目会更完美，但

vue项目如何刷新当前页面1.场景2.遇到的问题3.解决方法4.provide / inject 用法1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1.用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有

Vuex刷新state数据消失怎么办？一、问题描述二、解决办法一、问题描述在开发vue的项目的时候，有时候我们需要用到vuex来保存一些多个页面需要共享的数据，这时候我们就会想到将其放到vuex里。最近的项目开发里有这样一个需求，根据用户是否登录来控制显示登录按钮还是别的按钮。所以登录的时候需要将用户信息保存在vuex里。之后从vuex里获取用户的信息，如果不为空，则说明已经登录。但是遇到了一个问题，刷新页面，通过查看控制台，发现vuex的state的数据消失不见了，从而导致不能根据用户是否登录取正

工业互联网平台前端代码说明一、结构说明build目录 —> 代码最终打包编译生成的文件都放在这个文件夹里public目录 —> 整个项目的入口index.html和title图标，始终不用动这个文件夹src目录 —>整个项目的核心代码都在这里1、api文件夹 —> 请求后台数据的js文件夹，项目已经封装好axios，用的时候直接按照给的示例用就可以了。命名的时候按照规范，最好和你组件名一致。2、assets文件夹 —>放着一些静态资源文件，如图片

在el-tab-pane选项卡中使用echarts遇到的问题解决办法1解决办法2遇到的问题1.使用el-tab-pane切换时,引入echarts组件,canvas100%的宽度会变为100px2.数据不渲染解决办法1echarts组件加上v-if（必须是组件形式引入的），非组件看下面方法2<template> <el-tabs v-model="activeName"> <el-tab-pane label="首页" name="first">

vue的element中的el-tabs中使用FullCalendar加载异常的问题，延迟渲染el-tab-pane标签一、问题描述二、分析原因三、解决问题一、问题描述最近的项目有这样一个需求，引用一个日历组件，我用的方案是element的el-dialog+el-tabs+FullCalendar，但是遇到了一个问题，FullCalendar引用的没有任何问题，在正常的页面中可以正常使用，唯独在el-tabs标签中切换的时候，不能正常显示。如下图所示二、分析原因自己琢磨了1个小时，上网查各种资料

vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts一、问题描述二、 解决办法一、问题描述目前在做一个vue项目，遇到这样一个问题。我使用了dialog去设置一个弹框，弹框里添加tab标签页，然后点击不同的tab，显示对应的内容。其中包括echarts的显示。数据或者其他都正常显示，唯独echarts只显示初始化时的。点击其他tab，echarts不显示，于是就上网查了很多资料。先看一看，之前错误的代码，和效果中间代码

TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法问题描述最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用npm install echarts@4.8.0 --save然后再main.js文件中引入并挂载到全局中// 引入echartsim

vue中使用echarts报错Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"一、问题描述二、解决办法一、问题描述做项目的时候遇到一个问题，在vue中使用命令npm install echarts --save安装了echarts，下载和引入都没问题，但是使用的时候报错出现这个问题的原因，是因为默认安装了最新版本的echarts，还不够稳定二、解决办法卸载掉安装的echarts，然后重新安装指

element-ui自定义表格怎么给input双向绑定数据问题描述问题描述有个项目需求点击添加按钮添加一行，我采用的是自定义表格，刚开始写好之后，点击添加，可以实现，但是却发现输入框不能输入数据，控制台报错先看一下，错误的代码，这里列出了主要代码 <el-table :data="tableData" style="width: 98%; margin-left:20px"> <el-table-column label="属性类型" align="ce

当vue遇见better-scroll所遇到的坑一、问题描述二、解决办法三、官网描述一、问题描述初次加载可以滑动，刷新之后不能滑动了在学习vue的过程中，从网上找了一个案例去练习，视频中老师用到了better-scroll，然后跟着一模一样的敲，但是总是不能如愿以偿，初次加载可以正常只用滑动，一旦页面发送刷新，则鼠标滚动就失效了。找了很久解决办法，但是也没能解决。从网上找过的办法，给出其中普遍给出的解决办法1、给外面加上this.$nextTick(),并没能解决问题//解决：this.$ne

创建vue/cli3.x.x时，默认使用yarn作为包管理器，怎么修改为npm呢？创建vuecli3.x.x的时候，会默认选择使用yarn作为包管理器，如果你不习惯yarn，想用npm，那么怎么更改呢？第一步到c盘找到一个文件名叫".vuerc"的文件，打开这个文件一般存储在C:/user/administrator/第二步打开之后进行修改...

总结一下vue项目中使用eslintrc进行检查那些令人头疼的错误一、Expected indentation of 2 spaces but found 4 indent二、‘Unexpected trailing comma. (comma-dangle)’三、Missing space before function parentheses space-before-function-paren四、Extra semicolon s

在谷歌浏览器安装了Vue.js devtools发现不能用显示Vue.js is not detected学习vue框架的时候，在谷歌浏览器安装了Vue.js devtools插件，写了一个入门的helloworld，程序没问题，可是在谷歌浏览器插件图标始终不亮，并且显示Vue.js is not detected，上网找资料，有一个很复杂，但最终也没解决问题，于是打开了插件详情，偶然间发现问题所在，直接上图。...

vue中onmouseenter、onmouseleave、onmouseover、onmouseout的区别一、onmouseenter、onmouseleave二、onmouseover和onmouseout一、onmouseenter、onmouseleaveonmouseenter和onmouseleave是一组：当鼠标进入指定区域的时候触发，但是不支持冒泡，进入或者离开子组件都不触发下图中，onmouseenter和onmouseleave相当于绑定的区域为A+B二、onmouseove

前端serve服务器，超级简单！安装及使用安装及使用注意，安装的前提是你已经安装了node.js和npm，具体查看命令为node-v npm-v如图所示，我已经安装好了，如果你还没安装，请看我的另一篇文章进行安装node.js和npm安装然后接下来就是安装serve了输入npm install -g serve然后到你的静态页面所在文件夹打开cmd终端，输入serve，如图这个dist文件夹，是因为我写的是vue示例，用npm run build 编译生成的静态文件。之后你

Vue开发搭建（npm安装+vue脚手架安装）一、使用之前，我们先来掌握3个东西是用来干什么的。二、测试NPM安装vue-router一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安

原生VS Vue框架--表单元素默认被选中我们都知道复选框在前端开发中的重要性，可以说，到处都在使用，最近在学习vue，看了vue的处理方式，感觉尤大大太牛了。这里总结一下表单默认被选中的操作对于单选按钮radio，如果想默认选中“女”或者“男”，只需在data数据里操作input所绑定的v-model即可，代码如下 new Vue({ el: "#demo", data: {