- 博客(31)
- 收藏
- 关注
原创 网络模块
常见的状态码1xx:指示信息–表示请求已接收,继续处理。2xx:成功–表示请求已被成功接收、理解、接受。3xx:重定向–要完成请求必须进行更进一步的操作。4xx:客户端错误–请求有语法错误或请求无法实现。5xx:服务器端错误–服务器未能实现合法的请求。2xx200->表示请求成功,获取到相应的内容204->服务器成功处理请求,但是没有返回内容206->服务器成功处理请求,返回资源的一部分,一般在HTTP请求中设置了Content-Range字段3xx301->
2021-03-11 10:27:23
282
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
279
原创 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
155
原创 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
91
原创 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
79
原创 js数组的方法
数组的方法push()可以接受一个或者多个参数,将参数追加到数组的尾部,返回添加后的数组的长度,原数组会发生改变。pop()从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。unshift()可以接受一个或者多个参数,将参数放到数组的头部,返回添加后的数组的长度,原数组会发生改变。shift()从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。slice()截取类 如果不传参数,会返回原数组;如果一个参数,从该参数表示的索引开
2021-01-21 16:55:26
84
原创 原生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
99
原创 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
163
原创 内存泄漏
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
94
原创 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
126
原创 常见浏览器兼容性问题及解决方案
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎所以浏览器兼容性问题一般指:css兼容、js兼容五大浏览器内核Chrome谷歌之前Webkit,已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、css兼容1. 不同浏览器的标签默认的margin和padd.
2021-01-18 21:22:44
1336
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
155
3
原创 router 路由
原理点击跳转参数点击跳转守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。全局前置守卫:router.beforeEach当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫方法接收三个参数:to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由nex
2021-01-14 11:29:30
1062
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
189
原创 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
89
原创 虚拟dom和diff算法
概念用js来模拟DOM中的节点。diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。简单来说:diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁Diff算法的步骤:1.用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中2.当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)
2021-01-08 19:02:26
104
原创 vue双向数据绑定原理
原理vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步:需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并
2021-01-08 14:07:42
82
原创 vue 生命周期
概念生命周期是一个组件从创建到销毁的过程。vue 生命周期有四个阶段创建->挂载->更新->销毁beforeCreate 创建前:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created 创建后:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el p
2021-01-06 19:33:00
109
原创 vue 自定义过滤器
过滤器的作用实现数据的筛选、过滤、格式化。过滤器分为两种:局部过滤器和全局过滤器局部// 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ 名称:function(val){ return val + '处理后的数据' } } })全局 Vue.filter('名称',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) retu
2021-01-06 16:57:41
92
原创 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
109
原创 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
278
原创 keep-alive
keep-alive是什么?keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。它有什么作用?在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性有什么参数?include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达
2021-01-05 21:45:21
67
原创 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
353
原创 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
134
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
207
原创 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
285
原创 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
119
原创 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
185
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
141
原创 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
45
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人