- 博客(29)
- 收藏
- 关注
RSS订阅原创 Vue中Axios封装API接口的思路及方法
一.aixos的封装1.我们为什么要去封装axios？在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也.
2021-06-03 19:37:04
363
原创 多环境变量
我们在开发的时候 通常需要去操作三个服务器去确保我们开发的质量，开发环境为一个服务器。测试一个服务器，上线时又需要一个服务器。 多环境变量问题就是为了解决这个问题的。首先w'm...
2021-06-03 10:44:31
182
原创 transition
transition的属性及值transition-property:指定应用过度属性的名称 默认值为all 表示所有可被动画的属性都表现出过度动画 可指定多个property； none：没有过度动画；all：所有可被动画的属性都表现出过度动画； IDENT：属性名称（可以指定多个）transition-duration:属性以秒或毫秒为单位指定过度动画所需的时间。 默认值为0s，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如
2021-06-01 20:29:31
235
原创 KEEP-ALIVE
1.概念keep-alive是vue内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。2.应用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性3.生命周期函数被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated1. ac
2021-06-01 20:26:16
121
原创 闭包的理解
什么是闭包要理解闭包就要去理解变量的作用域，在JS中存在两种变量的作用域，一种是全局变量，一种是局部变量。两种变量的区别就是函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。那什么是闭包呢？闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。闭包的特点1、让外部访问函数内部变量成为可能2、局部变量会常驻在内存中3、可以避免使用
2021-06-01 08:03:35
147
原创 作用域的理解
全局作用域最外层的作用域叫做全局作用域。函数作用域js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套。块级作用域es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）。...
2021-05-30 21:28:01
358
原创 LET CONST VAR 的区别
1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。...
2021-05-30 21:24:42
73
原创 this指向
在面试中常常会问到this指向的问题 牢记！在全局中的this指向我们的全局windows；、在函数中(普通函数)，this永远指向调用他的那个对象3、在箭头函数中，箭头函数中没有this，使用的this就是箭头函数父级的this。4、在构造函数中，this指向刚new构造出来的实例。...
2021-05-28 07:53:52
75
原创 argument是什么
1、argument特点arguments只在函数中存在。(箭头函数除外) arguments是一个伪数组。 是一个集合，存储了我们传入的所有形参。 arguments具有length，可以通过下标访问。2、arguments方法1、arguments.callee()方法这个方法可以调用方法本身补充：伪数组调用数组的方法1、转换为真正的数组使用展开运算符function fn (){let arr = [...arguments];// arr 就是一个数.
2021-05-26 18:57:08
1556
原创 ES6数组方法
.数组去重 var arr = [1,2,3,4,3,4]; var arr2 = [...new Set(arr)];12这个时候arr2就是去重后的数组~2. 交换两个变量的值 let [x,y] = [1,2]; [y,x] = [x,y]; console.log(y);1233.获取字符串中的某个字符 let arr= "hellomybo"; console.log(arr[3]);124.使用箭头函数代替回...
2021-05-26 18:55:18
128
原创 ES5
es5中常用方法1，indexOf()：该方法从数组的开头开始向后查找,查到返回下标,查不到返回-1。从前往后遍历，返回item在数组中的索引位，如果没有返回-1；通常用来判断数组中有没有某个元素。可以接收两个参数，第一个参数是要查找的项，第二个参数是查找起点位置的索引。2，lastIndexOf()该方法从数组的末尾开始向前查找,查到返回下标,查不到返回-1。与indexOf一样，区别是从后往前找。3，forEach()该方法对数组中的每一项运行给定函数。没有返回值。其实就...
2021-05-26 18:52:18
82
原创 ES4-6的数组方法总结
由于我们的EX系列的不断更新优化，出现了越来越多的数组方法去方便我们的便捷性以及操作性，使原本复杂的逻辑只需一个单词即可实现，方便拉我们程序⚪的逻辑进行js中数组常用的方法：es4中常用方法1，sort()数组排序可以没有参数使用：将数组中所有的元素都看作字符型数据来进行排序。var num=[10,5,4,0,29,91,52,73,1];console.log(num);num.sort(function(a,b){ return a-b; }) //将num数组的元素按照数值关...
2021-05-26 18:50:12
99
原创 ES4-ES6的数组方法
es4中常用方法1，sort()数组排序可以没有参数使用：将数组中所有的元素都看作字符型数据来进行排序。var num=[10,5,4,0,29,91,52,73,1];console.log(num);num.sort(function(a,b){ return a-b; }) //将num数组的元素按照数值关系升序排列console.log(num); //[0,1,4,5,10,29,52,73,91];2，reverse()数组翻转。var x=[10,20,30,...
2021-05-26 18:44:36
137
原创 数据类型
一、数据类型JS分两种数据类型：基本数据类型：**Number、String、Boolean、Null、 Undefined、Symbol（ES6），**这些类型可以直接操作保存在变量中的实际值。引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）1、基本数据类型（六种）存放在栈中基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问2、引用数...
2021-05-25 08:18:57
130
原创 常用数据类型判断的方法
第一种、typeof语法:let str = ""console.log(typeof str);判断一个变量是什么类型的。注意：尽量用来判断简单数据类型，除了null，null判断出来是object，判断object和array都会返回objectArray.isArray(obj)判断一个变量是否是数组。如果是数组，返回true。否则返回false语法：Array.inArray(变量)第二种、instanceof语法:var c= [1,2,3];conso..
2021-05-25 07:56:30
210
原创 深拷贝的实现
<script> [{}, [], true] // 定义一个深拷贝函数 接收目标target参数 function deepClone(target) { // 定义一个变量 let result; // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object') { // 如果...
2021-05-23 21:39:04
118
原创 vuerouter的使用
1、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路
2021-05-23 19:26:35
251
原创 关于VUEX的理解
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档关于我对VUEX的理解 前言 一、vuex是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言如今的VUE在国内已经走向主流，想要精通VUE我们必须要掌握VUEX这个可以帮助我们更好的去开发VUE项目的工具。一、VUEX是什么？vuex...
2021-05-23 19:03:18
209
原创 vue的生命周期函数 整理
我们每个vue文件，都可以看作成一个实例，从加载到毁灭的过程就叫做生命周期函数。我们vue的生命周期大致有8个实例创建前/后、组件挂载前/后、视图更新前/后、实例销毁前/后。一、实例创建之前/实例创建之后1、beforeCreate()我们vue实例创建之前执行的函数。这个时候只有一些实例本身的事件和生命周期函数2、created()vue实例创建之后执行的函数。是最早能使用data中数据和methods中方法的钩子函数。我们可以在这个钩子中请求数据。二、实..
2021-05-21 07:48:05
178
原创 组件的传参！面试必问！
组件通信:我们在写组件时，不可避免的需要用到传参。我在这里说明一下我们一般用到最多的2中传参。父传子1、父传子在父组件中的子组件标签上绑定一个自定义属性，这个自定义属性的值就是我们要传递的参数。<heads :data="list" />// 比如这是我们注册好的子组件标签<script> export default { data(){ return { list:["数据1",...
2021-05-20 19:50:27
116
原创 小程序黑马优购商城项目讲解
小程序优购商城项目讲解在我们开始之前 我们需要配好该项目所需要的接口文档以及配好相应的页面，以免在开发过程中会出现遗漏的问题出现。首先我们要知道优购是分为4部分的 分别为首页/列表/购物车/我的。要实现这四部分的切换的话，我们需要一个的TAB栏想要实现这一功能我们需要在全局app.json中写入tabBar来实现： 代码如下：就可以实现切换的效果拉首页：然后就要开始去写我们的页面拉推荐先写首页拉首先就是要封装头部组件...
2021-05-18 07:57:15
4673
2
原创 小程序的支付流程代码
我们可以拿到TOKEN值去实现支付的效果async add() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/auth/auth' }); return; } //...
2021-05-16 19:10:33
141
原创 小程序授权登陆流程
小程序授权登陆流程授权登陆的流程我们可以在wx小程序文档中找到BUTTON的open-type属性，通过里面的“getUserInfo"属性来调用点击事件bindgetuserinfo这个方法wxml:<button plain open-type="getUserInfo" bindgetuserinfo="hand">登录</button>然后我们通过在点击事件中传入一个事件对象e 从中找到我们所需要的数据，并将其放入到我们的本地缓存中js:hand
2021-05-14 11:29:41
88
原创 小程序如何写收藏、分享、客服功能
小程序如何写收藏、分享、客服功能大家在写小程序的时候一定要多看小程序的api 对我们小白来有很大的用处的！！！给大家分享一下小程序中的收藏，分享，客服的写法把。1.收藏收藏的逻辑其实和添加购物车是很相似的，只是它不需要我们去添加数量以及复选框的状态。我们只需要传入一个判断收藏按钮是否有被选中即可。代码如下：wxml:<view class="sc">//通过三元表达式来判断icon的正确显示<view class="iconfont {{collect
2021-05-14 11:22:04
90
原创 小程序获取收货地址流程
小程序获取收货地址流程//在wxml中给一个点击事件get(){//在小程序的api中我们可以找到响应的获取收获地址的方法；wx.getSetting({//成功时我们可以通过log res查看到期中的authSetting; 里面就包含了我们所欲要的数据； success(res){ console.log(res); if(res.authSetting){//我们可以看到我们所需要的数据是在期中的，所以我们通过let一个变量用来存放我们所需要的数据；
2021-05-13 19:43:33
346
原创 小程序中的下拉刷新以及上来加载更多的实现
在写小程序的过程中，一个页面渲染出来的数据过多的时候可能会影响到性能的问题，这时候我们就需要用到下拉刷新这类的操作了代码如下：举例： /** * 页面的初始数据 */ data: { box: [], totalPages: 1, },//通常来说，再写下拉刷新时，接口中都需要我们传入响应响应的cid，pagenum，pagesize,来确定是那条对应的数据，对应的页数以及对应的每页中可接受的数量。 QueryParams: { quer
2021-05-13 19:32:40
164
原创 如何使用Promise来封装wx.request
##如何使用Promise来封装wx.request在根目录中创建一个http文件,在里面依次添加api.js,fetch.js以及http.js代码如下：举例：fetch.js:/fetch.jsmodule.exports=(url,data,method)=>{ wx.showLoading() let p=new Promise((resolve,reject)=>{ wx.request({ url: url, dat.
2021-05-13 19:16:58
153
原创 promise的用法与解释
49@TOCPromisePromise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型：Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字
2021-05-07 19:51:43
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人