![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
每天都在掉头发
这个作者很懒,什么都没留下…
展开
-
jwt使用
登录验证1.在输入框中输入账号和密码,利用axios发送到后端的某一个接口(/token)2.后端接受账号和密码之后,遍历数据库中的对象,判断用户名和密码是否存在且正确,不正确的话返回错误信息3.定义token生成方法,参数是user.id,权限数字4.下载jsonwebtoken库,利用库中的sign方法生成token,sign接受几个参数,第一个对象是用户基本信息对象,第二个对象是密钥,第三个对象是过期时间5.当用户名和密码验证通过时,将生成的token返回给客户端6.浏览器读取原创 2021-09-06 20:53:07 · 198 阅读 · 0 评论 -
前端路由和后端路由
后端路由每次跳转到不同的url,都需要重新访问服务器,此时的渲染可以是前端渲染也可以是后端渲染前端渲染每跳转到不同的url,使用的是前端的hash值进行导向服务器不会解析#后面的内容但是可以监听window.location.hash获取到实际是对onHashChange进行监听利用JS进行DOM的替换在切换的过程中只需要关注接口数据的改变就行页面的跳转不需要涉及js和css等文件的重新请求...原创 2021-07-23 18:40:54 · 107 阅读 · 0 评论 -
前端渲染和后端渲染
后端渲染浏览器接受从服务端的数据即为完整的HTML字符串,浏览器直接解析和页面渲染前端渲染浏览器接受从服务端的数据可以是JSON数据、合法的html字符串等,再将这些信息组成完成的HTML字符串,再进行解析和页面渲染比较1.性能问题后端渲染将所有用户HTML页面的生成工作集中在服务器上,前端渲染是在各个用户终端上进行渲染2.开发难度后端渲染开发难度较大,后端开发人员开发工作量较大...原创 2021-07-23 18:27:57 · 229 阅读 · 0 评论 -
单页面应用和多页面应用
多页面应用每个页面单独开发,每次页面跳转时,需要向服务器发送请求,返回一个新的HTML文档,进行全部页面的刷新单页面应用由一个页面主框架和多个页面片段组成 ,每次页面跳转时,通过JS进行局部代码段的替换,完成页面的局部刷新单页面应用的优点:1.页面跳转迅速,不需要重新发送Http请求2.便捷实现转场动画3.页面主框架代码可以复用4.数据传输实现容易(多页面必须使用url,cookie,localstorage等进行数据传参)单页面应用的缺点:1.首次请求时时间较长原创 2021-07-23 16:58:11 · 627 阅读 · 0 评论 -
vue-router中的导航钩子
1.全局导航钩子前置钩子函数:router.beforeEach((to,from,next){})后置钩子函数:router.afterEach((to,from)=>{})全局解析守卫:router.beforeResolve()2.单个路由导航钩子实际上是在路由规则上配置的beforeEnter3.组件导航钩子beforeRouteEnter渲染该路由对应组件前调用beforeRouteUpdate路由改变,但依然渲染该组件时调用beforeRouteL.原创 2021-07-19 16:33:54 · 1104 阅读 · 0 评论 -
keep-alive的使用
概念keep-alive是vue中的内置组件,当它包裹动态组件,会缓存不活动的组件功能1.防止重复渲染2.减少加载时间3.减少性能消耗原理1.创建时,将需要缓存的vnode节点保存在this.cache中2.渲染时,如果符合缓存规则,就从this.cache中将vnode节点取出进行渲染生命周期函数1.activated2.deactivated简单使用在占位符外面包裹keep-alive<template> <div id=.转载 2021-07-19 15:11:09 · 194 阅读 · 0 评论 -
JS常见的设计模式
1.单例模式无论调用多少次只会产生一个实例let obj=(function(){ return { fn1(){}, fn2(){}})()2.构造器模式可以产生多个实例对象并且可以共有一些方法class Fn(){ constructor(name){ this.name=name;}getName(){}}3.工厂模式根据条件不同产生不同的结果function factory(){ .原创 2021-07-19 13:07:13 · 196 阅读 · 0 评论 -
手写vue双向绑定原理
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-18 23:55:47 · 102 阅读 · 0 评论 -
发布订阅者模式简单实现
let sub1 = { update: function() { console.log(1); }};let sub2 = { update: function() { console.log(2); }};let sub3 = { update: function() { console.log(3); }};function Dep() { this.subs = [sub1, s.原创 2021-07-18 23:46:58 · 127 阅读 · 0 评论 -
Object.defineProperty()简单使用
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-18 23:35:03 · 73 阅读 · 0 评论 -
vuex的使用
1.先导入vue,再导入vuex2.创建vuex对象const store=new Vuex.Store({...})3.在父组件中添加store:store,父组件和其所有的子组件都可以使用statestate用于保存共享数据注意:使用时采用this.$store.state.DateName调用<div>{{this.$store.state.msg}}</div>const store=new Vuex.Store({ st原创 2021-07-18 18:08:50 · 167 阅读 · 1 评论 -
vue-cli是什么
概述vue-cli是vue.js的脚手架,用于生成vue.js+webpack的项目模板vue-cli生成项目的三种方式1. 交互式命名行,3.x以上vuecreatemy-project2. 图形化界面,3.x以上vueui3. 旧模板,2.xvueinitwebpackmy-project...原创 2021-07-17 13:21:15 · 303 阅读 · 0 评论 -
$nextTick是什么
概述$nextTick 是一个用于在DOM更新完成后执行回调函数的方法vue的数据更新是一种延迟异步更新在vue中修改数据后,页面不会立刻更新,而是开启一个队列,并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时,才开始更新。此时通过DOM操作获取的数据仍然是未更新的数据$nextTick能够监听的DOM更新完成异步更新队列Vue在观察到数据变化时,并不是直接更新DOM,而是开启一个队列,并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去.原创 2021-07-16 17:39:53 · 2910 阅读 · 0 评论 -
vue项目的优化
1.生成打包报告2.第三方库启用CDN3.Element-UI组件按需加载4.路由懒加载5.首页内容定制1.页面顶部的进度条效果使用nprogress包,在github上找到安装方法进行包的安装(npm install --save),或者在vue可视化界面上选择安装依赖,安装运行依赖调用...原创 2021-07-16 16:43:15 · 96 阅读 · 0 评论 -
vue2.x和vue3.x的区别
1.懒观察在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。2.精准变更通知2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有哪一个属性的 watcher 才会重新运行。3.diff算法优化为虚拟DOM增加静态标志4.生命周期钩子函数5原创 2021-07-13 22:39:47 · 4906 阅读 · 0 评论 -
Diff算法
概念diff算法就是在新旧虚拟DOM树上进行虚拟节点的比较,在比较的同时将补丁对象(patch)更新到真实DOM树上特点1.diff算法只会在同一层上比较2.diff算法在同一层中从两侧向中间比较原创 2021-07-12 20:20:02 · 716 阅读 · 0 评论 -
虚拟DOM
概述直接操作真实DOM时,每一次元素查询都需要遍历整颗DOM树,频繁的DOM操作会使性能下降虚拟DOM就是为了解决这类性能问题的虚拟DOM指的是用JS对象来描述真实DOM的结构,将所有对DOM的操作提前在虚拟DOM上完成,再将结果映射到真实DOM上,减少对真实DOM的操作,提升性能使用过程1.利用js创建一颗虚拟DOM树,再利用该树映射出一颗真实DOM树,插入文档中2.当状态发生改变时,再次创建一颗虚拟DOM树3.比较新旧两棵树上虚拟节点的不同,并把差异性更新到真实DOM上操原创 2021-07-12 20:12:35 · 83 阅读 · 0 评论 -
Object.defineProperty和Proxy
数据劫持在访问和修改某个属性的时候,先进行拦截再加入额外的操作。Object.defineProperty()会在目标对象上定义一个新的属性,或者修改已有的属性Object.defineProperty(obj,prop,description)//obj目标对象//prop属性名称//description对某些属性的操作Object.defineProperty(data, key, { enumerable: true,原创 2021-07-12 15:41:27 · 187 阅读 · 0 评论 -
前端MVC、MVP、MVVM模式
前端MVC、MVP、MVVM模式简介MVC模式MVP模式MVVM模式简介MVC、MVP、MVVM是三种前端的软件架构设计模式,主要用于优化代码结构,便于后期的项目开发和维护工作。MVC模式MVC模式是通过分离Model、View、Controller的方式组织代码。View负责页面的显示逻辑;Model负责存储页面的业务数据以及对相应数据的操作;Controller是View层与Model层之间的纽带,当用户与页面产生交互的时候,Controller中的事件触发器开始工作,调用Model层原创 2021-04-07 16:51:10 · 381 阅读 · 1 评论 -
VUE组件间传值
父传子在父组件中利用v-bind将data中的数据绑定到子组件标签上的某个属性上子组件通过props属性接收绑定的属性名**父组件代码**<template> <header-box :title-txt="showTitleTxt"></header-box></template><script> import Header from './header' export default {原创 2021-06-22 13:47:43 · 118 阅读 · 0 评论 -
VUE双向数据绑定
VUE里面通过数据劫持+发布订阅者模式,实现双向数据绑定。我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Wat原创 2021-06-22 10:53:09 · 127 阅读 · 0 评论 -
vue生命周期
八个生命周期 beforeCreate(创建前) created(创建后) beforeMount(载入前) mounted(载入后) b**加粗样式**eforeUpdate(更新前) updated(更新后) beforeDestroy(销毁前) destroyed(销毁后)————————————————版权声明:本文为CSDN博主「魏晓栋c」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链...原创 2021-06-20 11:55:42 · 84 阅读 · 0 评论