web
SiaEyre
这个作者很懒,什么都没留下…
展开
-
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 · 1114 阅读 · 0 评论 -
浏览器输入URL之后发生什么
用户输入URL地址 对URL地址进行DNS域名解析 进行TCP连接 进行HTTP报文的请求与响应 浏览器解析文档资源并渲染页面DNS域名解析浏览器根据url,在自身缓存中查找DNS中的解析记录。如果存在,则直接返回IP地址;如果不存在,则查找操作系统中的hosts文件是否有该域名的DNS解析记录,如果有就返回 若上一步没有解析记录,或者已过期,则向域名服务器发起请求解析这个域名。...原创 2020-03-25 10:36:33 · 96 阅读 · 0 评论 -
浏览器事件循环机制Event Loop
概念Event Loop即事件循环,是指浏览器或者Node的一种解决JavaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用的异步的原理。是指函数在执行栈、宿主环境、任务队列中的循环移动。栈,计算机科学中,限定仅在表尾进行插入和删除操作的线性表。栈是一种数据结构,遵循后进先出的原则。队列,只允许在表的前端进行删除操作,在表的后端进行插入操作。(类似生活中排队)遵循先进先出...原创 2020-03-25 09:59:53 · 225 阅读 · 0 评论 -
webpack六大核心概念
Entry入口,Webpack执行构建的第一步从entry开始,可抽象成输入。Module模块,在webpack中一切皆模块,一个模块对应一个文件。webpack会从入口文件开始递归找出所有依赖的模块。Chunk代码块,一个chunk由多个模块组合而成,用于代码合并与分割。Loader模块转换器,用于将模块的原内容按照需求转成新内容。Plugin插件,使用插件完...原创 2020-03-25 00:23:14 · 120 阅读 · 0 评论 -
Webpack打包优化
开发环境1.热模块替换HMR优化开发环境加载速度。正常情况下,开发环境修改了某一模块代码,运行时,会重新加载所有css资源以及js资源。开启HMR功能之后,在一个源码发生改变时,只重新编译发生变化的模块,再利用新输出的模块替换老模块。配置方式devServer:{ contentBase:resolve(__dirname,'build'), compres...原创 2020-03-25 00:16:33 · 178 阅读 · 0 评论 -
浏览器渲染页面过程解析
浏览器页面解析浏览器解析生成页面大致可分为五个步骤:HTML代码转成DOM树 CSS代码转成CSSOM (CSS Object Model) 结合DOM树和CSSOM生成 Render树(包含每个节点的视觉信息) 生成布局(layout),将所有渲染树的所有节点进行平面合成 将布局绘制(paint)在屏幕上。"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(...原创 2020-03-24 23:16:18 · 149 阅读 · 0 评论 -
Vue强制刷新组件的方式
使用this.$forceUpdate,强制刷新组件。 使用watch监测值的变化,与v-if以及this.$nextTick配合使用。 使用key-changing。vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。...原创 2020-03-24 23:03:36 · 721 阅读 · 0 评论 -
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 · 113 阅读 · 0 评论 -
HTML中箭头
向下↓向上↑原创 2020-01-07 17:08:54 · 4516 阅读 · 2 评论 -
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 · 132 阅读 · 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 · 356 阅读 · 0 评论 -
web基础知识--HTML页面结构
元素Element元素=起始标记+结束标记+元素内容+元素属性 属性=属性名+属性值 属性分类: 局部属性:某些元素特有 全局属性:所有元素通用 有些元素没有结束标记,叫做空元素标准文档结构 <!DOCTYPE html> 文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5.不写文档声明,浏览器将进入怪异渲染模式. <htm...原创 2019-12-09 09:29:34 · 280 阅读 · 0 评论 -
CSS设置height:100%无效
父元素必须制定高度,子元素设置height:100%才有效。html,body,#app { height: 100%;}原创 2019-12-09 09:12:06 · 290 阅读 · 0 评论 -
web基础知识--主流浏览器及其内核
浏览器:由shell---外壳与core---内核(JS执行引擎、渲染引擎)组成。目前主流浏览器及其内核IE:TridentFirfox:GeckoChrome:Webkit/BlinkSafari:WebkitOpera:Presto/Blink...原创 2019-12-09 09:10:40 · 124 阅读 · 0 评论 -
监测浏览器关闭进行提示
window.onbeforeunload = function(e) { if (this.$store.getters.getModify) { return ((e || window.event).returnValue = "该操作将会导致非正常退出系统(正确退出系统方式:点击退出系统按钮),您是否确认?"); }};...原创 2019-10-24 10:49:36 · 500 阅读 · 0 评论 -
新DOM操作
通过CSS选择器获取符合条件的第一个元素=>document.querySelector('Selector')通过CSS选择器获取所有符合条件的元素,类数组=>document.queryAllSelector('Selector')添加class=>node.classList.add('classname')删除class=>node.classList....原创 2019-10-22 11:40:25 · 95 阅读 · 0 评论 -
HTML5标签语义化
标签语义化的作用: 能够便于开发者阅读和写出更优雅的代码。 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容。 更好地搜索引擎优化。 H5中新增的语义标签: <section>表示区块 <article>表示文章。如文章、评论、帖子、博客 <header>表示页眉 <fo...原创 2019-10-22 11:12:41 · 197 阅读 · 0 评论 -
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 · 1083 阅读 · 0 评论 -
vue安装引入
直接<script></script>引入vue被注册成为一个全局变量<script src="vue.js"></script><script src="vue.min.js"></script>#CDN制作原型或学习,最新版本<script src="https://cdn.jsdelivr...原创 2019-05-16 09:19:23 · 119 阅读 · 0 评论 -
HTML多次点击字体背景颜色变蓝
解决方法:变蓝是因为浏览器添加了默认的事件1.js方法组织默认事件selectstart发生$('不要变蓝的元素').bind("selectstart", function () { return false; });2.css方法body { -webkit-user-select: none; -moz-user-select: none; -ms-u...转载 2019-05-16 11:07:19 · 2015 阅读 · 0 评论 -
Ajax
一、Ajax是什么异步的JavaScript与XML(JSON),主要是完成局部刷新核心:XMLHttpRequest二、Ajax的基本使用1.Ajax创建普通:new XMLHttpRequest()低版本IE:new ActiveXObject()兼容方法: function getAjax() { if (XMLHttpRequest) {...原创 2019-05-24 00:04:16 · 112 阅读 · 0 评论 -
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 · 3332 阅读 · 0 评论 -
axios请求拦截器--token验证
需求描述如下:新用户首次访问页面时,未携带token 接口访问成功后,后端返回一个token值,前端需要在之后每次访问时携带token,去请求接口 vue cli具体做法是,在第一次调用接口成功后,将token存入到localStorage中,同时,添加请求拦截器,在以后每次访问时携带token。在mian.js中配置// 添加请求拦截器axios.interceptor...原创 2019-08-04 17:48:02 · 3535 阅读 · 0 评论 -
'cross-env' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
启动项目提示:'cross-env' 不是内部或外部命令,也不是可运行的程序或批处理文件。执行 npm install 下载依赖初始化即可原创 2019-08-08 10:38:50 · 48385 阅读 · 4 评论 -
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 · 8876 阅读 · 7 评论 -
实现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 · 1210 阅读 · 0 评论 -
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 · 677 阅读 · 0 评论 -
360浏览器内核指定
浏览器默认内核的指定只需在head标签中添加一行代码即可:若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">若页面需默认用ie标准内核,增加标签:<meta name="rende...原创 2019-08-29 15:56:43 · 953 阅读 · 0 评论 -
HTML5 canvas实现画板功能
HTML5新标签:<canvas></canvas>定义画布,需要配合js完成功能。在canvas标签内部的内容为不支持canvas时显示的内容。行内样式width与height设置画布大小。用css设置画布大小,可能会导致<canvas>元素中展示的内容变形。<input type = "color"> 定义拾色器<input t...原创 2019-05-14 23:45:54 · 5417 阅读 · 5 评论