web前端
文章平均质量分 51
web夏目贵志
我希望,从蓝天到名利,所有我想要的,都别随风去
展开
-
网页中有大量图片加载很慢,用什么方法进行优化
图片预加载原理:在网页全部加载之前,提前加载图片,当用户需要查看图片时,可以从本地缓存中直接渲染,提供用户更好的体验,减少等待时间。const imgs = [ "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg", "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg", "https://alifei原创 2022-02-21 17:59:31 · 7135 阅读 · 2 评论 -
vue实现谷歌浏览器全局媒体控件
参考 添加链接描述https://qiita.com/clacking/items/c32f0c30e81168e6605b原创 2020-03-10 10:51:36 · 701 阅读 · 0 评论 -
项目中的缓存是如何用的
参考: https://blog.csdn.net/chang384915878/article/details/86747957原创 2020-01-21 17:11:18 · 305 阅读 · 0 评论 -
vue中发布订阅者模式
https://www.jianshu.com/p/2ec316ca0f8b原创 2020-01-13 10:54:07 · 1736 阅读 · 0 评论 -
vue中时间在iphonex 13版本上显示NaN的问题
昨天开发的时候遇到一个问题就是遇到倒计时问题时,计算的剩余时间在iphonex 13版本上显示NaN但安卓,pc上都显示正常然后百度此问题,找到了解决的方法原因:api中的时间格式为 2020-01-10 00:00 这种 “ - ” 链接符, ios不支持这种 “ - ” 链接符解决方法:let date = ‘2020-01-10 00:00’let format ...原创 2020-01-10 10:38:10 · 406 阅读 · 0 评论 -
vsCode中打开新窗口
打开文件,但是显示的窗口只有一个,切换文件时不能打开新的窗口,还是显示当前窗口解决办法:按住control + shift + pmaccommand + shift + p然后进行搜索 setting然后点击上面的 (打开设置(json))将其打开然后修改“workbench.editor.showTabs”: true,false是不能打开新窗口,将其改为true,即可...原创 2019-12-24 15:00:45 · 7192 阅读 · 1 评论 -
vue的声明周期钩子函数
https://blog.csdn.net/weixin_43606158/article/details/90116309原创 2019-12-17 11:06:49 · 143 阅读 · 0 评论 -
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在router文件夹下面的index.js里面引入相关的路由组件,如:import home from ‘@components/home’普通加载的缺点:webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,导致这个文件非常大,加载缓慢,所以就用到了我们的按需加载vue异步加载 { path: '/home', nam...原创 2019-12-17 10:31:53 · 317 阅读 · 0 评论 -
react中运行项目TypeError: Assignment to constant variable.
react运行项目报这个错误,百度了以下原因如下:这个错的原因是因为赋值给常量const remaining = end - new_timeconst一般是声明常量const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化, 不能留到以后赋值,否则会报错let声明的变量可以改变,值和类型都可以改变,没有限制const声明的变量必须赋初始值,let不需要赋初始...原创 2019-12-03 10:25:12 · 1240 阅读 · 0 评论 -
react中自动补全HTML标签的方法
打开设置然后在设置中搜索 includeLanguages如下然后打开setting.json, 添加以下配置“emmet.includeLanguages”: {“javascript”: “javascriptreact”}即可原创 2019-12-02 11:23:41 · 1242 阅读 · 0 评论 -
解决video视频在ios中不能自动播放的问题
视频在 safri 页面不能自动播放的原因:因为ios中明确的指出等待用户的交互动作后才能播放video,也就是说没有得到用户的action就播放的话会被safri拦截解决方法如下:因为这个是微信的链接,需要在微信上点开进入他的浏览器,这里需要一个插件 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type=...原创 2019-11-29 18:40:08 · 11775 阅读 · 0 评论 -
vue和react之间的差异
React是由Facebook创建的javascript UI 框架,它支撑着包括instagram在内的大多数Facebook网站,react与当时流行的jquery, bacebone.js和Angular.js等框架不同,他的诞生改变了javascript的世界,其中最大的变化是react推广了virtual dom,并创建了新的语法jsx,jsx允许开发者在javascript中书写ht...原创 2019-11-14 15:12:21 · 207 阅读 · 0 评论 -
对XML的理解
XML被设计用来传输和存储数据HTML被设计用来显示数据什么是XMLXML 指可扩展标记语言XML 是一种标记语言,类似HTMLXML的设计宗旨是传输数据,而非显示数据XML标签没有被预定义,需要自行定义标签XML 被设计为具有自我描述性XML 是W3C的标准推荐XML与HTML的主要差异XML 不是 HTML的替代XML 和 HTML为不同的目的而设计XML被设计为...原创 2019-11-05 16:13:52 · 311 阅读 · 0 评论 -
ssl 证书和SSL证书申请,http和https的区别
当下互联网时代,浏览网页,电子邮件,网上购物,办公,这些构成了网络上的大部分活动,但是,所有这些活动都可以被截获,网络安全越来越重要,ssl可确保访客和网站之间保持私密状态,https则是实现网站安全最基础有效的方式SSL(安全套接字层)SSL由Netspace公司于1994年创建,它旨在通过web创建安全的internet通信,它是一种标准协议,用于加密浏览器和服务器之间的通信,它允许通过i...原创 2019-10-25 13:42:05 · 233 阅读 · 0 评论 -
nginx以及其优点
nginx是个什么鬼nginx是web服务器,由c语言开发,基于事件驱动能处理百万级别的 tcp连接,高度模块化设计和自由的许可证使得扩展其功能的模块层出不穷,跨平台,可使用当前操作系统特有的一些高效api开提高自己的性能nginx以性能为王,选择nginx的核心理由是处理高并发请求的同时保持高效的服务优点:单次请求更快,高峰期也更快极具扩展性,他由多个不同功能,不同层次,不同类型且耦合...原创 2019-10-09 15:38:04 · 199 阅读 · 1 评论 -
windows, mac下安装nginx
首先:在nginx官网下下载nginxhttps://nginx.org/en/download.htmlmac系统需要如下操作确认电脑是否安装homebrew, 打开电脑终端输入/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”确认home...原创 2019-10-09 14:17:01 · 148 阅读 · 0 评论 -
vue-cli 外部引入vue-router报错 Uncaught TypeError: Cannot redefine property: $router
当使用cdn引入时,将vue-router改成外部引入时报错Uncaught TypeError: Cannot redefine property: $router解决方法:在webpack.base.conf.js配置参数externals: {‘vue’: ‘Vue’,‘vue-router’:‘VueRouter’,‘axios’:‘axios’,“ElementUI”:...原创 2019-10-08 17:53:45 · 2688 阅读 · 1 评论 -
pro、pre、test、dev环境区别
本文链接 https://blog.csdn.net/linzhiqiang0316/article/details/82749649原创 2019-09-29 10:51:57 · 1274 阅读 · 0 评论 -
详解前端开发流程
参考 cnblogs.com/Hsong/p/10720565.html产品经理(pm)输出原型图以及进行评审产品根据需求出原型图原型交互麻烦的地方尽量做的清晰,流程明确需求文档不能少,产品经理,前后端,测试等相关人员一起开需求评审会,是为了找到需求文档中不太明确的地方,完善需求文档,最重要的是让各方都明确产品需求,提高工作效率UI 设计师跟进原型输出UI图设计师根据 产品原型 ...原创 2019-09-29 10:48:14 · 2576 阅读 · 0 评论 -
详解单页面开发原理
参考网址https://www.cnblogs.com/belongs-to-qinghua/p/11151054.htmlhttp://www.zhiliaotang.net/jishujiaoliu/web/965.html单页面开发:单页面开发常用于webapp开发和后台管理系统等单页面应用原理:我们通常所说的单页面应用程序通常是通过前端框架vue, react, angular...原创 2019-09-20 18:16:25 · 2240 阅读 · 0 评论 -
对vue中的this.$nextTick的简单理解
this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom例如: 你在vue的生命周期created()钩子函数进行的dom操作一定要放在vue.nextTick中,原因是因为created()钩子函数执行的时候dom其实并未渲染,此时进行dom操作无异于徒劳,this.$ nextTick就是为了拿到最新的dom,例如你需要给某个元...原创 2019-09-20 16:53:37 · 480 阅读 · 0 评论 -
js基础
外部javascript 的优势分离了 html和代码,使html和 javascript更易于阅读和维护已缓存的javascript文件可加速页面加载javascript显示方案javascript能够以不同方式显示数据使用window.alert()写入警告区使用document.write()写入html输入,在html文档完全加载后使用document.write()将删除所...原创 2019-07-19 15:21:03 · 208 阅读 · 0 评论 -
js函数详解(1)
js函数是被设计为执行特定任务的代码块,js函数会在某代码调用它时被执行例如:function fn(a, b) { return a * b }console.log(fn(2, 5))js函数语法通过 function关键词进行定义,随后跟函数名和括号()函数名可以包含字母,数字,下划线和美元符号(和变量命名规则相同)括号内可包含由逗号分隔的参数(a, b, c...原创 2019-07-29 11:26:41 · 216 阅读 · 0 评论 -
js数据类型详解
js的数据类型分为两种,原始类型(基本数据类型)和引用数据类型, js 变量能够保存多种数据类型基本数据类型包括: null, undefined, number, boolean, string引用类型包括object,比如:object, array, function, Date…下面让我们详细了解一下1.undefined在js中,没有值的变量,其值是undefined, ty...原创 2019-07-24 15:24:28 · 351 阅读 · 0 评论 -
j s函数详解(2)
js函数是通过function关键词定义的,你可以使用函数声明或者函数表达式函数声明function fn () {要执行的代码}被声明的函数不会直接执行,他们被保存供稍后使用,被调用时执行函数表达式var x = function (a, b) { return a * b}在变量中保存函数表达式后,此变量可用作函数var x = function (a, b) { retur...原创 2019-07-29 18:01:44 · 519 阅读 · 0 评论 -
彻底明白js中的this指向问题
文章原地址 https://www.jianshu.com/p/59be7936c345this指向问题 var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var b...转载 2019-07-30 14:19:01 · 183 阅读 · 0 评论 -
判断数据类型的四种方法
typeoftypeof()一般用于判断基本类型null除外,typeof也可以判断function , 但判断Array, Error, null 这几个引用类型时对会被typeof判断为object,所以如果想判断这几种数据类型,就不能使用 typeof 了,比较有局限性instanceofinstanceof检测某一个实例是否属于一个类...原创 2019-07-26 14:06:27 · 1612 阅读 · 0 评论 -
call,apply, bind 的区别 和 用法
前言在js中,函数是对象的方法。如果一个函数不是js的对象的方法,那么它就是全局对象的函数call,apply, bind都是继承自Function.prototype,当然,普通的对象,函数,数组都继承了Function.prototype对象中的三个方法,所以这三个方法都可以在数组,对象,函数中使用,都是为了改变this的指向,三者第一个参数都是this要指向的对象,也就是想指定的上下文,...原创 2019-07-31 14:02:25 · 171 阅读 · 0 评论 -
js中的hasOwnProperty()方法
hasOwnProperty()方法用于检测一个对象是否含有特定的自身属性,返回一个布尔值那么我们来验证一下 function Fn() { this.age = 'wm' } Fn.prototype.sex = '女' var obj = new Fn() // 实例化对象会继承构造函数里的属性和方法 ...原创 2019-07-31 15:38:25 · 24679 阅读 · 0 评论 -
this指向箭头函数详解
this 指的是你的函数执行时所在的环境(作用域)全局环境下console.log(this.document === document) //true在全局环境下this始终指向全局对象,无论是否严格模式在浏览器中,this指向window对象console.log(this === window) //truethis.a = 888console.log(window.a) /...原创 2019-08-02 10:48:57 · 194 阅读 · 0 评论 -
vue中使用import路由懒加载报错解决方法
一般情况下都会正常运行,但当我们运行npm run dev时却报错原因是import属于异步引用组件,需要babel-loader处理所以我们需要安装npm install babel-plugin-syntax-dynamic-import -D这是用来编译import异步引用方法的模块然后在.babelrc中引入这个插件{“plugin”: [‘syntax-dynamic-...原创 2019-08-30 18:04:10 · 3234 阅读 · 0 评论 -
vuex中使用mapMutations/mapGetters报错解决方法
报错信息如下解决npm i babel-preset-stage-3 --save-dev修改.babelrc配置{ “presets”: [“es2015”, “stage-3”] }如果还报错如vue- Couldn’t find preset “es2015” relative to directory原因是没使用es标准,而引用的插件使用了es标准,所以编译会报错解决方法...原创 2019-09-02 11:57:28 · 2791 阅读 · 0 评论 -
vue切换路由时报错Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"}解决方法
本文参考https://blog.csdn.net/weixin_43202608/article/details/98884620今天做vue项目时用this.$router.push(’/login’)切换路由时发现报错如下于是上网搜解决方法,于是就找到了结局方法把项目依赖的node_modules文件夹删除,然后在npm i 重新下载,但是有可能没用,因为再重新下载之后,发现v...原创 2019-09-03 10:25:04 · 3205 阅读 · 4 评论 -
vue中报错, [WDS] Disconnected!解决方法
vue页面中报错 [WDS] Disconnected!原因:因为用了全局代理软件,所以需要将 vue.config.js中{host:localhost}改为{host: 127.0.0.1}刷新页面即可原创 2019-09-03 13:48:39 · 43685 阅读 · 11 评论 -
vue中实现模糊搜索功能[输入关键字显示高亮]
首先利用mock模拟数据html部分首先在input框中绑定v-model实现双向绑定当触发input 框keyup事件时请求数据,请求数据这方面是我封装好的,大家也可以通过axios.get(’/m/api/track’).then((res))直接请求数据,现在输入关键字就可以请求到相应的数据了不过不要着急,我们做的更加完善一点,当点击⬇️和⬆️时所触发的事件以上就是全部...原创 2019-09-06 16:11:40 · 3837 阅读 · 1 评论 -
vue中跨组件传参的两种方式
使用$ bus解决问题至于 $ bus的底层是什么我也不清楚,好像是根据发布订阅模式形成的首先在main.js将 $ bus绑定到vue的原型上再创建一个实例Vue.prototype.$bus = new Vue()然后在兄弟组件中使用this. $bus. $emit(‘change’)向另一个组件派发自定义事件然后在另一个组件中使用this.$ bus. $on(‘chan...原创 2019-09-09 13:28:58 · 1938 阅读 · 0 评论 -
vue项目中实现用户登录以及token的验证
https://www.cnblogs.com/web-record/p/9876916.html原创 2019-09-10 11:28:33 · 984 阅读 · 0 评论 -
vue中 Computed property "getTitle" was assigned to but it has no setter报错解决方法
在网上搜,说可能是在代码中更改了types的值,在页面跳转的时候,element-ui会去更改types的值,原因是因为使用了element-ui里的组件加上vue版本更新出现了这个问题,而我的错误则更接近另一种可能:我的组件中的v-model= 'types’是vuex state中的某个变量vue中是单向数据流,v-model是vue中的双向数据流,但是在computed只通过获取参...原创 2019-09-20 14:30:48 · 901 阅读 · 0 评论 -
js预编译
js预编译例子:参考https://www.jianshu.com/p/78a4bf2fa12ejs是一门不需要编译的语言,由浏览器直接解释执行,但是es6中的模块都在讲述import和export的各种引用,和node 中的require的区别就是es6中的import是预编译时加载的,node中 的require是运行时加载的,还有一个说法是,es6中的import是静态编译阶段执行的,所...转载 2019-07-18 17:40:30 · 305 阅读 · 0 评论