Fancy_vae的博客

Vue中的修饰符是什么，怎样使用

Fancy_vae — Tue, 12 Jan 2021 19:46:02 +0800

修饰符 (Modifiers)：是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。一、事件处理修饰符 1. 事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .st

关于vue中的vue-router（路由）详细教程（仅供参考）

Fancy_vae — Tue, 12 Jan 2021 19:20:26 +0800

**前言：**由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue

ue单页面应用刷新网页后vuex的state数据丢失的解决方案

Fancy_vae — Tue, 05 Jan 2021 20:56:05 +0800

最近在用vue项目，用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。 1. 产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中很显然，第一种方案基本不

axios 默认配置和实例配置的相关配置

Fancy_vae — Tue, 05 Jan 2021 19:14:14 +0800

axios配置参数有哪些 baseURL：请求的域名，基本地址 timeout：请求超时时长（ms） url：请求路径 methode：请求方法:get,post,put,patch,delete headers：请求头 params：请求参数拼接在url上 data：请求参数放在请求体优先级：axios请求配置 > axios实例配置 > axios全局配置实际开发中axios全局配置一般比较少用到，因为它的局限性比较大，一般只能设置baseURL，timeout，url，其他的metho

vue-router（路由）基本使用的详细教程

Fancy_vae — Tue, 29 Dec 2020 20:42:54 +0800

一、安装如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router。这里还是说一下安装：npm install vue-router 二、创建组件如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件： import Vue from

【MongoDB】索引属性之唯一索引的创建和行为

Fancy_vae — Tue, 29 Dec 2020 18:49:25 +0800

唯一索引可确保索引字段不存储重复值,即强制索引字段的唯一性。默认情况下，MongoDB在创建集合期间会在_id字段上创建唯一索引。新的内部格式从MongoDB 4.2开始，对于4.2（或更高版本）的featureCompatibilityVersion（fCV），MongoDB使用一种新的内部格式来存储与早期MongoDB版本不兼容的唯一索引。新格式适用于现有的唯一索引以及新创建/重建的唯一索引。一、创建唯一索引创建唯一索引，要使用db.collection.createIndex()方法，并且

面试中，如何手写promise才能让面试官满意

Fancy_vae — Tue, 22 Dec 2020 18:37:42 +0800

导语：你肯定使用过promise，但是你知道它是怎么实现的吗？它的原理是怎么样的？你能手写一个简单的promise吗？在面试中你也可能会被问到手写一个promise，现在来直接手撕原理和代码吧！！一，promise的状态 promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一开始的时候就是pending，随后经过操作就会产生出另外两种状态fulfilled和rejected，并且可以通过这两个状态去调用不同的处理函数。二，仅仅考虑resol

html页面中顶部的DOCTYPE的作用

Fancy_vae — Mon, 21 Dec 2020 18:43:26 +0800

我们来看这个！DOCTYPE html 1，DOCTYPE是啥？有什么作用？ DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。它的作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页，DOCTYPE的声明是必不可少的，因为他要告诉浏览器怎么解析这个网页文件。 2，如果我删除了这个Doctype 首先我们得明白Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HT

利用mock.js模拟前端开发调用后台数据

Fancy_vae — Tue, 15 Dec 2020 18:54:52 +0800

导语：相信大家都遇到过一个问题，前端开发要用到api，但是后端的人员还没开发好，那可怎么办啊，前端没办法调试，莫着急，用mock解决这个问题。一，mock的作用当后端api接口还没开发好，前端又想马上调试，就可以使用 mock，你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。二，如何使用mock？先安装一下 npm install mockjs 1，哪里需要写哪里法 var data = Mock.mock({ "string|1-10": "#", "object":

前端算法之数组扁平滑处理

Fancy_vae — Fri, 11 Dec 2020 15:30:33 +0800

一、什么是数组扁平化扁平化，顾名思义就是减少复杂性装饰，使其事物本身更简洁、简单，突出主题。数组扁平化，对着上面意思套也知道了，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。 flatten 可以使数组扁平化，效果就会如下 let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ]; arr = arr.flat(Infinity); 从

Web离线存储

Fancy_vae — Mon, 07 Dec 2020 19:51:30 +0800

Web存储机制 Web Stroage的两个主要目标：提供一种在cookies之外存储会话数据的途径提供一种存储大量可以跨会话存在的数据的机制 —— storage类型：提供最大的存储空间来存储名值对儿。有如下方法： clear()：删除所有值。firefox中没有实现。 getItem(name)：根据指定的属性名字获取对应的值。 key(index)：获得index处的值的名字（index处的属性名）。 removeItem(name)：删除由name指定的名值对儿。

ES6中变量的解构与赋值

Fancy_vae — Mon, 07 Dec 2020 19:03:08 +0800

1.数组的解构赋值 1.1基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。 let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样。 let [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。的确高大上了许多有木有。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

如何解决前端的跨域

Fancy_vae — Mon, 30 Nov 2020 00:00:28 +0800

1、首先一个域名的组成：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域 JavaScript出于安全方面的考虑，不允许跨域调用其它页面的对象。跨域就可以理解为因为JavaScript同源策略的限制，a.com下的js无法操作b.com或者c.a.com域名下的对象。 2、处理跨域的方法：处理方法一 ——在后台进行处理：通过在同域名下web服务器创建一个代理例如某个前端页面想要调用上海的服务器，但它们不是同源的，但是它和北京的服务器是同源的，那就可以通过让北京服务器作为一个代理，先让北

前端路由hash、history、location的简介

Fancy_vae — Sun, 29 Nov 2020 23:48:05 +0800

理解前端路由，前端路由都有哪些？ 1、理解路由 2、前端路由方法（1）history对象（window.history）（2）location对象（主要是Hash） 3、hash (locstion对象属性) 和 pushState (history对象属性)对比 1、理解路由直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说

如何管理时间，moment.js插件来教你

Fancy_vae — Tue, 24 Nov 2020 20:09:23 +0800

moment.js官网一.使用相对时间 console.log(moment("20101124", "YYYYMMDD").fromNow()); // 10年前 console.log(moment("20151124", "YYYYMMDD").fromNow()); // 5年前 console.log(moment().startOf('day').fromNow()); // 20小时前 console.log(moment().endOf('day').fromNow(

个人对cookie和session的理解

Fancy_vae — Tue, 24 Nov 2020 18:50:39 +0800

在web开发中，总是有看到cookie还有session这两个东西，那么它们到底有什么用？本人将在这篇文章为你们介绍一下个人对cookie和session的理解。因为http协议是无状态的，每次的请求访问都是独立的，没办法追踪到上一次访问的状态，后端就无法知道这次的访问是哪位，所以就要一些技术来帮助后台辨别这次的请求是谁。而这两者Cookie与Session都是Web程序中常用的技术，用来跟踪用户的整个会话。 Cookie通过在客户端记录信息确定用户身份，（相当于你有一张身份证，跟后端交流前要拿出身份证

简单的理解js单线程和异步

Fancy_vae — Sun, 15 Nov 2020 22:46:50 +0800

js为什么是单线程的呢？为什么不把它变成多线程的语言，现在的多线程语言不是很流行吗？根据这几个问题，我们来一起了解一下js单线程和异步一、为什么JavaScript是单线程？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。同时DOM渲染和js代码的执行共用一个线程，这决定了它只能

浏览器输入url之后，发生的事儿

Fancy_vae — Sun, 15 Nov 2020 22:38:51 +0800

浏览器输入url之后发生了什么一，DNS解析二，建立TCP连接（三次握手）三，发送http请求四，服务器处理请求五，返回响应结果六，关闭TCP连接（四次挥手）七，浏览器渲染页面一，DNS解析例如我们输入了www.baidu.com，一共有六个过程。但是说白了就是把它变成类似于172.12.342.222这样的IP地址，浏览器就能去找他了。不过我们还是讲一讲这六个过程是什么吧！二，建立TCP连接（三次握手）简单的讲就是，一个人（用户浏览器）走到银行柜台，说你叫个人来给我办理业务，一个

js栈内存和堆内存以及用JavaScript实现静态私有变量，静态私有方法，私有变量，私有方法，公有属性，公有办法

Fancy_vae — Mon, 09 Nov 2020 20:25:55 +0800

js栈内存和堆内存内存分配与垃圾回收：在编译阶段，除了声明变量和函数，查找环境中的标识符这两项工作之外，还会进行内存分配。不同类型的数据会分配到不同的内存空间一般来说栈内存线性有序存储，容量小，系统分配效率高。而堆内存首先要在堆内存新分配存储区域，之后又要把指针存储到栈内存中，效率相对就要低一些了。垃圾回收方面，栈内存变量基本上用完就回收了，而堆内存中的变量因为存在很多不确定的引用，只有当所有调用的变量全部销毁之后才能回收。栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类

一道经典JS面试题——附多种解法，以及全部代码

Fancy_vae — Mon, 09 Nov 2020 19:36:23 +0800

点击以下三个li，输出分别是什么？

Item 0
Item 1
Item 2