- 博客(133)
- 收藏
- 关注
RSS订阅原创 vue el-cascader组件change失效以及下拉框不消失的问题
vue el-cascader组件change失效以及下拉框不消失的问题
2023-12-15 18:02:56
1067
原创 shell脚本空格导致：NO such file or directory报错的解决方法
shell脚本空格导致：NO such file or directory报错的解决方法
2022-09-05 17:56:52
537
原创 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
5927
原创 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
7769
原创 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
5813
原创 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
11326
原创 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
11448
原创 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
12770
原创 Vue全家桶系列之Vue-router(六)
文章目录1.前言1.前言上篇文章说了vue-router的路由命名视图，动态路由匹配，路由滚动行为，接下来再看看其他的用法
2021-09-26 09:52:54
9833
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
10250
原创 Vue全家桶系列之Vue-router(四)
文章目录1.前言2.路由命名视图3.路由滚动行为1.前言上篇文章说了vue-router的路由的重定向，路由嵌套，命名路由以及路由的别名的使用，接下来再看看其他的用法2.路由命名视图有时候想同时 (同级) 展示多个视图，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了，如果 router-view 没有设置名字，那么默认为 default。还是用之前的例子，在home路由上添加一个sidebar视图，先修改下路由配置！import
2021-09-26 09:52:22
4446
原创 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
4148
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
4062
原创 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
3943
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
4492
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
3056
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
4469
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
7696
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
8172
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
6489
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
6253
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
6515
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
1628
24
原创 设计模式之----装饰者模式（decorator-Pattern）的理解
文章目录1.前言2.概念3.作用4.模式结构5.案例实现1.前言现实生活中，当过圣诞节的时候（老外的节日），但是我们有些人崇洋媚外，也会把圣诞节当成一个节日来过，说到圣诞节，肯定有圣诞树了，圣诞树其实只是一颗而已，只不过在树上装饰了一些了铃铛、蝴蝶结、小玩偶、袜子、彩灯、礼物、纸花、树顶星、雪花片、糖果杖、金丝线/银丝线、圣诞圈（请原谅我百度搜索的），就变成了圣诞树，但是他其实本质还是一颗普通的树，还有就是房子装修啊、相片加相框等，都是装饰器模式。2.概念装饰器模式（decorator-Patte
2021-05-15 16:59:56
2640
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
3844
1
原创 让你彻底明白什么是高内聚、低耦合？
文章目录1.前言2.什么是高内聚？3.什么是低耦合？4.总结1.前言相信平时在开发中（代码重构，或者软件设计过程中），经常会听到要遵循高内聚，低耦合的原则，那么什么时候高内聚，低耦合呢？2.什么是高内聚？我们常说的高内聚，一般都是功能内聚，高内聚是指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。模块的内聚反映模块内部联系的紧密程度。一个模块只需做好一件事件，不要过分关心其他任务。高内聚性的好处是可以提高程序的可靠性。这个是官方的定义，下面是我的理解：高内聚就是一个
2021-05-08 10:19:52
12456
9
原创 设计模式之----依赖倒置（Dependency inversion principle）的理解
文章目录1.前言2.概念2.1 什么是依赖？2.2 什么是上层模块和下层模块？2.3 什么是抽象和细节？3.作用4.实现方法5.实例1.前言依赖倒置是面向对象设计领域的一种软件设计原则。 有人会有疑惑，设计原则有什么用呢？设计原则是前辈们总结出来的经验，你可以把它们看作是内功心法。只要你在平常开发中按照设计原则进行编码，假以时日，你编程的功力将会大增。2.概念依赖倒置原则的原始定义为：上层模块不应该依赖下层模块，两者都应该依赖其抽象；抽象不应该依赖细节，细节应该依赖抽象，其核心思想是
2021-04-30 20:05:53
5174
3
原创 设计模式之----状态模式（State-pattern）的理解
文章目录1.前言3.模式的结构和实现3.1 模式的结构3.2模式的实现1.前言在现实生活中，人都有高兴和伤心的时候，不同的时候有不同的行为，有状态的对象编程中高兴，伤心可以看成一种状态，传统的解决方案是：人的不同时候的行为都要考虑到的话，然后使用 if-else 或 switch-case 语句来做状态判断，再进行不同情况的处理。这样代码会会过于臃肿，可读性差，且不具备扩展性，维护难度也大。且增加新的状态时要添加新的 if-else 语句，这违背了“开闭原则”，不利于程序的扩展。### 2.概念状
2021-04-22 16:25:57
2936
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
2725
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人