静默如初_1122-CSDN博客

原创箭头函数与普通函数的区别

普通函数与箭头函数的区别 1、不邦定this 在箭头函数出现之前，每个新定义的函数都有其自己的 this 值 var myObject = { value:1, getValue:function(){ console.log(this.value) }, double:function(){ return function(){ console.log(this.value = this.value * 2); } } } myObject.do

2021-04-30 14:43:17 150

原创五、路由_页面

现有路由页面整理删除不需要的页面及组件配置和基础模板中附带的多余页面（views中）以及路由中的路由定义根据权限不同动态生成功能菜单的整体思路最终效果是：不同用户登陆进来时，显示出来的菜单功能是不同的静态路由表和动态路由表静态：不需要权限就可以访问的动态：总共有8个功能，会根据后端返回的权限信息，来动态决定能显示几个功能 4.模块化管理动态路由合并静态和动态路由 const asyncRoutes = [ employeesRouter...... ] export co

2021-04-19 15:18:34 571

原创 vue2.x响应式原理

Vue 2.x响应式原理核心实现类: Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。 Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed

2021-04-19 15:12:30 233

原创虚拟dom

虚拟dom的实现 Vue2的Virtual DOM借鉴了开源库snabbdom的实现。用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。 Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。虚拟dom的优点前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅

2021-04-19 12:05:02 282 1

转载 diff算法

当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

2021-04-19 12:03:12 687

原创二、基础环境搭建

1.vue-element Admin 基于vue技术栈的后台系统社区解决方案线上demo地址：https://panjiachen.github.io/vue-element-admin/#/dashboard https://github.com/PanJiaChen/vue-element-admin.git 作用：更多的是一个参考价值，而不适合直接使用进行二次开发 2.vue-admin-template 精简版，适合二次开发在线运行效果：https://panjiachen.gitee.

2021-04-18 19:35:40 237

原创四、主页模块

点击了登陆，如何进入主页的点击了登陆，如何进入主页的。点了登录：（1）utils/request.js中获取axios实例（基地址从环境变量中）（2）api/user.js中获取封装好的api （3）收集用户的参数，传给第二步中的api。（页面上收集页面的数据项名与接口中一致）（4）经过请求拦截器，添加请求头（5）代理转发（6）后端服务器要启动，mongoDB也要启动；后端才能收到请求，返回数据（7）经过响应拦截器的处理（8）得到api调用之后结果（9）保存token， tok...

2021-04-18 19:34:11 585

原创三、登录页面

1.登录页面样式 @是我们在vue.config.js中设置的一个路径别名，指定src根目录，这样可以很方便的寻找文件如果要在样式表中使用@，需要在@前面加上~，否则不识别 2.环境变量定义环境变量：VUE_APP_为前缀使用环境变量：process.env.环境变量用处：通过设置环境变量，可以在不同的环境下运行项目时，加载执行不同的逻辑。例如：切换axios请求的基地址如何切换：当运行不同的命令时: yarn serve–在开发环境对应的文件 .env.d

2021-04-18 18:26:05 293

原创一、element-ui组件

一、element-ui组件组件库移动端 vant–有赞 Cube-UI–滴滴 Mint UI–阿里 NutUI–京东 PC端 ElementUI–饿了么 Ant Design of Vue 快捷键补充 table 整体数据是数组，每个元素是对象行–每一行都是对象列–列是根据对象的属性名来定 el-table-column label–决定表头上的文字-标题 prop–决定数据列的来源 width–一般最后一列不设width 插槽 slot

2021-04-18 18:15:42 656

原创网络基础

HTTP协议简介 Web使用一种名为HTTP（HyperText Transfer Protocol，超文本传输协议）的协议作为规范，完成从客户端到服务器等一系列运作流程。而协议是指规则的约定。可以说，Web是建立在HTTP协议上通信的 TCP/IP 协议族应用层应用层规定了向用户提供应用服务时通信的协议，如： TCP/IP 协议族内预存了各类通用的应用服务协议。比如，FTP（File Transfer Protocol，文件传输协议）、DNS（Domain Name System，域名系统）以及H

2021-04-18 17:40:18 88

原创 css面试题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-b

2021-04-18 17:39:16 475

原创 Vue面试题

1、介绍一下MVVM，和MVC有什么区别 MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。 MVC： MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即.

2021-04-18 17:38:23 722