- 博客(31)
- 收藏
- 关注
RSS订阅原创 网络模块
常见的状态码1xx：指示信息–表示请求已接收，继续处理。2xx：成功–表示请求已被成功接收、理解、接受。3xx：重定向–要完成请求必须进行更进一步的操作。4xx：客户端错误–请求有语法错误或请求无法实现。5xx：服务器端错误–服务器未能实现合法的请求。2xx200->表示请求成功，获取到相应的内容204->服务器成功处理请求，但是没有返回内容206->服务器成功处理请求，返回资源的一部分，一般在HTTP请求中设置了Content-Range字段3xx301->
2021-03-11 10:27:23
276
3
原创 vue3语法-axios的二次封装
vue3语法的axios的二次封装与vue2语法的区别不大区别在于最后一步，在main.js中引入不同import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import API from './http/index'const app = createApp(App)app.config.globalPrope.
2021-03-07 19:45:21
273
原创 axios的二次封装
第一步：安装axiosnpm install axios第二步：创建http文件夹并在内部创建三个js文件分别为 api.js、index.js、request.js （在这里文件名不唯一）api.js 用来统一管理api网络接口和请求方式export const api = { index: '/index', detail: '/detail', list: '/list', ...}export const METHOD = { GET: 'get'
2021-03-03 07:51:39
150
原创 js继承
前言继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已// 父类function People(name){ //属性 this.name = name || 'Annie' //实例方法 this.sleep=function(){ console.log(this.name +
2021-01-22 15:06:26
88
原创 js数组的使用
常用的去重方法ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr)];//或者//return Array.from(new
2021-01-22 11:32:51
75
原创 js数组的方法
数组的方法push()可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开
2021-01-21 16:55:26
82
原创 原生ajax请求
创建xhr 核心对象var xhr=new XMLHttpRequest();2.调用open 准备发送参数一：请求方式参数二: 请求地址参数三：true异步，false 同步xhr.open('post','http://www.baidu.com/api/search',true)如果是post请求，必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')3.调用se.
2021-01-20 18:59:08
93
原创 vue跨域请求配置
在根目录创建vue.config.jsmodule.exports={ devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址 ws:false,
2021-01-20 18:37:05
158
原创 内存泄漏
1.循环引用一个很简单的例子：一个DOM对象被一个Javascript对象引用，与此同时又引用同一个或其它的Javascript对象，这个DOM对象可能会引发内存泄露。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用，引用DOM元素的对象或DOM对象的引用需要被赋值为null。2.闭包在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。var a = function() { var largeStr = new Array(1000000
2021-01-20 15:57:04
91
原创 HTML&CSS
一.盒模型1.什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒子模型有哪两种标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏
2021-01-19 14:19:27
122
原创 常见浏览器兼容性问题及解决方案
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容五大浏览器内核Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、css兼容1. 不同浏览器的标签默认的margin和padd.
2021-01-18 21:22:44
1309
2
原创 js操作DOM
获取通过id：getElementById通过name：getElementByName通过标签名：getElementByTagName通过类名：getElementByClassName通过选择器获取一个元素：querySelector通过选择器获取多个元素：querySelectorAll获取html标签：document.documentElement获取body标签：document.body创建创建一个节点：document.createElement()；创建一个文本节点
2021-01-18 19:39:33
152
3
原创 router 路由
原理点击跳转参数点击跳转守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。全局前置守卫:router.beforeEach当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫方法接收三个参数：to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由nex
2021-01-14 11:29:30
1059
1
原创 vue常用指令与修饰符
文章目录1. v-text2. v-html3. v-pre4. v-cloak5. v-once6. v-if7. v-else8. v-else-if9. v-show10. v-for11. v-bind12. v-modelv-model修饰符13.v-on事件修饰符1. v-textv-text主要用来更新textContent，可以等同于JS的text属性。<span v-text="msg"></span>这两者等价：<span>{{msg}
2021-01-12 07:51:12
183
原创 vue 常用插件
富文本编辑器官方文档安装npm i wangeditor --save使用<template> <div> <div id="edit"></div> </div></template><script>import E from "wangeditor";export default { mounted() { const editor = new E("#edit");
2021-01-11 14:17:56
85
原创 虚拟dom和diff算法
概念用js来模拟DOM中的节点。diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单来说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁Diff算法的步骤：1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中2.当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)
2021-01-08 19:02:26
102
原创 vue双向数据绑定原理
原理vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并
2021-01-08 14:07:42
76
原创 vue 生命周期
概念生命周期是一个组件从创建到销毁的过程。vue 生命周期有四个阶段创建->挂载->更新->销毁beforeCreate 创建前：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created 创建后：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el p
2021-01-06 19:33:00
106
原创 vue 自定义过滤器
过滤器的作用实现数据的筛选、过滤、格式化。过滤器分为两种：局部过滤器和全局过滤器局部// 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ 名称:function(val){ return val + '处理后的数据' } } })全局 Vue.filter('名称',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) retu
2021-01-06 16:57:41
86
原创 vue 自定义指令
自定义指令是什么？它是一个对象，对象的属性名即是指令的名字，对象的值是一个函数第一个参数是指令所在的元素。它分为全局自定义指令和局部自定义指令全局：Vue.directive("focus", { inserted: function (el) { el.focus(); el.style.border = "4px solid pink" },}) 局部：directives:{ foucs:{ inserted: fu
2021-01-06 16:43:41
104
原创 element-ui 按需引入
首先，安装 babel-plugin-componentnpm install babel-plugin-component -D将 .babelrc 修改为：{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-
2021-01-06 16:18:42
272
原创 keep-alive
keep-alive是什么？keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。它有什么作用？在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性有什么参数？include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达
2021-01-05 21:45:21
61
原创 formDate序列化
1.formData对象操作方法get(‘key’) 获取表单对象属性的值set(‘key’, ‘value’) 设置表单对象属性的值delete(‘key’) 删除表单对象属性中的值append(key,value) 在数据末尾追加数据getAll(‘user’)获取取key为user的所有值 [‘a’,‘b’]2.FormData作用将form表单元素的name与value进行组合，实现表单数据的序列化异步上传二进制文件3.在vue中使用fromData格式传参首先要创建f
2021-01-05 11:59:51
341
原创 vuex
文章目录1.什么是vuex?2.由哪几部分组成？3.如何使用？4.高级用法-之 数据持久化5.高级用法-之 map辅助函数（语法糖）6.高级语法-值 模块化管理数据 （modules）1.什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modules2.由哪几部分组成？state: 定义公共状态数据actions:利用异步操作mutations来间接修改state中的状
2021-01-04 11:59:48
115
1
原创 配置多环境变量
1.在package.json 里的 scripts 配置 serve stage build，来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli-service buil
2020-12-30 22:02:31
203
原创 scss混合使用
使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。1、创建mixins.scss文件//文本n行溢出隐藏@mixin ellipsisBasic($clamp:2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $clamp;}//$clamp是变量，决定最多显示几行文本，默认
2020-12-30 21:26:41
279
原创 Vant的按需引入
1.自动按需引入组件首先需要安装vantcnpm install vant --save然后在安装一款 babel 插件babel-plugin-import 在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]};
2020-12-30 08:32:18
115
原创 js基础
1.数据类型基本类型：number、undefined、string、boolean、symbol、引用类型：array、function、object、null值类型它都是在栈中存储的，因为它占用空间小。常见的值类型：undefined、number、string、boolean、symbol引用类型它会在堆中申请一个地址，把数据放在堆中，栈中的变量指向的是地址。占用空间大，不方便管理。常见的引用类型：object、array特殊的引用类型：null、functiontypeof运算
2020-12-26 22:18:35
179
2
原创 es6扩展
JavaScript中let、const、var 的区别?1.是否存在变量提升？ var 有。 在ES5中js会有预解析，会在js执行开始时，将var、function 声明到当前作用域的最顶端。 let、const 没有。2.是否存在暂时性死区？ var 不存在。 let const 存在。 因为let const 存在块级作用域，并且不可以变量声明，在let定义之前使用会报错。3.是否允许重复声明变量？ var 可以。 let、const 不可以。4.是否存在块级作用域？
2020-12-15 22:27:21
132
原创 git的使用
git是什么？git是一个版本管理系统，可以随时查看每个版本号，并可以将代码返回到之前的版本。git的常用指令？提交指令： git init 初始化仓库 git add . 追加文件 git status 查看文件 git commit -m 简述名称 向仓库提交代码 git log 查看提交记录撤销指令： git checkout 文件名 把暂存区代码覆盖到工作区 git rm --cached 文件名 从暂存区删除 git reset --hard commitID
2020-12-14 22:19:48
41
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人