![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 84
我是肿肿哦~~
专注于学技术的肿肿~~~
展开
-
手摸手教你写一个vue的toast弹窗
前言:我们在项目开发的过程中,也许会在很多页面实现弹窗的消息,普通的方法就是在这每个界面写些原生js代码来控制弹窗效果,这样明显非常冗余。可通过引入组件的方式,可解决部分冗余的代码,但是每个要使用的界面都必须导入、注册、使用,这些代码还是比较冗余。通过插件的方式封装Toast,可解决每个页面重复导入、注册、使用的重复过程。一. 封装Toast组件css自行设计二. Toast插件方式的封装在使用Toast前需要做相应的准备工作:添加一个index.js文件- 里面定义一个对象- 然后导原创 2021-02-24 19:37:20 · 939 阅读 · 3 评论 -
vue的学习笔记(17)之网络请求axios
网络请求axios一、网络请求模块的选择1、常见的网络请求模块,以及优缺点对比。2、JSONP的原理和封装3、为什么选择axios?4、axiox请求方式二、axios框架的基本使用三、axios发送并发请求四、axios的配置信息五、axios的实例和模块封装1、axios实例2、axios的封装六、axios的拦截器的使用1、如何使用拦截器?2、拦截器中都做什么呢?一、网络请求模块的选择1、常见的网络请求模块,以及优缺点对比。Vue中发送网络请求有非常多的方式, 那么, 在开发中, 如何选择呢?原创 2021-02-07 18:04:55 · 261 阅读 · 0 评论 -
vue的学习笔记(16)之vuex详解
vuex详解一、认识vuex1、vuex是什么2、管理什么状态3、单页面的状态管理4、多页面状态管理5、vuex状态管理图例二、vuex基本使用三、vuex核心概念1、State单一状态树2、Getters3、Mutation状态更新4、Mutation传递参数5、Mutation提交风格6、Mutation响应规则7、Mutation常量类型8、Mutation同步函数9、Action10、Modules四、项目结构组织一、认识vuex1、vuex是什么官方解释:Vuex 是一个专为 Vue.js原创 2021-02-05 19:21:12 · 471 阅读 · 0 评论 -
vue的学习笔记(15)之Promise知识讲解
Promise一、认识promise1、什么是Promise呢?2、网络请求的回调地狱二、Promise的基本使用1、定时器的异步事件2、Promise三种状态三、promise的链式调用四、promise的all方法的使用一、认识promisePromise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。1、什么是Promise呢?(1)ES6中一个非常重要和好用的特性就是Promise。(2)Promise是做什么的呢?答:Promise是异步编程的一种解决方案。(3)什么时候原创 2021-02-04 09:58:27 · 2091 阅读 · 0 评论 -
vue的学习笔记(14)之Tabbar案例
Tabbar案例1、TabBar实现思路2、tabbar-实现流程1、TabBar实现思路(1)如果在下方有一个单独的TabBar组件,如何封装?自定义TabBar组件,在APP中使用让TabBar出于底部,并且设置相关的样式(2)TabBar中显示的内容由外界决定定义插槽flex布局平分TabBar(3) 自定义TabBarItem,可以传入 图片和文字定义TabBarItem,并且定义两个插槽:图片、文字。给两个插槽外层包装div,用于设置样式。填充插槽,实现底部TabB原创 2021-02-03 13:48:47 · 837 阅读 · 0 评论 -
vue的学习笔记(13)之vue-router详解
vue-router(上)1、内容概述2、认识路由(1)路由是什么(2)后端路由阶段(2)前后端路由阶段1、内容概述认识路由vue-router基本使用vue-router嵌套路由vue-router参数传递vue-router导航守卫keep-alive2、认识路由(1)路由是什么路由是一个计算机网络里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。路由器提供了两种机制: 路由和转送。路由是决定数据包从来源到目的地址的路径。转送将输入端原创 2021-02-02 00:47:24 · 378 阅读 · 1 评论 -
vue的学习笔记(12)之箭头函数
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this1、箭头函数的使用定义函数有三种方式:<script>//箭头函数:也是一种定义函数的方式//1.定义函数的方式:functionconst aaa=function () {}//2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } }//3.es6中的箭头函数// const ddd=(参原创 2021-02-02 00:32:21 · 6219 阅读 · 0 评论 -
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home
在使用keep-alive保留组件缓存,实现页面切换依旧能回到上一次浏览的状态的过程中控制台报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home/news”.错误解决办法:...原创 2021-02-01 16:17:42 · 717 阅读 · 0 评论 -
vue的学习笔记(11)之vue cli详解
Vue CLI详解1、Vue CLI(1) 什么是Vue CLI(2) Vue CLI使用前提 - Node(3) Vue CLI使用前提 - Webpack(4) Vue CLI的使用2、Vue CLI2(1) 目录结构详解(2) Runtime-Compiler和Runtime-only的区别(3) render函数的使用(4) npm run buil过程(5) npm run dev过程(6) 修改配置:webpack.base.conf.js起别名3、Vue CLI3(1) 认识Vue CLI3(原创 2021-01-30 08:33:39 · 493 阅读 · 0 评论 -
vue学习笔记(10)之webpack下
webpack(下)1、loader的使用(1) 什么是loader?(2) css文件处理(3) less文件处理(4) 图片文件处理2、babel的使用3、webpack配置vue(1) 引入vue.js(2) el和template区别4、plugin的使用(1) 认识plugin(2) 添加版权的Plugin(3) 打包html的plugin(4) js压缩的Plugin5、搭建本地服务器7、webpack配置文件的抽离1、loader的使用(1) 什么是loader?loader是webpa原创 2021-01-30 00:29:38 · 157 阅读 · 0 评论 -
vue学习笔记(9)之webpack上
Webpack(上)1、什么是webpack?2、前端模块化3、webpack安装4、webpack起步5、js文件的打包6、webpack的配置(1) 入口和出口(2) webpack的局部安装(3) package.json中定义启动1、什么是webpack?官方的解释:At its core, webpack is a static module bundler for modern JavaScript applications.翻译:从本质上来讲,webpack是一个现代的JavaScri原创 2021-01-26 17:48:27 · 136 阅读 · 0 评论 -
vue的学习笔记(8)之前端模块化
1、为什么需要模块化## (1) JS的原始功能在网页开发的早期,js是作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是直接将代码写在script标签中的。但随着ajax异步请求的出现,慢慢形成了前后端的分离。客户端需要完成的事情越来越多,代码量也是与日俱增。为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一些灾难性的问题。比如全局变量同名问题,另外,这种代码的编写方式对js文件的==依赖顺序==几乎原创 2021-01-26 16:09:19 · 174 阅读 · 0 评论 -
使用 webpack 打包vue项目时,图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因
当使用webpack对图片进行打包时,发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候,有一个limit属性,图片实际的大小大于limit指定的大小,因此会去使用file-loader,但项目里面没有这个包,要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。错误:因此解决的办法有:方法一:如果没有报错,但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进原创 2021-01-26 16:04:56 · 2015 阅读 · 1 评论 -
vue的学习笔记(7)之组件化开发下
组件化开发(下)组件化高级(1) 插槽slot(2)如何封装这类组件呢?slot(3)如何使用slot?(4) 具名插槽slot(5) 编译作用域(6) 作用域插槽a、作用域插槽b、作用域插槽新语法c、独占默认插槽的缩写语法d、 解构插槽Prop(7)动态插槽(8) 其他组件化高级(1) 插槽slotslot翻译为插槽:在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等原创 2021-01-26 11:28:02 · 200 阅读 · 0 评论 -
UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function
在Vue 项目中,使用了.less文件,那么就要安装less,less-loader。在安装完成后,使用npm run build去打包项目时,报如下错误:报该错误的原因是,通过npm install less less-loader --save-dev安装的是最高的版本,因此只要在控制台里面输入npm install less-loader@4.1.0 -s覆盖之前安装的版本(我这里是使用webStorm)。安装完毕后,在执行npm run build便可成功执行,显示结果。...原创 2021-01-26 11:19:44 · 189 阅读 · 0 评论 -
vue的学习笔记(6)之组件化开发中
组件化开发(中)1、父子组件的通信2、父级向子级传送(1) props的基本用法(2) props的数据验证3、子级向父级传送4、父子组件的访问(1) 父子组件的访问方式: $children(2) 父子组件的访问方式: $refs(3) 父子组件的访问方式: $parent(4) 非父子组件通信1、父子组件的通信在前面的学习中,我们提到了子组件是不能引用父组件或者Vue实例的数据的。但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据原创 2021-01-25 15:43:13 · 185 阅读 · 0 评论 -
vue的学习笔记(5)之组件化开发上
组件化开发(上)1、什么是组件化?2、注册组件的基本步骤(1) 组件的使用分成三个步骤:(2) 注册组件步骤解析3、 全局组件和局部组件4、 父组件和子组件5、注册组件的语法糖6、模板的分离写法7、 组件数据的存放(1)为什么是一个函数呢?1、什么是组件化?如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果,我们将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。组件化的原创 2021-01-20 17:00:39 · 191 阅读 · 0 评论 -
vue学习笔记(1)之初识vue
Day1-初识vue1、什么是vue?官方解释自我认识2、vue的安装3、vue中的MVVM什么是MVVM?(1)MVVM的定义?(2)计数器的MVVM4、创建Vue实例传入的options5、Vue的生命周期生命周期钩子生命周期图示1、什么是vue?官方解释Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的原创 2021-01-10 13:12:39 · 409 阅读 · 0 评论 -
vue学习笔记(2)之基础语法上
vue的一些基本语法(上):插值语法、动态绑定、计算属性、事件监听。原创 2021-01-12 20:15:51 · 221 阅读 · 0 评论 -
vue学习笔记(3)之基础语法下
vue的基本语法(下)1、条件判断(1)v-if(2)v-if和v-else嵌套使用(3)v-if和v-else-if和v-else的嵌套使用(4)用个案例理解一下(5)v-show2、循环遍历(1) v-for遍历数组(2)v-for遍历对象(3) 组件的key属性(4) vue中检测数组更新3、案例1、条件判断v-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件(1原创 2021-01-12 20:28:38 · 427 阅读 · 0 评论 -
vue学习笔记(4)之基础语法补充
vue的基本语法补充1、v-model双向绑定input(1) v-model原理2、v-model双向绑定radio3、v-model绑定CheckBox4、v-model绑定select5、值绑定6、修饰符前面我们学的是在HTML标签中使用mustache语法实现数据的动态显示,利用vue的v-bind语法实现属性的动态绑定,通过v-on实现与用户的动态交互等等。其实,表单控件在前端的实际开发中也是非常常见的。特别是对于用户信息的提交来说,需要用到大量的表单元素。疑问:在vue中是通过什么来实现对表原创 2021-01-20 16:37:46 · 195 阅读 · 1 评论