web前端
文章平均质量分 73
前端学习记录
快乐水续航
降低期待,就是减少失望的最好方法.
展开
-
vue-router路由守卫与工作模式
【代码】vue-router路由守卫与工作模式。原创 2022-09-26 16:23:06 · 312 阅读 · 1 评论 -
Vue-router的安装使用详细讲解
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path的路径写法配置,必须使用name配置!跳转原创 2022-09-21 17:14:37 · 1501 阅读 · 0 评论 -
【Vuex】vuex的模块化+命名空间
目的:让代码更好维护,让多种数据分类更加明确.原创 2022-09-19 16:17:20 · 515 阅读 · 0 评论 -
【Vuex】Vuex搭建及多组件共享
利用vuex自带的{mapState,mapGetters,mapMutations,mapActions}来方便快捷的生成代码.vuex4版本只支持vue3.0,所以在vue2.0中使用,需要npm i vuex@3 指定版本。首先在需要的组件文件中引入。原创 2022-09-16 11:23:02 · 376 阅读 · 0 评论 -
【Vue2】插槽
默认插槽、具名插槽、作用域插槽。原创 2022-09-13 10:44:39 · 347 阅读 · 0 评论 -
组件-组件间通信的几种情况
父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法一种组件间的通信方式,适用于: 子组件传递给父组件使用场景: A是父组件,B是子组件,B给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中).绑定自定义事件:第一种方式,在父组件中: 或 第二种方式,在父组件中:触发自定义事件:解绑自定义事件:或清空所有组件上也可以绑定原生DOM事件,需要使用native修饰符注意:通过绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!!!.....原创 2022-06-09 16:36:19 · 207 阅读 · 0 评论 -
Vue组件化开发小笔记及浏览器本地存储
Vue组件化开发小笔记及浏览器本地存储,mixin混入的使用,插件的用法,组件间父子通信原创 2022-06-07 20:32:33 · 155 阅读 · 0 评论 -
【Vue】组件的定义与使用--精细版
Vue 组件化编程模块与组件、模块化与组件化组件内置关系原型对象关系分析原创 2022-06-05 11:32:57 · 932 阅读 · 0 评论 -
【Vue】生命周期回调函数
生命周期回调函数,生命周期函数,生命周期钩子(程序员间沟通常称生命周期钩子)。原创 2022-06-04 16:19:11 · 1878 阅读 · 2 评论 -
【Vue】v-model收集表单数据
v-model的表单数据获取方式与常用的修饰符,表单示例原创 2022-06-03 16:06:12 · 347 阅读 · 0 评论 -
【JS】中 reduce() 的用法
一、语法arr.reduce(function(prev,cur,index,arr){…}, init);其中,arr 表示原数组;prev 表示上一次调用回调时的返回值,或者初始值 init;cur 表示当前正在处理的数组元素;index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;init 表示初始值。乍一看感觉很复杂,但是没关系,这只是看起来而已,其实常用的参数只有两个:prev 和 cur。二、实例先提供一个原始数组:let ar原创 2022-05-16 10:09:20 · 216 阅读 · 0 评论 -
【Git】OpenSSL SSL_read: Connection was aborted, errno 10053
OpenSSL SSL_read: Connection was aborted, errno 10053报错解决办法1、Git默认限制推送的大小,运行命令更改限制大小即可 增加缓冲 git config --global http.postBuffer 524288000 2、更改网络认证设置 git config --global http.sslVerify "false"...原创 2022-05-12 20:53:08 · 5367 阅读 · 0 评论 -
Javascript 同步,异步:微任务和宏任务
1.javascript是单线程的语言javascript是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。如下:如果有多个任务要执行,执行其他任务时,其他任务都要进行等待1.1 单线程执行任务队列的问题如果前一个任务非常耗时,则后续的任务不得不一直等待,从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题,javascript把待执行的任务分为了两类。同步任务又叫做 非耗时任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能转载 2022-05-10 16:09:13 · 1742 阅读 · 7 评论 -
【Vue】监测数据改变的原理
Vue监视数据的原理:Vue会监视data中所有层次的数据。如何监测对象中的数据?通过setter实现监视,且要在 new Vue时就传入要监测的数据。(1)对象中后追加的属性,Vue默认不做响应式处理。(2)如需给后追加的属性做响应式,请使用如下API:Vue.set(target,propertyName/index,value) 或vm.$set(target,propertyName/index,value)例如:Vue.set(this.student,'sex','原创 2022-04-29 15:04:17 · 226 阅读 · 0 评论 -
【Vue2.xx】绑定class和样式
Vue中的绑定1.class样式写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。注意:font-size要用驼峰命名法:style="[a,b]"其中a、b是样式对象。3.代码案例Html原创 2022-04-26 09:45:58 · 513 阅读 · 0 评论 -
【Vue2.xx】侦听(监视)watch属性
侦听(监视)watch属性案例天气小案例小技巧事件绑定可以写较为简单的函数,但是使用的必须是Vue实例所包含的数据或函数。<body> <div id="root"> <!--也可以用三元表达式--> <h2>今天天气很{{info}}</h2> <!--只能用vm里有的方法,仅限于做的事情很简单--> <!--<button @click="原创 2022-04-25 19:25:21 · 360 阅读 · 0 评论 -
【Vue3.xx】基础讲解
Vue3基础1. Vue3的介绍Vue设计的初衷就包括可以被渐进式地采用 ,所以Vue3支持2中的大部分特性 (迁移指南)。Vue3新增特性:性能虚拟DOM的重写打包大小减少( tree shaking)初次渲染快内存使用减少(compositionAPI)新增语法(compositionAPI)ref和reactivecomputed和watch新的生命周期函数自定义函数-Hooks函数(像React Hooks)…其它原创 2022-04-20 16:15:51 · 685 阅读 · 0 评论 -
【Vue】使用vue-cli与路由的基本使用
基础-vue-cli 工具-介绍介绍: vue-cli是一个辅助开发工具=> 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 …作用: 可以为开发者提供一个**标准的项目开发结构** 和配置 开发者不需要再关注其他vue-cli 一个**命令行工具,最新版本也支持图形化**操作,可快速搭建大型网页应用基础-vue-cli-安装**说明:**vue-cli本质上是一个npm包,也需要通过npm去安装下载npm i -g @vue/cli // 全局安装脚手架 默认安原创 2022-04-14 16:52:22 · 225 阅读 · 0 评论 -
【Vue】路由的原理与基本用法
基础-组件-组件和模块的区别模块:侧重于功能或者数据的封装组件:包含了 template、style 和 script,而它的 script 可以由各种模块组成基础-单页应用(简称SPA)传统模式 每个页面及其内容都需要从服务器一次次请求 如果网络差, 体验则会感觉很慢SPA模式, **第一次**加载 会将所有的资源都请求到页面 **模块之间切换**不会再请求服务器SPA优点:用户体验好,因为前端操作几乎感受不到网络的延迟完全组件化开发 ,由于只有一个页面,所以原来属于一个原创 2022-04-14 09:36:40 · 75 阅读 · 0 评论 -
【Vue】组件的入门
基础-组件-组件体验场景: 重复的页面结构,数据,逻辑 都可以抽提成一个组件特点 简单 高效 不重复基础-组件-组件特点组件和实例相似之处: data/methods/computed/watch 等一应俱全注意:data和Vue实例的区别为组件中data为一个函数且需要返回一个对象组件没有el选项template 代表其**页面结构** (有且只要一个根元素)每个组件都是**独立**的 运行作用域、数据、逻辑没有任何关联基础-组件-全局组件全局和局部: 注册原创 2022-04-13 19:30:53 · 102 阅读 · 0 评论 -
【Vue】axios发送网络请求
在Vue中实现发送网络请求原理: Vue.js中发送网络请求本质还是ajax,我们可以使用插件方便操作。vue-resource: Vue.js的插件,已经不维护,不推荐使用axios :不是vue的插件,可以在任何地方使用,推荐说明: 既可以在浏览器端又可以在**node.js**中使用的发送http请求的库,支持Promise ,不支持jsonp如果遇到jsonp请求, 可以使用插件 jsonp 实现基础-axios-介绍-及基本使用用法:// 基本用法axios.get(原创 2022-04-13 16:23:56 · 821 阅读 · 0 评论 -
【Vue】进阶语法
基础-系统指令-v-bind基本用法作用: 绑定标签上的任何属性场景: 当标签上的属性是变量/动态/需要改变的用法:// ID为数据对象中的变量值 <p v-bind:id="ID"></p> // 简写<p :id="ID"></p> 基础-系统指令-v-bind绑定class(对象)用法: 绑定class对象语法 :class=“{ class名称: 布尔值}”<p class="obox" :class="{原创 2022-04-13 10:03:33 · 83 阅读 · 0 评论 -
【Vue】基础语法
Vue基础基础-了解什么是vue目前前端**必备**技能传统方式已经不能适应目前越来越**复杂**的开发需求用vue的开发方式会简单、高效三大框架(vue、react、angular)基础-vue 能做什么不用操作DOM单页面应用web项目(SinglePageApplication 项目,例如https://worktile.com/)简称:SPA传统网站开发 一般来说 需求不大当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程原创 2022-04-11 10:48:03 · 89 阅读 · 0 评论 -
【Js】JavaScript作用域
JavaScript作用域1. 什么是作用域作用域是代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的生命周期和可见性。变量在作用域之外是不可见的。JavaScript 的作用域包括:全局作用域模块作用域函数作用域块作用域词法作用域2. 全局作用域在任何函数、块或模块范围之外定义的变量具有全局作用域。具有全局作用域的变量可以在程序的任意位置访问。创建全局作用域,这里分两种情况来说:一种是在具有模块系统的情况原创 2022-04-08 08:56:18 · 163 阅读 · 0 评论 -
【布局】flex布局
flex布局01. flex的介绍对比:传统布局:兼容性好、布局繁琐、浮动(清除浮动)有局限性不能在移动端很好的布局flex布局:操作方便,布局极其简单,移动端使用比较广泛PC端浏览器支持情况比较差使用:如果是PC端页面布局,采用传统方式;如果是移动端或者是不考虑兼容的PC端则采用flex布局;特点:任何一个标签都可以指定使用 flex 布局。当为父标签设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属原创 2022-04-07 19:44:31 · 527 阅读 · 0 评论 -
【Js】JavaScript数据类型隐式转换
类型相同基本类型,直接比较值引用类型比较指针类型不同,尝试转成number类型,先调用valueOf()转成number不行就再用toString()方法转成stringnull、NaN、undefined单独一套规则。原创 2022-04-07 19:34:05 · 10706 阅读 · 3 评论 -
【Js】异步编程
异步编程Promise Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。基本用法:ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // resolve(value); 成功 // reject(er原创 2022-04-07 19:23:28 · 64 阅读 · 0 评论 -
【Js】数组(包括es6)方法大集合
文章目录数组方法(包括es6)1、arr.push()2、arr.pop()3、arr.shift()4、arr.unshift()5、arr.splice(i,n)6、arr.slice(start,end)7、arr.concat()8、arr.join()9、arr.sort()10、arr.reverse()11、arr.forEach(callback)12、arr.map(callback)13、arr.filter(callback)14、arr.every(callback)15、arr.s原创 2022-04-07 19:20:57 · 3145 阅读 · 3 评论 -
【布局】 Grid网格布局
Grid布局CSS Grid 网格布局介绍CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式,最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的排版成为可能,而且还可以使其变的干净利落可维护。基础知识和浏览器支持 截至2022年3月,大部分浏览器都提供了对 CSS Grid 的原生支持,而且无需加浏览器前缀:Chrome(包括 Android ),Firefox,Edge,Safari(包括iOS)和原创 2022-04-07 14:36:52 · 1671 阅读 · 0 评论 -
前端跨域解决方案
跨域解决方案1. 什么是跨域1.1 什么是同源策略?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKi42U2z-1649311382172)(img/ky.png)]1.2 同源策略限制内容有:Cookie、LocalStorage、IndexedDB原创 2022-04-07 14:04:45 · 75 阅读 · 0 评论 -
【Webpack】进阶
核心打包原理打包工作的主要流程如下:需要读到入口文件里的内容分析入口文件,递归的去读取模块所依赖的文件内容,生成AST语法树根据AST语法树,生成浏览器能够运行的最终代码具体细节:获取主模块内容分析模块内容安装@babel/parser包(转AST)对模块内容处理安装@babel/traverse包(遍历AST)安装@babel/core和@babel/preset-env包(Es6转Es5)递归所有模块生成最终代码手写loaderloader本质上就是一个原创 2022-04-07 13:55:59 · 758 阅读 · 0 评论 -
webpack打包错误:webpack-cli configuration.output has an unknown property
Webpack:webpack有一个插件,可以实现同时打包/(复制)index.html到达dist目录,并自动就引入所需要的.js文件,我们要做到的事情就是直接运行打包好的模板文件即可.问题描述明明没有报出语法错误却无法运行:在 webpack.config.js 中配置 html-webpack-plugin 插件const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path")原创 2022-04-05 20:41:10 · 1861 阅读 · 0 评论 -
【Webpack】入门基础资料
Webpack资料介绍 webpack是一个前端构建工具。 前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如,开发环境的代码,要通过混淆压缩后才能放在线上运行,这样代码体积更小,而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况:前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快原创 2022-04-06 19:01:18 · 94 阅读 · 0 评论 -
VsCode终端webpack命令无效
vscode终端webpack无效原创 2022-04-05 19:37:33 · 679 阅读 · 2 评论 -
npm常用命令
npm set registry https://registry.npm.taobao.org # 替换npm模块为淘宝镜像npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的node源码镜像npm cache clean --force # 清空缓存npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝镜像 之后就可以使用cnpm安装npm lis原创 2022-04-06 15:42:31 · 2600 阅读 · 3 评论 -
【Js】ES6模块化 Module使用
① 概述历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import。但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案:最主要的有 CommonJS 和 AMD 两种。前者用于服务器node.js,后者用原创 2022-04-07 14:00:10 · 1163 阅读 · 0 评论 -
【Js】JavaScript中的多维数组与对象
基本的数组结构一维数组var Province =new Array('江苏','浙江','安徽'); 或者var Province = ['江苏','浙江','安徽'];多维数组二维数组var Province=new Array();Province[0]=new Array();Province[0][0]="南京";Province[0][1]="苏州";Province[1]=new Array();Province[1][0]="杭州";Province[1][1]="转载 2022-03-21 19:53:55 · 569 阅读 · 0 评论