- 博客(50)
- 收藏
- 关注
RSS订阅原创 vue中使用v-slot无效
使用具名插槽，怎么也无法在组件中再添加任何内容，页面无元素的渲染，升级了vue-loader、vue-template-compiler版本之后依旧无效，奇怪的是，再另外写一个demo是正常可渲染的，这时候我找到了问题所在，我把slot写成了solt。在此，心里罚写slot一百遍！！！！！...
2020-07-13 11:39:51
3558
3
原创 vscode插件离线安装
最近新入职公司，使用远程桌面办公。打开vscode时，发现vetur插件都没有安装。于是开始自己离线安装。 在vscode插件库（https://marketplace.visualstudio.com/vscode）搜索自己需要的插件，点击右侧 Download Extension 然后将下载的文件，复制到vscode安装目录下的bin文件夹中 在bin文件夹下打开cmd，运行如下命令code --install-extension octref.vuter-0.23.0.vsi
2020-07-08 11:36:36
6399
2
原创 HTML页面引入Echarts文件后，实例化时报echarts is not defined解决
在文档头部添加<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
2020-07-08 09:20:36
1043
原创 清除浮动的三种方式
1.给父级定义height 此种方法简单，但是只适用定高得布局2.在结尾处加一个空的div兄弟元素，添加clear：both样式。3.给父级元素增加伪类after与zoom.clearfix:after {content： "";display：block;visibility：hidden;height：0;line-height：0;clear：both; }.clearfix { zoom: 1}/*IE8 以上和非 IE 浏览器才支持：after,，zoom(IE..
2020-05-23 08:28:47
161
原创 浏览器输入URL之后发生什么
用户输入URL地址 对URL地址进行DNS域名解析 进行TCP连接 进行HTTP报文的请求与响应 浏览器解析文档资源并渲染页面DNS域名解析浏览器根据url，在自身缓存中查找DNS中的解析记录。如果存在，则直接返回IP地址；如果不存在，则查找操作系统中的hosts文件是否有该域名的DNS解析记录，如果有就返回 若上一步没有解析记录，或者已过期，则向域名服务器发起请求解析这个域名。...
2020-03-25 10:36:33
84
原创 浏览器事件循环机制Event Loop
概念Event Loop即事件循环，是指浏览器或者Node的一种解决JavaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用的异步的原理。是指函数在执行栈、宿主环境、任务队列中的循环移动。栈，计算机科学中，限定仅在表尾进行插入和删除操作的线性表。栈是一种数据结构，遵循后进先出的原则。队列，只允许在表的前端进行删除操作，在表的后端进行插入操作。（类似生活中排队）遵循先进先出...
2020-03-25 09:59:53
207
原创 webpack六大核心概念
Entry入口，Webpack执行构建的第一步从entry开始，可抽象成输入。Module模块，在webpack中一切皆模块，一个模块对应一个文件。webpack会从入口文件开始递归找出所有依赖的模块。Chunk代码块，一个chunk由多个模块组合而成，用于代码合并与分割。Loader模块转换器，用于将模块的原内容按照需求转成新内容。Plugin插件，使用插件完...
2020-03-25 00:23:14
108
原创 Webpack打包优化
开发环境1.热模块替换HMR优化开发环境加载速度。正常情况下，开发环境修改了某一模块代码，运行时，会重新加载所有css资源以及js资源。开启HMR功能之后，在一个源码发生改变时，只重新编译发生变化的模块，再利用新输出的模块替换老模块。配置方式devServer:{ contentBase:resolve(__dirname,'build'), compres...
2020-03-25 00:16:33
167
原创 浏览器渲染页面过程解析
浏览器页面解析浏览器解析生成页面大致可分为五个步骤：HTML代码转成DOM树 CSS代码转成CSSOM (CSS Object Model) 结合DOM树和CSSOM生成 Render树（包含每个节点的视觉信息） 生成布局（layout),将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上。"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（...
2020-03-24 23:16:18
133
原创 Vue强制刷新组件的方式
使用this.$forceUpdate,强制刷新组件。 使用watch监测值的变化，与v-if以及this.$nextTick配合使用。 使用key-changing。vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。...
2020-03-24 23:03:36
706
原创 IE不兼容某些新特性问题
1.IE盒模型2.在IE中不支持动态的写table的innerHTML,但是支持div或者span的innerHTML动态读写。3.rgba不兼容4.window.event对象 IE具有window.event对象，其余浏览器没有。通过给函数传参解决5.event.srcElement IE没有event.target属性，只有srcElement。...
2020-03-24 22:51:29
93
原创 JS实现继承
ES5实现方式一:子类原型指向父类实例;缺点: 1.无法向父类传参 2.想在子类原型上添加方法必须在new Person之后 3.父类原型上所有属性被共享 function Person(name, age) { this.name = name;...
2020-03-22 22:57:55
74
原创 JS实现冒泡排序以及快速排序
冒泡排序：将数组数组相邻两项进行比较，如果前一个比后一个大，则交换他们两个。function bubbleSort(arr) { for (let i = 0; i < Math.floor(arr.length / 2); i++) { for (let j = 0; j < arr.length - i; j++) { if (arr[j] &g...
2020-03-22 21:18:50
267
原创 JS实现数组去重的四种方式
将数组每一位作为对象属性，输出对象属性名。具体实现如下 function arrUnique(arr) { let obj = {} arr.forEach((item) => { if (obj[item]) { return } else { obj[item] = 1 } }) let uniArr = Obj...
2020-03-22 17:35:08
131
原创 数组方法汇总
添加: 1.push:向数组最后一位添加，改变原数组。 2.unshift:向数组首位开始添加，改变原数组。 3.splice:(index,0,value)从index位置开始，删除0位，添加value值。 当参数为数组时，整个数组作为最后一位或者第一位添加。参数可为多个。删除: 1.pop:删除数组最后一位。...
2020-03-22 17:02:19
154
原创 web基础知识--video与audio元素
<video controls autoplay muted loop style="width:500px;"> <source src="media/open.mp4"> <source src="media/open.webm"> <p> 对不起，你的浏览器不支持vid...
2019-12-09 11:29:34
116
1
原创 web基础知识-img元素
img元素src属性:source图片链接地址alt属性:当图片资源不存在,或者网络断开时,代替图片与a元素一起使用<a href=""> <img src="" alt=""></a>与map元素一起使用<img usemap="#map" src="" alt=""><map name="map"&g...
2019-12-09 10:57:35
324
原创 web基础知识--HTML页面结构
元素Element元素=起始标记+结束标记+元素内容+元素属性 属性=属性名+属性值 属性分类: 局部属性:某些元素特有 全局属性:所有元素通用 有些元素没有结束标记,叫做空元素标准文档结构 <!DOCTYPE html> 文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5.不写文档声明,浏览器将进入怪异渲染模式. <htm...
2019-12-09 09:29:34
232
原创 CSS设置height：100%无效
父元素必须制定高度，子元素设置height：100%才有效。html,body,#app { height: 100%;}
2019-12-09 09:12:06
269
原创 web基础知识--主流浏览器及其内核
浏览器：由shell---外壳与core---内核（JS执行引擎、渲染引擎）组成。目前主流浏览器及其内核IE:TridentFirfox:GeckoChrome:Webkit/BlinkSafari:WebkitOpera:Presto/Blink...
2019-12-09 09:10:40
113
原创 监测浏览器关闭进行提示
window.onbeforeunload = function(e) { if (this.$store.getters.getModify) { return ((e || window.event).returnValue = "该操作将会导致非正常退出系统(正确退出系统方式：点击退出系统按钮)，您是否确认?"); }};...
2019-10-24 10:49:36
471
原创 新DOM操作
通过CSS选择器获取符合条件的第一个元素=>document.querySelector('Selector')通过CSS选择器获取所有符合条件的元素，类数组=>document.queryAllSelector('Selector')添加class=>node.classList.add('classname')删除class=>node.classList....
2019-10-22 11:40:25
69
原创 HTML5标签语义化
标签语义化的作用： 能够便于开发者阅读和写出更优雅的代码。 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。 更好地搜索引擎优化。 H5中新增的语义标签： <section>表示区块 <article>表示文章。如文章、评论、帖子、博客 <header>表示页眉 <fo...
2019-10-22 11:12:41
161
原创 IE不兼容HTML5、CSS3解决方法
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。<!-- 条件注释 只有ie能够识别--><!--[if lte ie 8]> <script src="html5shiv.min.js"></script><![endif]--> l：less 更小 ...
2019-10-22 11:08:56
1061
原创 React组件以及组件的两大属性State&props
React组件含义：html、css、js代码的集合1.工厂函数组件（简单组件）function Simple(){ return <h1>简单组件</h1>}ReactDOM.render(<Simple/>,document.getElementById('app'));2.ES6类组件（复杂组件）class Complex exte...
2019-10-11 10:33:18
162
原创 React安装引入
目录React特点React安装引入JSX语法规则ES6React特点1.声明式编码(react,vue)数据驱动视图 jQuery(命令式编码)2.组件化编码3.一次运行，随处编写(可以在服务端编写)4.高效 虚拟DOM5.单向数据流(vue,react) 组件数据只能单向传递 vue有双向数据绑定功能React安装引入// react文件<script crossori...
2019-10-11 10:30:25
84
原创 Element UI -- form表单验证必填时，有值时依旧验证不通过
使用Element UI form表单验证时 <el-form-item v-if="item.C_type=='input_text'" class="components" :prop="item.C_name" :rules="{required: item.props.rules.required...
2019-09-20 08:58:28
5502
1
原创 360浏览器内核指定
浏览器默认内核的指定只需在head标签中添加一行代码即可：若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">若页面需默认用ie标准内核，增加标签：<meta name="rende...
2019-08-29 15:56:43
905
原创 Vue中动态引入本地路径报错
问题：HTML中代码：<img :src="item.image" width="20px" height="20px" />data中数据 item: { id: 1, name: "哈哈哈", image: "../../assets/browser/Chrome.gif", },...
2019-08-29 15:54:56
638
原创 Vue使用crypto-js时报错TypeError: Object(...) is not a function
控制台报错如下：原因：引入Encrypt时方式错误，少加了{}正确形式：import { Encrypt } from "../plugins/encoder";
2019-08-15 14:02:31
11285
原创 Vue cli3兼容IE配置及报错SCRIPT1003: 缺少 ':'，SCRIPT5009：Plugin未定义
因为IE浏览器不能识别es6语法，需要安装babel-polyfill插件首先，安装babel-polyfillnpm install babel-polyfill在babel.config.js中配置module.exports = { presets: [ '@vue/app', [ '@babel/preset-env', {...
2019-08-08 10:58:53
8795
7
原创 'cross-env' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
启动项目提示：'cross-env' 不是内部或外部命令，也不是可运行的程序或批处理文件。执行 npm install 下载依赖初始化即可
2019-08-08 10:38:50
48295
4
原创 实现ctrl、shift、alt单独键盘事件，并且与组合键不冲突
实现ctrl、shift、alt单独键盘事件，并且与组合键不冲突keydown(){ if (event.ctrlKey && !event.shiftKey && !event.altKey) { //do something } if (event.altKey && !event.shif...
2019-08-07 21:04:56
1140
原创 axios请求拦截器--token验证
需求描述如下：新用户首次访问页面时，未携带token 接口访问成功后，后端返回一个token值，前端需要在之后每次访问时携带token，去请求接口 vue cli具体做法是，在第一次调用接口成功后，将token存入到localStorage中，同时，添加请求拦截器，在以后每次访问时携带token。在mian.js中配置// 添加请求拦截器axios.interceptor...
2019-08-04 17:48:02
3495
原创 img元素实现图片裁切放大
代码如下：在img元素外面包裹一层div与img元素等宽等高，设置绝对定位，并相对于外层div居中 在包裹img元素的div外面再套一层div，宽高为需要展示的宽高，设置超出部分隐藏<div class="wrapper"> <div class="imgwrapper"> <img src="./img/a1.pn...
2019-08-04 17:28:43
3262
转载 {__ob__: observer}取值为undefined问题解决
操作数据库返回的数据时，发现访问属性值为undefined解决方法如下：将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式JSON.parse(JSON.stringify(data)) var self = this; var query = new AV.Query("MenuItem"); query.find("na...
2019-06-06 18:34:47
8606
原创 leancloud在多个页面初始化引用报错的问题解决
我写的demo是有关于订餐系统的注册页面以及管理页面。按照官网的安装指南 安装leancloud 之后https://leancloud.cn/docs/sdk_setup-js.html，在注册组件中进行初始化。var AV = require("leancloud-storage");var APP_ID = "qfY3HpQ64EBywXYaCDheuvtK-gzGzoHsz"...
2019-06-06 18:28:48
743
原创 Vue CLI搭建脚手架
1.安装node.js ==>进入node.js官网https://nodejs.org/en/,选择相对应的版本进行下载。下载完成之后进行安装，一直点击下一步。2.检测npm是否安装成功。Win+R打开cmd,输入 'npm -v',看是否出现对应的版本号。3.全局安装vue-cli。在cmd中输入 ‘npm install --global vue-cli’4.创建...
2019-06-06 18:28:35
130
原创 Vue --v-model
v-model，它负责监听用户的输入事件以更新数据。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 textarea 元素使用value属性和input事件； checkbox 和 radio 使用ch...
2019-06-05 11:57:46
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人