ling_xy的博客

文章目录1.扩展运算符...2.Array.from()类数组3.Array.of()4.find() 和 findIndex()5.fill() 填充数组6.数组实例的 entries()，keys() 和 values()7.includes()8.flat()，flatMap()1.扩展运算符…ES6——扩展运算符…2.Array.from()将两类对象转为真正的数组：类数组（querrySelectAll）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

文章目录一、基本属性1.flex-direction决定了项目的排列方式2.flex-wrap决定了项目排列满屏，是否换行3.justify-content 项目在主轴上的对齐方式4.align-items 决定了项目在交叉轴上的对齐方式二、常用布局1.flex设置元素垂直居中对齐2.用flex布局制作导航栏3.有时候需要做成左图右文字的样式4.固定百分比布局（1）等分布局（2）某一个固定(3)多个固定5.圣杯布局6. 输入框布局，有时需要在输入框的前部添加提示，或者后部添加按钮7.底部footer固定在底

文章目录一、替代函数的 apply 方法1.将数组转为函数的参数2.求出数组最大/小元素3.将一个数组添加到另一个数组的尾部二、扩展运算符的应用1.复制数组2.合并数组3.与解构赋值结合4.实现了 Iterator 接口的对象扩展运算符（…）将一个数组转为用逗号分隔的参数序列 (好比 rest 参数的逆运算)console.log(...[1, 2, 3])// 1 2 3一、替代函数的 apply 方法1.将数组转为函数的参数// ES5 的写法function f(x, y, z) {

vue中qs的使用

1.安装依赖cnpm install --save-dev js-base642.在项目文件中引入let Base64 = require('js-base64').Base643、在项目文件中使用Base64.encode(this.pwd);//加密Base64.decode(this.pwd);//解密

文章目录一、HTTP简介二、HTTP消息结构 [请求报文]（一）请求行（1）请求方法（2）请求头（3）空行（4）请求数据（post）实例 （post）三、HTTP响应消息（一）状态行（1）HTTP状态码（二）HTTP响应头 content-Type（1）定义和用法application/x-www-form-urlencoded四、关于HTTP请求GET和POST的区别1.数据位置2.传输数据的大小3.安全性参考：Http请求一、HTTP简介HTTP协议是 超文本传输协议 的缩写,是用于从万维网服务器

在项目开发中，遇到下面这样一个问题： 在进行敏感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求【需求分析】：每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新

app.js：const express=require("express");const app=express();const url=require("url");let port=8082;let host="127.0.0.1"//接入中间件app.use((req,res,next)=>{ //设置cross跨域 res.header('AcceAss-Control-Allow-Origin','*'); next();})//post请求.

文章目录配置路由一、配置axiosvue 使用axios插件（一）请求方法（不使用）（2）axios封装 !1.设置axios请求超时2.默认设置post的请求头3.设置ajax拦截器（1）请求拦截器（2）响应拦截器4.封装get post请求5.封装完成后 封装整个api 统一管理6.实例附：完整版axios封装用于前后端分离项目 返回的是Promise配置路由1.配置路由文件routes.js：let Index=()=>import('../view/Index.vue')expo

文章目录一、Base641.汉字 数字 字母2.数字/字母加密二、汉字解密1.escape加密2.UIR加密一、Base64Base64，就是选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的"="，实际是65个字符），其它所有符号都转换成这个字符集中的字符。Base64.encode()——加密 ，Base64.decode()——解密Base64.btoa()——加密 ，Base64.atob()——解密先进行引用：<script src="h

文章目录一、事件车通信二、vuex一、事件车通信emit(触发) on(监听变化 处理) 先监听，后触发不是vue，是node 的 eventEmiter在src/eventEmitter/event.js中：//写node的事件通信let event=require("events");let eventEmitter=new event.EventEmitter();//暴露模块export default eventEmitter;main.js中：impor

文章目录一、动态切换组件1.使用组件标签 component 的 is 属性来动态切换组件2.使用keep-alive 缓存之前的状态一、动态切换组件1.使用组件标签 component 的 is 属性来动态切换组件<component :is=""></component>Keep.vue:在它里面挂载两个页面组件keepOne，keepTwo<template><div id="keep"> <div class="keep-li

文章目录一、概念二、示例1.局部注册2.全局注册钩子函数钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。特点1.是个函数，在系统消息触发时被系统调用2.不是用户自己触发的 钩子函数的名称是确定的，当系统消息触发，自动会调用。常见的钩子函数vue的生命周期函数vue的自定义指令一、概念 vue2.x版本 除了内置指令 可以自定义指令 全局注册**directive**

文章目录一.局部过滤器1.无参过滤器2.带参过滤器二.全局过滤器三、v-for 变相使用过滤器四、串联式过滤器过滤器：对绑定的数据以及格式进行整理添加位置：v-bind绑定值 ，{{}}添加过滤器。 表达式的尾部以管道的方式引入 |到现在2.x版本 过滤器都是自定义的 vue允许自定义过滤器两种过滤器： 全局过滤器 和 局部过滤器 过滤器都需要返回值一.局部过滤器在当前组件内部使用1.无参过滤器在filters属性上自定义过滤器实现<template><div id=

文章目录1.虚拟dom2.八大生命周期生命周期钩子的 this 上下文指向调用它的 Vue 实例（VueComponent）1.虚拟dom真实dom : 原生dom - - - 按照dom原生操作顺序实时更新界面（造成性能低）虚拟dom : vNode 和dom对象一致 , 等待一系列操作完成之后 一次性更新界面2.八大生命周期beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeUnmount，

文章目录一、概念二、和methods区别3.计算属性来写setter访问器一、概念计算属性区域类似变量的声明 监听变量 可以缓存之前的变量值默认只能读取 readonly使用get set 访问器 写的值 是可读可写的computed里面不是方法，用的时候都是属性赋值。使用的时候都是以变量形式绑定。（和变量一样，只不过里面可以写复杂的逻辑代码）<template><div id="page"> {{msg.split('').reverse()

文章目录1.概念2.案例1.概念watch监听器 监听组件上的变化 {{msg}} <input type="text" v-model="msg"> data(){ return{ msg:"9527", } }, methods:{ sendMsg(){ console.log("监听到变化后执行该方法"); } }, watch:

文章目录1.数据双向绑定2.数据双向绑定原理 MVVM3.1.数据双向绑定v-bind属性绑定值 是单向数据绑定（只修改前台数据，后台不变）v-model 表单数据绑定 是数据双向绑定<template> <!-- 表单元素的vlaue绑定 --> <input type="text" :value="value" /> <input type="text" v-model="value" /></template>

文章目录一、vue目录结构1.创建项目（简化版）2.配置webpack.config.js二、webpack配置1.什么是webpack2.举例一、vue目录结构完整版中：build文件：打包之后的项目文件config：配置目录（包括端口之类）node_modules：依赖包文件src：开发目录文件【开发只使用这个】包括：assets：放置一些图片（如logo）components：放置组件文件。可以不用App.vue：项目入口文件（可以将组件直接写在这里，而不使用components

文章目录一.环境式安装一.环境式安装

文章目录一.目录及几个主要文件说明二.vue语法vue基本指令1.数据绑定指令2.元素属性绑定 v-bind3.元素显示隐藏4.条件语句指令5.集合绑定 v-for6.类别绑定 class style7.元素的事件绑定一.目录及几个主要文件说明目录结构：build文件：打包之后的项目文件config：配置目录（包括端口之类）node_modules：依赖包文件src：开发目录文件【开发只使用这个】 包括：assets：放置一些图片（如logo）components：放置组件文件。可以不用

文章目录自定义一个如上Array函数类：prototype原型对象例子es5中没有类，把函数称作类： var arr=new Array(); console.log(arr);__proto__:原型链。原型链指向当前类的原型对象自定义一个如上Array函数类：一个对象的原型链(proto) 指向自身原型对象(prototype)原型对象的构造函数 指向本身（函数本身）函数类的原型属性 prototype===函数类的原型对象 /* * 自定义函数类，写类对象

文章目录一、什么是继承？二、为什么使用继承三、继承的几种方法1.原型链继承2.读入数据一、什么是继承？一个对象可以重用另一个对象的属性和方法（所有的对象默认继承的都是Object类）二、为什么使用继承有些对象具有方法，而这些方法通常为函数，如果把这些方法和函数都放在构造函数中声明，会导致内存浪费所以使用继承来节约内存三、继承的几种方法1.原型链继承核心：将父类的实例做为子类的原型对象实现继承 得先需要一个父类： //动物类 function Animal(name,s.

文章目录一.作用：二.写法1.修饰符标记2.元字符（拼接表达式的字符）三.正则表达式在代码中如何使用四、例子一.作用：监测字符串在前后端进行表单验证的时候使用，检测用户输入的信息是否合法二.写法/正则符号/修饰符1.修饰符标记i:不区分大小写g:全局匹配（匹配所有）m:多行匹配s:匹配字符圆点.(包含\n) 默认圆点匹配除\n外的任何字符2.元字符（拼接表达式的字符）\：转义字符，\n匹配换行，\\匹配\var s="abc\\def";console.log(

后台给前端返回的数据格式 ： 数组型+对象解析json 进行数据绑定一、格式1.单条json —— key：value var list={"name":"张三","age":20}; console.log(list); console.log(list.name); //张三2.集合型json var arr=[ {"name":"b1"}, {"name":"b2"}, {"name":"b3"}, .

文章目录一、MVC二、MVVM三、MVP四、MVC与MVVM区别一、MVCMVC(model-view-controller)中：Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。（就是看到界面一切东西）Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。view操作会触发control

文章目录1.使用2.渲染作用域3.具名插槽4.作用域插槽5.动态插槽名插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示。父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签1.使用（1）如果没给值，走默认值<template><div id="comC"> C组件 <!-- 插槽 -->

1.局部注册1.引入组件2.把引入的所有组件全部暴露出去创建一个common.js(或.vue) 和三个小组件common.js中：//1.按需引入文件//同步加载// import A from '@/components/comA';// import B from '@/components/comB';//异步加载import {defineAsyncComponent} from 'vue';let A=defineAsyncComponent(()=>im

文章目录每个组件都存在自己的生命周期常规方法：<script>export default{ name:"compon", data() { return { } }, methods: { }, computed:{ //计算属性区域 //类似变量的声明 监听变量 可以缓存之前的变量值 //默认只能读取 rea

文章目录1.shallowRef2.ref3.reactive3.0提供的API1.shallowRefshallowRef 非递归式监听动态监听数据（复杂数据）只监听里面的value变化（里面外面的都不）加载和组件生命周期有关（在组件挂载之前执行setup api）import { shallowRef } from "vue";export default { name: "Body", setup() { let data = shallowRef({

文章目录1.单组件创建2.组件注册（1）局部注册(2)全局注册vue的开发模式是mvvm模式主要使用的是单组件开发(以组件模块进行开发，动作就是模块)1.单组件创建文件后缀 .vuetemplatejavascriptstyle2.组件注册（1）局部注册在哪里挂在 在哪里注册 类似局部变量在当前组件内部使用components属性 直接声明挂载<template> <div id="App"> <!-- 挂载的组件 写的时

<template> <div id="event"> <!-- 事件的执行参数 类似原生js的 --> <button @click="handle">按钮</button> </div></template><script>export default{ name:"Event", methods:{ handle(){

文章目录一.vue的指令1.数据绑定指令2.元素属性绑定以及简写3.表单元素的vlaue绑定4.集合绑定5.元素显示隐藏6.如果指令vue的开发模式是单组件模式开发 全部是 小的组件 ***.vue组件的写法格式<template></template> (template模板里面只能存在一个子元素) , <script></script> , <style></style>一.vue的指令1.数据绑定指令v-b

文章目录引入Less一 .变量二 .混合三 .嵌套四 .冒泡五 .转义六 .函数七 .命名空间八 .导入Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。引入Less <!-- 浏览器端引入less文件 --> <link rel="stylesheet/less" href="./css/index.less">

这里写目录标题1.什么是解构赋值2.数组解构赋值3.对象解构赋值4.应用例题1.什么是解构赋值ES6允许按照一定得到模式，从数组和对象中提取值，对变量进行赋值ES6允许这样写：var [a,b,c] = [0,3,2];实质为“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予相对应的值2.数组解构赋值等号左右两边的结构不相同，那么将会报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefi

这里写目录标题1.let与const2.块级作用域3.块级作用域例题4.let声明变量5.顶层对象与this6.变量解构赋值1.let与constes6中声明不再用varlet 声明变量 ; const 声明常量2.块级作用域 { //块级作用域 } { function method() { console.log('函数调用成功！'); } } // consol

文章目录一、属性操作1. attr（name value/fn）2. removeAttr（name）3. prop（）3. removeProp（）一、属性操作方法作用attr（name value/fn）获取（一个属性）/设置（两个）元素属性名removeAttr（name）删除属性prop（）添加属性removeProp（）删除属性1. attr（name value/fn）1.设置属性<button class="btn">

jQuery 的选择器 ，返回的是一个类数组底层全是原生js获取1.基本选择器根据类名匹配：<button class="btn">按钮</button><button id="btninfo" class="btn">按钮</button><button class="btn">按钮</button><button class="btn">按钮</button>console.log(.

原生js 只能操作元素的行内样式属性获取 console.log(btnlist.className); console.log(btnlist.name); console.log(btnlist.id); console.log(btnlist.style); console.log(btnlist.style.width); console.log(btnlist.style.height);属性设置设.

文章目录1.获取/设置元素属性2.dom元素添加事件3.事件监听1.获取/设置元素属性获取元素属性<button id="but" onclick="fun1()" onmouseover="fun2()">按钮</button> console.log(but.attributes); but.attributes.removeNamedItem("onmouseover"); console.log(but.attributes.getNa.