- 博客(51)
- 收藏
- 关注
RSS订阅
原创 小七--项目部署到测试环境
前言：在项目团队中，项目组成有产品经理，ui设计师，前端开发，后端开发，测试人员，运维人员在前端开发完成时，要提交到测试人员那边，来进行测试刚好，就来记录一下，我在这期间的内容，方便自己在要忘记的能够想起来在开发完成时，首先要提交到git上，然后再‘上传到测试环境第一步 ：切换到你要合并的主分支上 (这里那dev分支举例，dev为主分支)切换分支的git命令： git checkout 主分支名称（dev）可通过 git branch 来查看在那个分支上第二步 ：把自己的分支.
2021-08-09 16:16:23
2187
原创 跨域原因和解决方法
1.跨域问题的由来何谓同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。2.跨域的影响范围在浏览器中，script、img、iframe、link等标
2021-03-18 09:40:08
341
原创 节流防抖
使用节流防抖函数(性能优化)那么在 vue 中怎么使用呢：在公共方法中（如 `untils.js` 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) {
2021-03-16 22:34:11
101
原创 如何获取地址栏中的参数
第一种：字符串拆分法window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容decodeURI() 可以解码地址栏中的数据 恢复中文数据window.location.search 获得地址栏中问号及问号之后的数据//获取地址栏里（URL）传递的参数 function GetRequest(value) { //url例子：www.bicycle.com?id="123456"&Name="bicy
2021-03-16 19:45:37
701
原创 富文本
安装插件npm install vue-quill-editor -smain.js引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);组件中使用<template&g
2021-03-03 00:15:22
81
原创 vue动画效果
app.vue第一步<transition :name="transitionName"> <keep-alive :include="home"> <router-view /> </keep-alive> </transition>tip:在`app.vue`中，使用`transition`把`router-view`包裹起来第二步 data() { return {
2021-03-03 00:07:50
83
原创 移动端px转换rem
一 下载插件npm i postcss-pxtorem -Snpm i amfe-flexible -S二. 在vue.config.js对css进行设置const autoprefixer = require('autoprefixer');const pxtorem = require('postcss-pxtorem');module.exports = { css:{ sourceMap:false, loaderOptions: {
2021-03-02 23:48:44
104
原创 缓存组件keep-alive
前言:被包含在keep-alive中的组件会多出两个生命周期函数：activated: 在keep-alive组件激活时调用，进入被keep-alive包裹的组件时触发deactivated:在keep-alive组件离开时都调用使用方法:直接包裹要缓存的组件,或者在app.vue中包裹所有组件 <keep-alive :include="home"> <router-view /> </keep-alive>通过判断路.
2021-03-02 23:40:38
2145
原创 vue3rem适配
安装插件 npm i postcss-pxtorem lib-flexible -D新建一个js文件postcss.config.jsmodule.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, pr
2021-03-02 16:40:15
220
原创 安装vue3脚手架及使用
安装脚手架第一步打开小黑框，输入cnpm i -g @vue/cli第二步查看版本 vue -V第三步创见项目 vue create 项目名称手动配置Manually select features 选择手动配置有版本选择 vue3.x (Preview)使用待更新…...
2021-03-01 16:04:22
108
原创 uniapp得自定义组件--组件传值
自定义组件//子组件<template> <view class="list"> <view class="list_list" v-for="(item,key) in list" :key="key" //跳转路径 @click="Tip(item.path)"> <image :src="item.imgUrl" mode=""></image> <text>{{item.title}}</t
2021-02-20 11:10:54
1361
原创 uniapp字体图标库得引入
步骤一@1.阿里巴巴矢量图标库@2.点击加入购物车并下载到本地及解压压缩包步骤二在main.js中导入//引入全局得css样式import './static/uniappIcon/font_2377837_h6osbf613td/iconfont.css'步骤三在页面中使用<text class="iconfont icon-arrow-right list_text"></text>...
2021-02-20 10:57:43
163
原创 图片上传
步骤一<el-upload class="upload-demo" //线上地址换成 action="http://120.53.31.103:84/api/public/img" list-type="picture" :http-request="handlePreview" > <el-button size="small" type="prima
2021-02-03 15:50:33
75
原创 数据类型判断
四种方法typeof、instanceof、constructor、Object.prototype.toString.call()1.typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"object" typeof [1,
2021-01-21 20:46:04
95
原创 常见浏览器兼容性问题
前言:不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容css兼容1. 不同浏览器的标签默认的margin和padding不同CSS里 *{margin:0;padding:0;}2.css3新属性，加浏览器前缀兼容早期浏览器-moz- /* 火狐浏览器 /-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /-o- / Oper.
2021-01-21 20:34:08
120
原创 flex布局
前言:2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。注意:设为 Flex 布局以后，子元素的float、clear和.
2021-01-21 20:20:57
78
原创 CSS Hack
概念一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器1、条件Hack条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见以if开头if结尾2.属性HackIE6能识别下划线，IE7能识别星号“”3.选择符Hack比如IE6能识别 *html .class{}，IE7能识别*+html .class{}...
2021-01-21 20:16:19
51
原创 手写深拷贝（递归）
/** * 深拷贝 */const obj1 = { age: 20, name: 'xxx', address: { city: 'beijing' }, arr: ['a', 'b', 'c']}const obj2 = deepClone(obj1)obj2.address.city = 'shanghai'obj2.arr[0] = 'a1'console.log(obj1.address.city)console.log
2021-01-21 20:12:55
108
原创 异步和单线宏任务微任务
答:宏任务:setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早
2021-01-21 20:10:25
89
原创 作用域
前言:1.什么是作用域2.作用域的种类3.自由变量4.作用域链5.变量提升什么是作用域一段代码起作用的范围作用域的种类全局作用域，函数作用域，ES6新增的块级作用域，只适用于const,letjs中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；自由变量概念:当前作用域没有定义的变量作.
2021-01-21 20:08:01
75
原创 闭包
前言:闭包会从三方面说1.概念2.应用场景3.优缺点概念①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。③可以简单的把闭包理解成:内部函数访问外部函数的变量，函数嵌套函数的形式，我们称为闭包应用场景①函数作为参数被传递②函数作为返回值被返回③实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改.
2021-01-21 19:59:41
47
原创 垃圾回收和内存泄漏
垃圾回收和内存泄漏，我会从一下两个方面来说明：1.标记清除2.引用计数标记清除js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。引用计数引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另.
2021-01-21 19:51:30
69
原创 数组常用方法
数组的常用方法 let list = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] console.log(list) //`push` let a = list.push('a1', 'a3') //返回数组的长度 console.log(a) //10 //`pop` let b = list.pop() //删除数组尾部数据，返回被删除的值 console.log(b) //a3 .
2021-01-21 19:46:56
100
转载 cookie，localSrorage,sesssionStorage
cookie，localSrorage,sesssionStorage1. cookie2. localStorage,sesssionStorage3. localStorage，sessionStorage与cookie的区别4. localStora与sessionStorage的区别5. localStorage，sessionStorage的API1. cookieCookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被借用到本地存储。cookie的缺点存储大小，最大为4kbh
2021-01-19 16:43:03
126
原创 JS操作Dom
1.获取Dom(查)通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）获取html的方法（document.documentElement）获取body的方法（document.body）特别的2种通过css选择器获取一个元素（querySelector）例：获取文档中 id=”demo” 的元素：document.qu
2021-01-19 16:28:13
64
原创 常用的页面布局
常用的页面布局两栏布局三栏布局圣杯布局圣杯布局的实现方式有一下两种:浮动，flex布局双飞翼布局使用flex前言:两栏布局、三栏（圣杯、双飞翼）布局两栏布局两栏布局,左边定宽，右边自适应左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响三栏布局三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧宽度固定，中间自适应,使内容先加载出来，可以把内容部分放在其他标签前面，浏览器是自上而下渲染标签的，这样内容部分就会先加载
2021-01-18 21:37:04
433
原创 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strongh5新增标签:nav header main section …块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素.
2021-01-18 20:45:39
126
原创 link与@import区别
区别：link属于html标签,引入外部样式表。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重 高于@import的权重；link 支持使用javascript改变样式 （document.styleSheets），后者不可...
2021-01-18 20:42:12
85
原创 src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...
2021-01-18 20:38:52
70
原创 水平/垂直居中对齐方式
对齐方式有三种1.父相子绝，子元素向左上移动本身宽度和高度的一半，也可以用transform:translate(-50%,-50%) #box{ width: 400px; height: 400px; background: red; position: relative; } #x{ width: 200px; height: 200px; backg
2021-01-18 20:19:13
363
原创 清除浮动
总结回答为啥要清除浮动清除浮动的四种方式为啥要清除浮动父元素因为子元素浮动引起内部高度为0的问题清除浮动的四种方式1.额外标签法:给要清除浮动标签的后面添加一个空白标签，设置clear：both2.给父级添加overflow通过触发BFC的方式，实现清楚浮动效果，定义宽度，使用overflow:hidden时，浏览器会自动检查浮动区域的高度3.使用after伪元素清除浮动IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题4.使用before和
2021-01-18 19:45:53
86
原创 css布局中的BFC问题
边距重叠问题边距重叠BFC- 什么是BFC如何触发BFC？BFC的原理？(面试可不说，但要理解)BFC的应用前言:有的面试官不会直接问你什么是BFC，也会以下的方式问你什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？答:边距重叠例如：现在有两个div都设了边距，在垂直的方向，两个div边距会发生重叠，以绝对值大的为最终结果显示在页面上边距重叠有两种的情况1.父子关系的边距重叠子元素设置了外边距，在没有父元素变成BFC的情况下，父元素也会产生外边距解决办法：给父
2021-01-18 19:18:34
116
原创 盒模型
总结盒模型- 什么是盒模型- 盒模型有那两种- 标准和怪异盒模型的转换- JS盒模型- 盒模型产生的双边距重合问题- 什么是盒模型在html页面中，每个元素都可以看作一个盒子，由content(内容)、margin(外边距)、padding(内边距)、border(边框)四部分组成- 盒模型有那两种盒模型分为怪异盒模型(IE盒模型):border-sizing:border-box怪异盒模型是由width和左右margin组成width里包含padding和border标准盒模型：
2021-01-18 17:19:53
72
原创 原型与原型链
每个函数都有一个prototype属性，被称为显示原型每个实例对象都会有_ _proto_ _属性,其被称为隐式原型，每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype每个prototype原型都有一个constructor属性，指向它关联的构造函数原型链：获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototyp.
2021-01-14 20:31:07
64
原创 自定义组件，组件通信
在项目开发时，采用组件化得思想开发，搭建项目时，src下有views目录，一般放页面级组件，在创建一个comment目录来放公共组件，比如头部组件和底部组件，然后在创建一个feature目录来放功能组件，比如轮播组件，上拉加载更多组件，搜索组件，tabbar组件等，组件提升项目得开发效率，解决了传统项目得难维护，效率低，复用性低等问题。用vue.extend方法来创建组件，在使用Vue.componen来注册组件，用项目开发项目，每个.vue都是一个组件，在父组件中使用import引入子组件，compo.
2021-01-14 20:05:38
89
原创 keep-alive
概念:keep-alive是vue得内置组件，当它包裹动态组件的时候，会缓存不活动得组件，而不是摧毁，和transition相似，keep-alive是一个抽象组件，自身实例不会渲染成dom,也不会出现在父组件链中作用:当在组件切换得时候，会把去换得组件缓存在内存中，不会重复渲染dom，减少加载时间及性能消耗，提高用户体验感原理:在created钩子函数调用的时将缓存得vNode节点保存在this.cache中，在页面渲染得时候，如果vNode得name符合缓存条件，可以用include以及e.
2021-01-14 19:04:33
92
原创 项目搭建--从基础搭建开始
项目步骤配置多环境变量axios封装按需引入element-ui配置alias别名(../)解决跨域打包配置(会有改动....)打包总结配置多环境变量1.创建三个.evn文件 生成环境 测试环境 开发环境.env.development 本地开发环境配置NODE_ENV='development'# must start with VUE_APP_VUE_APP_ENV = 'development'.env.staging 测试环境配置NODE_ENV='production'
2021-01-14 17:13:48
317
1
转载 虚拟Dom和diff算法
虚拟Dom概念:虚拟Dom本质就是js对象,用js来模拟DOM中的节点。一个能代表dom树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性优点：1.减少dom操作虚拟dom可以将多次操作和并一次操作。比如你，添加1000个节点，却是一个接一个操作（dom操作1000次一次次添加，虚拟dom只操作一次，将1000个文本直接显示在页面上）虚拟dom借助Dom diff 可以吧多余的操作省掉，比如添加1000个节点，只有10个是新增的（检测原有的就添加没有的10个）2.跨平
2021-01-14 13:53:17
221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人