Zswsown-CSDN博客

原创 Ant-design-vue select组件可输入可下拉单选

//方法methods:{ // 实现select选择框可下拉单选，也可输入赋值 handleSearch(value){ this.handleChange(value); }, handleChange(value){ this.value = value!=null && value !='' ? value : []; }, handleBlur(value){ this.value = value;

2020-12-25 17:43:24 7037 4

原创 moment.js的预设时间

昨天: [moment().startOf(‘day’).subtract(1, ‘days’), moment().endOf(‘day’).subtract(1, ‘days’)],今天: [moment(), moment()],上周: [moment().startOf(‘week’).subtract(‘week’, 1), moment().endOf(‘week’).subtract(‘week’, 1)],本周: [moment(), moment().endOf(‘week’)],.

2020-12-18 11:10:28 385

原创前端调试工具

使用Debugger for Chrome工具来调试代码安装Debugger for Chrome扩展修改.vscode中launch.json的配置：{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch index.html", "sourceMaps": true, .

2020-11-10 21:20:41 295

原创 vue项目打包优化

对于vue, vuex, vue-router，axios等我们可以利用wenpack的externals参数来配置，这里我们设定只需要在生产环境中才需要使用:vue.config.js:// vue.config.jsconst isProduction = process.env.NODE_ENV === 'production';const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.5.17/.

2020-11-04 21:04:39 232

原创数组扁平化

一、数组的扁平化，就是将一个嵌套多层的数组array（嵌套可以是任何层数）转换成只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化，效果就会如下：var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]二、解决办法：1.递归function flatten(array){ var result=[]; for(var i=0;i<array.length;i++){ i

2020-11-02 08:35:30 656

原创获取url中的参数

function getQueryValiable(valiable){ var query=window.location.search.substring(1);//获取?号后面的参数 var params=query.split('&'); var param=[]; for(var i=0;i<params.length;i++){ param=params[i].split('='); if(param[0]==valiable){return param[1]};

2020-10-28 15:02:39 94

原创数组去重

1.利用ES6 Set和Array.from()方法去重（ES6常用）function unique(array){ return Array.from(new Set(array));}有兼容性问题，无法去掉“{}”对象。2.利用ES6 Set和剩余运算符进行去重（ES6常用）function unique(array){ return [...new Set(array)];}有兼容性问题，无法去掉“{}”对象。3.利用for循环嵌套for循环，然后调用splice删除掉相同元

2020-10-28 14:24:08 162

原创判断字符串是否回文

1.含义：字符串从前往后和从后往前读，字符串的内容是一样的，称为回文。2.方法：（1）利用数组的reserve()方法翻转字符串后进行判断function isPalindRome(str){ return str.split('').reverse().join('')===str;}（2）左右各自收缩比较相对应位置的字符串，若全都相等，则是回文字符串，若出现不相等情况，则返回falsefunction isPalindRome(str){ for(let i=0;i<str.l

2020-10-28 10:19:20 7700 1

原创谈谈Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要- 操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操.

2020-10-24 15:35:47 334

原创 Vue可做的性能优化

编码阶段尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应订阅者watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件委托给每一个item添加一个自定义属性（:data-index=“可用从数据库中取来的item的id”），然后在事件代理中过滤掉事件委托的根节点，判断每一个item的data-index值，做出响应SPA页面采用< keep-alive></ keep-alive>缓存.

2020-10-24 15:30:33 93

原创 Vue中的事件委托

事件委托：将原本需要绑定在子元素上的事件监听器委托在父元素上，让父元素充当事件监听的职务。优点：当新增加子元素时，不用再对其绑定事件节省大量内存，减少事件注册Vue中是否需要事件委托事件委托有两个主要优点：一个是实用的，它使我们不必分别添加（和删除）这些侦听器。Vue已经帮我们做到了。另一个是性能/内存。但是由于v-vor循环中的每个点击侦听器都将使用相同的回调，因此除非有成百上千的行，否则性能消耗是最小的。最后，您可以通过在元素上添加@click侦听< ul>器而.

2020-10-24 14:48:13 1206

原创浅谈vue中的mixin

Mixin是我们能够为Vue组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期hook、方法等，则可以将其编写为mixin，并在组件中简单的引用它。调用时将mixin的内容合并到组件中。如果要在mixin中定义生命周期hook，那么它在执行时将优化于组件自己的生命周期。...

2020-10-24 10:24:25 86

原创浅谈SPA的优缺点

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

2020-10-23 22:26:56 917

原创浅谈对SSR的理解

SSR指的是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把HTML直接返回给客户端。SSR的优势更好的SEO（搜索引擎优化）首屏加载速度更快SSR的缺点开发条件会受到限制，服务器端渲染只支持beforeCreate和created这两个钩子函数当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境会相比于客户端渲染带来更多的服务端负载...

2020-10-23 21:40:35 927

原创对keep-alive组件的了解

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：一般结合路由和动态组件一起使用，用于缓存组件；提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activate

2020-10-23 21:03:59 103

原创 Vue模板编译原理

简单说，Vue的编译过程就是将template转换成render函数的过程。首先会解析模板，生成抽象语法树（一种用JavaScript对象的形式来描述整个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候会调用对应的钩子函数进行相关处理。Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再发生变化，对应的DOM也不会变化。那么优化过程就是深度遍历抽象语法树，按照相关条件对树节点进行标记。这些被标记的节点（静态节点），我们就可以跳过对它们的比对，对

2020-10-23 20:41:36 1965

原创 vue路由hash模式和history模式实现原理及区别

hash 模式：#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。history 模式：history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。区别url

2020-10-23 20:27:13 956

原创响应式布局

1.媒体查询+rem利用媒体查询监听页面的尺寸，设置不同尺寸下HTML页面根节点font-size的大小，然后页面中的组件的高度宽度的大小用rem做单位。2.lib-flexible.js + px2rem.js先将页面中的组件的大小用px做单位，之后用px2rem插件将组件宽度高度的单位转换成rem，在px2rem中设置页面的基准为75或192（自己根据设计稿而定），字体的话用em做单位，然后用媒体查询设定不同尺寸下body中font-size的大小，得到字体的自适应（因为以rem为单位的话，当页面

2020-10-23 16:36:28 70

原创 Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后执行beforeCreate钩子函数，这个时候，数据还没有挂载，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。接着挂载数据.

2020-10-23 15:16:18 207

原创 v-for使用key的原因

1.vue中列表循环需加:key=“唯一标识”，唯一标识最好是item里面id等。因为vue组件高度复用，增加Key可以标识组件的唯一性，更好地区别各个组件。key的作用主要是为了高效地更新虚拟DOM。2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改

2020-10-23 10:27:09 512

原创 Vue中nextTick原理

nextTick作用：在下一次DOM循环更新结束之后执行延迟回调，在修改数据后，调用该方法，可以获得更新后的DOM。原理：在Vue中是以异步执行DOM更新的。异步的执行机制：所有的同步任务都会放在主线程上执行，形成一个执行栈。所有的异步任务会放在主线程外，形成一个任务队列，当异步任务有了结果时，会在任务队列中保存一个事件当执行栈上的同步任务全都执行完毕之后，主线程会来读取任务队列上，看看有哪些事件。那些对应的异步任务会结束等待状态，进入执行栈，开始执行。主线程会不断重复以上步骤。主线

2020-10-23 10:00:42 115

原创子组件为什么不可以修改父组件传递的Prop？怎么理解vue的单向数据流？

Vue提倡单向数据流，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高...

2020-10-22 20:12:02 243

原创 Vue组件中的data为函数不为对象的原因

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，所有实例都是引用同一个data对象，若data发生改变，会影响到所有创建好的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。当组件被复用创建一个实例时，会在堆上重新申请一块内存，用于保存拷贝好的data，且在栈上会保存一个指向该新创建实例的指针，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。...

2020-10-22 19:30:55 140

原创 v-for和v-if不建议使用在一起

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中（即会先运行v-for，再运行v-if对每一个item进行判断，决定item（DOM元素）是否要被删除）。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费。这种场景建议使用 computed，先对数据进行过滤，再进行判断。...

2020-10-22 19:08:20 116

原创浅谈v-if和v-show

相同：都是控制组件在页面中是否显示不同：v-if是通过判定条件的真假来动态的控制DOM元素在页面中的增删；v-show是通过判定事件的真假来动态的控制DOM元素的样式（display:none/block）；频繁的进行增删DOM操作会影响页面加载速度和性能，因此在大多数情况下v-show的性能要比v-if的好只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断使用场景：v-if 适..

2020-10-22 16:45:20 86

原创 Vue2.0组件通信的方式

父子组件通信事件机制(父->子props,子->父 $on、 $emit)获取父子组件实例 $parent、 $childrenRef 获取实例的方式调用组件的属性或者方法Provide（祖先组件）、inject（后代组件） (不推荐使用，组件库时很常用)兄弟组件通信eventBus 这种方法通过一个空的 Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件Vue.prototype.$bus = ne.

2020-10-22 16:21:34 120

原创 Vue中computed和watch的区别和运用的场景

computed：是计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取comoputed的值时才会重新计算。watch：没有缓存，更多的是‘观察’的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。若我们需要深度监听对象中的属性时，需要打开deep：true；这样便会对对象中的每一项进行监听。运用场景：当我们需要进行数值计算，并且依赖与其他数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取

2020-10-22 14:27:22 540

原创 Vue中的响应式数据/数据双向绑定原理

1.Vue中数据双向绑定主要是指当数据发生变化时，视图发生变化；当视图发生变化时，数据也发生响应的变化。其中视图发生变化时，数据发生相应的变化，可以用事件绑定来实现，主要要解决的是当数据发生变化时，视图怎么发生变化。2.先介绍Vue2.0中的数据双向绑定的原理：vue中处理过程的几个关键：监听者Observer：监听者会对Vue实例中data选项的全部属性（包括属性对象的子属性）都加上getter和setter。这样的话，给这个对象的某个属性赋值时，我们就可以监听到数据变化了。解析器Compli

2020-10-22 14:12:57 619

原创浅谈MVC、MVP、MVVM模型

1.MVC是指Model（模型）、View（视图）、Control（控制）。View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈所有通信都是单向的。缺点：（1）View可以直接从Model中取到数据，因此View层中可能包含了一些业务逻辑，修改view层是比较困难的，因为这些业务逻辑是不可以重用的（2）不建议在 View 中依赖 Model，而是要求尽可能把所有业务逻辑都放在 Con

2020-10-22 12:01:57 169

原创 HTTP缓存机制

Web缓存大致可以分为数据库缓存、服务器缓存（代理服务器、CDN等）、浏览器缓存。浏览器缓存可以分为HTTP缓存、indexDB、cookie、WebStrorage（localStorage和sessionStorage）等等。这里只讨论http缓存相关内容。再具体了解HTTP缓存之前先来明确几个属于：缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。过期内容：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能响应客户端的请求，必须重新向源服务器请求新的内容或

2020-10-22 10:09:15 100

原创 node实操jwt实现登录功能

实操环境为node，请求插件为axios，token生成插件为jsonwebtoken，token解析插件为express-jwt1.JSON Web Token（简称JWT）是以JSON格式存储信息的Token，其结构图如下：2.JSON Web令牌以紧凑的形式由三部分组成，这些部分由点（.）分隔，分别是：标头（Header）：头部存储Token的类型和签名算法（上图中，类型是jwt，加密算法是HS256）有效载荷（Payload）：负载是Token要存储的信息（上图中，存储了用户姓名

2020-10-21 12:24:56 509

原创 npm换源

1.临时换淘宝源npm install 插件名 --registry=https://registry.npm.taobao.org2.使用阿里的cnpm命令行工具代替默认的npm命令行工具npm install -g cnpm --registry=https://registry.npm.taobao.org检查是否安装成功cnpm -v安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm就可以了npm换源成淘宝镜像...

2020-10-20 15:49:23 237

原创对localStorage和sessionStorage的封装

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。1.localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。2.sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。但原生的localStorage和sessionStorage不大好用，保存的value只能是字符串类型，所以可以在添加ke

2020-10-20 15:01:52 613

原创让node.js一直运行的方法

本实操环境是在腾讯云centos7.5及node10.16.3环境下进行的：1.forever可以看做是一个nodejs的守护进程，能够启动，停止，重启我们的app应用。当用户断开客户链接时，nodejs的应用也随之停止。而使用forever插件可以让nodejs的应用像服务一样在后台继续运行。2.全局安装forever插件，并启动相应的node.js文件及其它相关命令。npm install forever -g #安装forever start app.js #启动应用fore

2020-10-19 21:17:33 2710 1

原创 node中动态设置Access-Control-Allow-Origin的值

若设置了响应头中的Access-Control-Allow-Origin:"*"，则不可以携带cookie。若又想让网站被所有ip地址访问到，又想响应头中也要携带cookie时，则可以在后台中取出请求头中的origin，把它设置为响应头的origin的值。res.header("Access-Control-Allow-Origin", req.headers.origin);...

2020-10-17 14:32:58 1344

原创阿里云centos上部署nginx和vue项目

1.要在服务器（centos系统）上安装nginx服务器，部署好vue项目，让外网访问到，首先要有服务器，我选择的是阿里云的centos7.5系统的版本，在确认订单那有自定义密码的，要记得登录名和登录密码，在之后连接远程服务器要用到（root为登录名）2.之后要在该服务器上配置好规则，开放端口给外网访问到，nginx服务器默认监听80端口，所以先开放80端口（配置位置在控制台中的本实例安全组中的规则配置）3.配置好开放端口后，再下载Xshell和Xftp，Xshell用来连接远程服务器并用命令行的

2020-10-16 13:33:51 415

空空如也

空空如也