- 博客(133)
- 收藏
- 关注
原创 vue el-cascader组件change失效以及下拉框不消失的问题
vue el-cascader组件change失效以及下拉框不消失的问题
2023-12-15 18:02:56 1919
原创 shell脚本空格导致:NO such file or directory报错的解决方法
shell脚本空格导致:NO such file or directory报错的解决方法
2022-09-05 17:56:52 612
原创 Axios之取消请求源码分析
文章目录1.前言2.源码分析1.前言之前看到Axios的取消请求,不像其他的API那么直观好理解,有两种取消请求的方式,感觉很奇怪,所以决定去研究下源码,研究完之后才发现原来如此!2.源码分析首先第一种写法的代码:let Http = this.$http, CancelToken = Http.CancelToken, that = this; Http.post( "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd
2021-11-04 22:48:10 5985
原创 Vue全家桶系列之Axios(二)
文章目录1.前言2.Axios实例3.请求和响应拦截4.取消请求1.前言上篇文章介绍了Axios的一些基本知识,这篇文章来说下Axios的一些进阶内容!2.Axios实例可以使用自定义配置新建一个 axios 实例,可以在这个实例上创建一些公共配置(默认值),方便其他地方调用!let instance = this.$http.create({ baseURL: "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8a
2021-11-04 22:47:49 7843
原创 Vue全家桶系列之Axios(一)
文章目录1.前言2.项目引入2.语法1.前言Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,之所以前端流行是因为它可以用在浏览器和 node.js 中,axios在浏览器端使用XMLHttpRequest对象发送ajax请求,在node环境使用http对象发送ajax请求,并且符合现在前端MVVM的开发模式,react/vue 官方都推荐使用 它,可以说是前端必备的知识了!2.项目引入项目中安装npm install axios vue-axio
2021-11-04 22:47:24 5844
原创 Vue全家桶系列之Vuex(三)
文章目录1.前言2.模块的命名空间1.前言上篇文章介绍了Vuex的核心概念,这篇文章来说下Vuex的一些进阶内容!2.模块的命名空间如果把所有的状态都放在一个store对象里面,当应用变得非常复杂时,store 对象就有可能变得相当臃肿,维护起来也会变得相当复杂,所以我们可以用模块来划分,比如A module,B module,在项目中很有可能A module内部的 action、mutation 和 getter 可能和B module内部的 action、mutation 和 getter方法名
2021-10-24 17:11:34 11465
原创 Vue全家桶系列之Vuex(二)
文章目录1.前言2.Vuex如何使用3.Vuex 核心概念3.1 state1.前言上篇文章介绍了Vuex的概念和作用,相信大家对Vuex有了一定的了解,那么下面来介绍下Vuex如何使用!2.Vuex如何使用1. 安装vuex模块npm install vuex --save2. 作为插件使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)3. 定义容器let store = new Vuex.Store()4.
2021-10-24 17:10:57 11485
原创 Vue全家桶系列之Vuex(一)
文章目录1.前言2.Vuex是什么?3.什么是集中式状态管理模式?4.什么情况下使用Vuex?它能帮我们解决什么问题?5.简单的例子1.前言Vuex是一个很棒的状态管理库,它很简单并且非常好的与Vue集成,下面我们来开始学习Vuex!2.Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,状态分两种,一种是组件内部的状态,其实就是一个组件内使用的状态(data数据),另外一种是应用
2021-10-24 17:09:53 12830
原创 Vue全家桶系列之Vue-router(六)
文章目录1.前言1.前言上篇文章说了vue-router的路由命名视图,动态路由匹配,路由滚动行为,接下来再看看其他的用法
2021-09-26 09:52:54 9891 1
原创 Vue全家桶系列之Vue-router(五)
文章目录1.前言2.路由过渡效果3.编程式的导航1.前言上篇文章说了vue-router的路由命名视图,动态路由匹配,路由滚动行为,接下来再看看其他的用法2.路由过渡效果过渡效果类似css中的过滤,我们用的是transititon的封装组件来为路由添加过渡动画的,首先来看个图了解下有哪些过渡的css类名,Enter就是路由的进入,是从Opacity 0到1(淡入),Leave就是路由离开是从Opacity 1到0(淡出),v-enter-active,v-leave-active是活动的状态,可以被
2021-09-26 09:52:38 10356
原创 Vue全家桶系列之Vue-router(四)
文章目录1.前言2.路由命名视图3.路由滚动行为1.前言上篇文章说了vue-router的路由的重定向,路由嵌套,命名路由以及路由的别名的使用,接下来再看看其他的用法2.路由命名视图有时候想同时 (同级) 展示多个视图,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了,如果 router-view 没有设置名字,那么默认为 default。还是用之前的例子,在home路由上添加一个sidebar视图,先修改下路由配置!import
2021-09-26 09:52:22 4541
原创 Vue全家桶系列之Vue-router(三)
文章目录1.前言2.路由的重定向2.1字符串重定向(redirect后面接的是一个path字符串)2.2对象重定向(redirect后面接的是一个包含path的对象或者name的对象)2.3函数重定向(动态设置重定向目标)3.路由的别名1.前言上篇文章说了vue-router的基本使用,接下来看下其他的使用方法2.路由的重定向还是拿之前的例子,有3个页面(home,about,help)如果都没有匹配上,那怎么办?我可以让它重定向home页面,这里重定向有多种写法,还是修改router中inde
2021-09-26 09:52:04 4188 4
原创 Vue全家桶系列之Vue-router(二)
文章目录1.前言2.一个最简单的路由例子1.前言上篇文章说下下两种路由各自的原理及优缺点,那么这篇文章来开始真正的vue-router学习!文章目录1.前言2.一个最简单的路由例子2.一个最简单的路由例子我们用之前vue-cli脚手架创建的项目来做例子,可以利用vue单文件组件来开发!首先先来看下入口文件main.js,里面导入vue,App是个单文件组件,router 是和路由相关的代码!import Vue from 'vue'import App from './App' //imp
2021-09-26 09:51:51 4085
原创 Vue全家桶系列之Vue-router(一)
文章目录1.前言1.什么是单页面应用(SPA)2.单页面应用(SPA)优缺点?3.单页面应用(SPA)和vue-router关系?1.前言之前说了vue-cli系列,已经清楚了目录结构,还有webpack的配置,那么下面几篇文章我们来说下vue-router!1.什么是单页面应用(SPA)单页Web应用(single page web application)是一种特殊的Web应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的,因为是单页面只有一个页面的应用,所以一开始只需加载
2021-09-26 09:51:24 3962 3
原创 Vue全家桶系列之Vue-cli(三)
文章目录1.前言2.webpack配置1.前言上一篇文章对整个项目的目录结构进行了讲解,那么这篇文章我们来说下webpack配置相关的文件,webpack是当前最流行的构建工具,所以有必要对它进行了解!2.webpack配置我们先 npm run dev启动项目,再打开浏览器,F12来看下请求的文件,这里面请求了一个app.js文件,但是查看下index.html模版里面并没有这个文件!其实都是webpack的功能,它会把app.js文件自动的插入到index.html模版里面接下来我们主要来分
2021-08-31 00:24:37 4540 7
原创 Vue全家桶系列之Vue-cli(二)
文章目录1.前言2.项目目录结构1.前言上篇文章说了vue-cli安装和启动,并且说了下项目源码的目录结构,这篇文章我们来主要说下整个项目的目录结构!2.项目目录结构先来看下整个目录结构,看下图!build文件夹其实是一些webpack配置相关的,里面的js文章下篇文章我会详细讲解!config其实是生产环境和开发环境的一些配置参数!node_modules是安装的第三方依赖!src是我们做项目的时候写的源码,里面有个vue结尾的是单文件组件,这个目录下的文件会被webpack进行进
2021-08-31 00:24:05 3079 2
原创 Vue全家桶系列之Vue-cli(一)
文章目录1.前言2.什么是vue-cli?它有什么作用?3.vue-cli安装和启动?4.项目目录结构分析1.前言我们学习一个新的东西,我们要问自己,这个东西是什么?它有什么用?什么时候用?怎么样用?在哪个地方用?谁用?为什么要用这个?能解决什么问题,我们经常用的5个W1H(What,When,How,Where,Who,Why),我们应该带着这些疑问去学习!你将事半功倍!2.什么是vue-cli?它有什么作用?vue-cli是vue提供的一个脚手架工具,什么是脚手架?现实生活种,人工建筑房子,在工
2021-08-31 00:23:38 4532 1
原创 零基础手把手教你学会Webpack(二)
文章目录1.前言2.webpack-dev-server3.什么是loader?3.引入loader1.前言上篇文章讲了webpack入口,出口,以及一些最简单的应用,你可能会发现,单纯使用Webpack以及它的命令行工具来进行开发调试的效率并不高。以往只要编辑项目源文件(JS、CSS、HTML等),刷新页面即可看到效果。现在多了一步打包,我们在改完项目源码后要执行npm run build更新bundle.js,然后才能刷新页面生效。有没有更简便的方法呢?2.webpack-dev-server
2021-06-25 11:55:43 7748 101
原创 零基础手把手教你学会Webpack(一)
文章目录1.前言2.Webpack是什么?有什么用?3.为什么选择Webpack?webpack的优势在哪?3. 如何安装 webpack?4. entry,chunk,bundle是什么?4.1 entry4.2 chunk4.3 bundle5.资源入口6. webpack入门应用6. path的join和resolve区别6.1 path.join6.2 path.resolve1.前言上一篇文章说了一篇文章带你玩转前端所有模块化,有了模块化,那么肯定需要模块化打包工具,那么从这一篇文章开始,我将
2021-06-19 16:44:32 8242 124
原创 一篇文章带你玩转前端所有模块化
文章目录1.前言2.nomorl加载1.前言我们都知道加载html文档顺序是从上到下的,当碰到js脚本的话,会严重阻塞Dom元素的解析,所以一般我们都要js脚本放到尾部,这样做的目的是让Dom元素更早的解析,为用户的更好体验,而在解析完一部分的同时也会显示一部分内容在页面上!那么我们常用的有哪些加载脚本的方式?下面我们一个一个来讨论下!2.nomorl加载正常情况下,js脚本是同步下载的!<script type="text/javascript" src="./test1.js" >
2021-06-15 10:36:23 6529 120
原创 搞清楚Node.js模块exports和module.exports区别,一篇文章足够了!
文章目录1.前言2.例子3.exports和module.exports的区别4.exports,module.exports分别什么时候用?1.前言说到模块化,我们会想到es6的模块化,或者node.js环境下commonJs规范的模块化,其他他们两者是不同的,我们今天来说下commonJs规范的模块化的exports和module.exports的区别导出!2.例子先看个简单的例子!let a = 10;let b = a;b = 20;console.log(a);//10conso
2021-05-27 20:21:37 6313 32
原创 设计模式之----匹配器处理器模式(Matcher-Handler)的理解
文章目录1.前言2.概念3.应用场景4.模式结构5.案例实现6.总结:1.前言之前文章讲过策略模式,不懂的可以点击策略模式,今天再来说个策略模式的升级版(matcher-handler),Matcher-Handler模式也是属于略模式的一种,只不过它是处理比较复杂逻辑的,同时可以处理多种情况,并且它是在运行时决定的一种策略模式!2.概念Matcher-Handler模式:用一种松耦合的方式将原始数据分发传递给一个或多个数据处理器。这个模式显式地将数据鉴别匹配(Match)的责任从数据处理(Hand
2021-05-24 20:01:44 6861 29
原创 TypeScript装饰器原理分析
文章目录1.前言2.装饰器原理2.1 类装饰器2.2 属性饰器2.3 方法装饰器(访问器set.get也属于方法)2.4 参数装饰器3.装饰器执行顺序1.前言TypeScript装饰器装饰器是一种特殊类型的声明,它能够被附加到类声明,属性, 访问符,方法或方法参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。2.装饰器原理2.1 类装饰器参数:1. 对于静态成员来说是类的构造函数,对于实例成员是类的原
2021-05-22 17:00:39 1790 24
原创 设计模式之----装饰者模式(decorator-Pattern)的理解
文章目录1.前言2.概念3.作用4.模式结构5.案例实现1.前言现实生活中,当过圣诞节的时候(老外的节日),但是我们有些人崇洋媚外,也会把圣诞节当成一个节日来过,说到圣诞节,肯定有圣诞树了,圣诞树其实只是一颗而已,只不过在树上装饰了一些了铃铛、蝴蝶结、小玩偶、袜子、彩灯、礼物、纸花、树顶星、雪花片、糖果杖、金丝线/银丝线、圣诞圈(请原谅我百度搜索的),就变成了圣诞树,但是他其实本质还是一颗普通的树,还有就是房子装修啊、相片加相框等,都是装饰器模式。2.概念装饰器模式(decorator-Patte
2021-05-15 16:59:56 2738 9
原创 input on-change事件触发失效和重复上传相同文件失效bug
问题1: 在使用angularJs情况下, 使用input标签 配合 ng-change 无效,为什么原生的 input的onchange事件有效?问题2: 使用input标签 文件上传svg之后,然后再上传用同一个svg文件,没有任何反应?问题1:原因:首先 ng-change事件要与ng-model绑定,但是在input type类型为file的时候ng-change是无效,所以我们可以这样写<input type="file" class="inputBtn" accept="image
2021-05-14 16:27:29 3930 1
原创 让你彻底明白什么是高内聚、低耦合?
文章目录1.前言2.什么是高内聚?3.什么是低耦合?4.总结1.前言相信平时在开发中(代码重构,或者软件设计过程中),经常会听到要遵循高内聚,低耦合的原则,那么什么时候高内聚,低耦合呢?2.什么是高内聚?我们常说的高内聚,一般都是功能内聚,高内聚是指一个软件模块是由相关性很强的代码组成,只负责一项任务,也就是常说的单一责任原则。模块的内聚反映模块内部联系的紧密程度。一个模块只需做好一件事件,不要过分关心其他任务。高内聚性的好处是可以提高程序的可靠性。这个是官方的定义,下面是我的理解:高内聚就是一个
2021-05-08 10:19:52 13425 10
原创 设计模式之----依赖倒置(Dependency inversion principle)的理解
文章目录1.前言2.概念2.1 什么是依赖?2.2 什么是上层模块和下层模块?2.3 什么是抽象和细节?3.作用4.实现方法5.实例1.前言依赖倒置是面向对象设计领域的一种软件设计原则。 有人会有疑惑,设计原则有什么用呢?设计原则是前辈们总结出来的经验,你可以把它们看作是内功心法。只要你在平常开发中按照设计原则进行编码,假以时日,你编程的功力将会大增。2.概念依赖倒置原则的原始定义为:上层模块不应该依赖下层模块,两者都应该依赖其抽象;抽象不应该依赖细节,细节应该依赖抽象,其核心思想是
2021-04-30 20:05:53 5720 3
原创 设计模式之----状态模式(State-pattern)的理解
文章目录1.前言3.模式的结构和实现3.1 模式的结构3.2模式的实现1.前言在现实生活中,人都有高兴和伤心的时候,不同的时候有不同的行为,有状态的对象编程中高兴,伤心可以看成一种状态,传统的解决方案是:人的不同时候的行为都要考虑到的话,然后使用 if-else 或 switch-case 语句来做状态判断,再进行不同情况的处理。这样代码会会过于臃肿,可读性差,且不具备扩展性,维护难度也大。且增加新的状态时要添加新的 if-else 语句,这违背了“开闭原则”,不利于程序的扩展。### 2.概念状
2021-04-22 16:25:57 2995 1
原创 设计模式之----开闭原则(Open closed principle OCP)的理解
文章目录1.前言2.概念3.作用4.实现方法3.实例1.前言在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据原则来开发程序,从而提高软件开发效率、节约软件开发成本和维护成本。首先介绍下什么是开闭原则?2.概念开闭原则(Open closed principle,OCP)由勃兰特·梅耶(Bertrand Meyer)提出,软件实体应当对扩展开放,对修改关闭(Software entities should be open for extension,bu
2021-04-16 09:59:19 2772 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人