- 博客(38)
- 收藏
- 关注
RSS订阅原创 修改ElementUI样式的几种方式
修改ElementUI样式的几种方式在我们写项目的过程中，有的elementui的默认样式和项目中的样式不符合，所有我们需要强制行的修改，这时候就需要找几种修改ElementUI的方法了。1）.使用 /deep/ 深度修改标签样式找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。// 修改级联选择框的默认宽度/deep/ .el-cascader { width: 100%;
2021-06-11 07:53:24
6245
原创 vue中的nginx的安装及应用
vue中的nginx的安装及应用首先我们先下载nginx下载地址：http://nginx.org/en/download.html下载完之后，进行解压，解压后就会得到相应的目录文件在控制台cmd中切换到此目录下，用start nginx启动nignx，然后就在页面中输入localhost，出现如下网页就说明安装成功，默认监听为8080端口号4、nginx命令介绍（1）start nginx 开启nginx服务（2）nginx.exe -s stop 关闭nginx服务，快速停止ngi
2021-06-07 10:48:34
527
原创 面试中的vue-router 鉴权 守卫
vue-router 鉴权 守卫路由守卫分为三种，分别是1.全局路由守卫2.组件内部守卫3.路由独享守卫全局路由守卫所有模板都可以守卫到to是去那个页面from是从那个页面来next是否进入这个页面/下一步router.beforeEach((to,from,next)=>{ console.log(to); console.log(from); console.log(next()); next()})//全局鉴权router.beforeEa
2021-06-06 19:15:39
261
原创 webpack打包优化
webpack打包优化1）我们先在我们的代码文件的根目录里创建一个config.js的文件在这个文件中我们可以配置proxy以及配置别名①proxy的配置proxy的配置可以解决项目中所存在的跨域问题module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 ove
2021-06-06 18:58:17
221
2
原创 面试中必须要知道的vant-ui的按需引入
vant-ui的按需引入1）我们需要先下载vantnpm i vant -S2）引入组件babel-plugin-import是有趣的 babel 插件，它会在编译过程中将写法自动转换为导入引入的方式。需要我们进行安装插件npm i babel-plugin-import -D自己创建个babelrc，并在里面进行配置// 注意：webpack 1 无需设置 libraryDirectory{ "plugins": [ ["import", { "library
2021-06-03 21:09:45
405
原创 axios拦截，api统一管理
axios我们在请求数据的时候使用到axios，但我们每一个页面的数据请求都需要用到axios，如果重复的使用，造成代码的繁多，且占据了大量内存，所以，我们可以把axios进行封装，在页面进行调用就可以了，使用axios以及他的封装具体操作如下1）首先，先引入插件axiosnpm install axios --save-dev2)在我们的项目src文件下创建一个http的文件夹，创建一个http.js和api.jshttp.js用来写我们的封装，api.js用来写我们封装的接口下面进行axi
2021-06-03 21:02:02
96
原创 去哪儿项目开发流程
去哪儿项目开发流程1.确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 项目的搭建项目的打包可以用到的工具有yarn 和npm(cnpm)，eg：yarn add axios -Scnpm install axios -S注：-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencie
2021-06-02 09:56:12
111
原创 一些关于transltion的问题
transition的作用首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。transition的属性1）v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;2）v-enter-to：元素显示/插
2021-06-01 21:08:21
168
原创 面试中常见的keep-alive问题
什么是keep-alive？keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。keep-alive的优点？在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性keep-alive有三属性include - 字符串或正则表达，只有匹配的组件会被缓存max-数字，最多可以缓存多少组件实
2021-06-01 20:17:27
2633
原创 多环境变量配置
多环境变量配置1.首先在package.json里面找到，scripts在里面写入"serve",“test”,“build”, 通过–mode xxx来执行不同的环境通过npm run xxx 来执行不同的程序，打包，测试，以及启用本地在package.json中的代码： "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "test":"vue-c
2021-06-01 18:38:22
157
原创 对事件委托的理解
事件委托事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了事件委托的优点提高了性能，减少了事件的绑定，从而减少了内存的占用应用场景在vue中事件委托我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现<template> <div cla
2021-05-30 19:36:22
215
原创 闭包的理解
1.什么是闭包？简单的来说就是函数嵌套函数，内部函数可以访问外部函数的变量。function outer() { var a = '变量1' var inner = function () { console.info(a) } return inner // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域 }使用闭包的注意点？（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。*
2021-05-30 19:27:18
78
原创 let var const的区别
是否存在变量提升var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错是否存在暂时性死区？let和const存在暂时性死区。即只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响是否允许重复声明变量？var允许重复声明变量。let和const在同一作用域不允许重复声明变量。是否存在
2021-05-28 19:07:58
74
原创 作用域、作用域链、自由变量、变量提升
作用域 简单的来说作用域就是一个函数或变量可以执行的范围作用域可分为：全局作用域: 任何地方都能够访问到局部作用域：局部作用域一般只在固定的代码片段内可访问到ES6的块级作用域注：在es5中只有全局作用域和局部作用域，他们无法解决1）变量提升导致内部变量覆盖了外部的变量2）用来计数的循环变量泄露为全局变量作用域链当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域，一层一层依次查找，直至找到为止，找到这个变量后就会停止，不会继续查找这个变量，如
2021-05-28 19:03:22
113
1
原创 new的理解
new的理解通常我们在创建构造函数的时候会new出来一个新的对象，然后再进行操作，但我们的这个new是怎么来的呢1）new开始的时候，会创建一个空对象2）让这个空对象的__proto__指向构造函数的prototype属性3）调用构造函数，并改变this指向，让他指向我们新创建出来的空对象，4）并返回一个空对象注：当我们在第四步的时候，可以判断我们的构造函数有没有返回值，当有返回值时，返回构造函数的返回值，当没有返回值时，返回我们创建的空对象function Foo(name, age) {
2021-05-27 20:31:09
237
1
原创 this指向的理解
this指向1、在浏览器中，this指向于window2、在函数中(普通函数)，this指向调用他的那个对象3、在箭头函数中，箭头函数中没有this，使用的this就是箭头函数父级的this。4、在构造函数中，this指向构造出来的实例。改变this指向的放方法一共有三种call、 apply、bindApply改变this指向，传入的是单个值,如果是数组，他会把数组里面得各项分开传入Call改变this指向，并且他只能传一个值，如果是数组，他会把数组一个整体传入Bind
2021-05-27 19:54:19
345
1
原创 原型、原型链
原型、原型链1、prototype每个函数都一个prototype属性，被称之为显示原型。2、__ proto __每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就
2021-05-26 20:43:31
77
2
原创 call、bind、apply的理解
call、bind、apply的来源call、apply和bind方法其实都是继承自function.prototype中，属于实例方法。 console.log(Function.prototype.hasOwnProperty('call')); console.log(Function.prototype.hasOwnProperty('apply')); console.log(Function.prototype.hasOwnProperty('b
2021-05-26 19:50:03
291
原创 argument的理解
对argument的理解1.arguments他是一个伪数组2.它不能使用数组里面的方法，但它可以调用本身，它存在有下标。3.它具有length长度4.他是一个储存我们所有形参的集合对arguments的使用如果我们要使用arguments我们可以把arguments进行过转换，然后使用数组方法方法一：我们可以是使用object.prototype.pull.call(argments)来修改它的this指向 function fn (){ Array.protot
2021-05-25 21:17:24
364
原创 数组的常用方法
数组常用的方法1.push2.pop3.shift()4.unshift()5.splice()6.concat()7.split()8.sort()9.reverse()10.slice(start,end)11.forEach(callback)12.filter13.every14.some()15.indexOf()16.find(callback)17.findIndex1.pusharr.push 从后面添加元素，返回值为添加完后的数组的长度let arr = [1,2,3,4,5]co
2021-05-25 19:30:49
311
原创 数据类型判断
数据类型判断js数据类型判断有4种方式分别是：typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()第一种：typeoflet str = ""console.log(typeof str);注意：尽量用来判断简单数据类型，除了null，null判断出来是object，判断object和array都会返回object第二种：instanceofvar c= [1,2,3];console.
2021-05-24 20:51:23
115
1
原创 js数据类型
js数据类型一、数据类型数据类型分为2种基本数据类型：String Null Number Boolean Undefined引用数据类型：Object。包含Object、Array、 function、Date、RegExp。备注： 基本数据类型，又称值类型。1、基本数据类型基本数据类型都存储在栈里，且基本数据类型都是深拷贝。2、引用数据类型。引用数据类型都存储在堆里，在栈中有一个id指向堆中的数据，注意：当拷贝引用对象时，拷贝的只是栈中的id，并没有形成新的数据，当我们改变任意一
2021-05-24 20:42:53
86
1
原创 深拷贝
深拷贝** 深拷贝和浅拷贝的区别**1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）怎么检验深拷贝成功改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组深拷贝数组1 .直接遍历var array = [1, 2, 3, 4];functio
2021-05-23 19:11:42
130
原创 Vue-router的路由
vue-router原理路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。路由有两种模式hash和history。hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http:/
2021-05-23 18:47:21
86
原创 Vuex
vuex是什么Vuex是一个专为vue.js应用程序开发的状态管理模式，他才用集中式储存管理应用的所有组件状态，并以一种相应的规格保证状态以一种可预测的方式发生变化。在项目中，一些地方会频繁的用到data数据，频繁地用到组件级传参的方式传data，一旦项目很大，管理和维护就会很麻烦，所以用vuex就可以很好地解决这一问题，vuex这个组件可以在这整个项目中使用状态管理提到状态管理就要说说，什么是状态管理，状态管理就是将浏览器与web服务器的多次交互当作一个整体来处理，将多次交互所涉及的数据状态保存
2021-05-21 20:38:08
85
1
原创 Vue中的生命周期函数
Vue中的生命周期函数一个组件从创建到销毁的过程就叫做生命周期我们常见的生命周期函数有八个1）beforeCreate 创建前在这个函数中，我们一般进行的是初始化工作， 比如创建一个loading；2）Created 创建后我们可以在这个生命周期函数中访问new vue( )所有的属性和方法。在生命周期函数中，会将data中所有属性和methods中所有的方法都挂载到 new Vue（）的实例化对象上。在这个生命周期函数中，会给da
2021-05-20 20:05:27
233
1
原创 组件通讯
组件通讯组件通讯子传父组件通讯组件通讯主要分为三种：子传父 ，父传子，兄弟通讯子传父父组件是通过props属性给子组件通信代码如下<template> <div class="hello"> <child :inputValue = 'value'></child> </div></template><script>import child from './child'export def
2021-05-20 07:51:22
174
原创 uni-app中的request封装
uni-app中的request封装1）在你hbuilder中的项目文件夹里在创建一个文件夹，在次文件夹中创建一个js在js中写入封装代码module.export ={ request(url,method,data){ return new Promise((resolve,reject)=>{ uni.request({ url:"http://api.intewl.cn/api"+url, method:method, data:data, s
2021-05-19 07:51:51
197
原创 黑马优购项目讲解
黑马优购项目讲解一. 准备工作 我们首先拿到一个项目会看到他的一个文档，里面有他所需要接受的数据的接口，然后我们在微信开发程序中创建好项目文件夹。 1）先把我们所需要的的接口请求用promise进行封装 ，封装一个函数，把它们写在一个文件夹里，当那个页面需要那里的数据就进行调用就可以。 2）把我们所必须要的页面也先配置好，当然还有底部导航，以及路由的配置，以及一些全局的配置。 3）看项目文档时，查看每个页面是否有共同的地方，如果有就用把相同的地方封装成一个组件，进行调用二. 首页的操作
2021-05-17 21:42:09
1148
3
原创 微信小程序的发布流程
微信小程序的发布流程这里写目录标题微信小程序的发布流程上传代码提交审核 注：再发布程序之前，要先在微信文档中配置好白名单 要根据自己的开发的程序需求进行填写相应的白名单，上传代码选择要上传的程序代码，打开微信开发者工具，编译成功后，找到左上角的导航中的上传，1）会弹出下面的信息，阅读信息，点击确定2）写入自己的想写的内容，写完后进行确定3）完成后，会提示你上传成功提交审核 进入微信小程序的官网:https://mp.weixin.qq.com 1）进入【版本管
2021-05-17 11:16:17
279
原创 小程序支付流程
小程序支付流程客户先进行授权登录，登录成功后会进行的支付进行下面的操作，代码如下，js代码async add() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/auth/auth' });
2021-05-16 20:23:23
120
原创 小程序授权登陆流程
小程序授权登陆流程 1）在你的登录按钮注册个点击事件，然后在点击事件中用微信中的wx.login的方法来获取code，创建一个对象来收需要的值 ，然后把这个对象作为参数去请求登录接口，如果登录成功就会返回一个token的值，储存并返回一下支付页面就行了。 我用的原生写了个promise封装js代码如下 handleUserInfo(e){console.log(e); new Promise((resolve, reject) => { wx.login(
2021-05-16 20:10:46
204
原创 小程序获取收货地址流程
小程序获取收货地址流程 在wxml中设置点击事件，写出显示的代码 **在Wxml中**<view class="rider"><view wx:if="{{!address.userName}}"> <button bindtap="handleChooseAddres" plain>获取收货地址</button> </view> <view wx:else> <view>
2021-05-16 19:39:45
159
原创 小程序如何写收藏、分享、客服功能
小程序如何写收藏、分享、客服功能小程序中如何实现收藏小程序中如何实现分享小程序中如何实现客服功能小程序中如何实现收藏 1）首先把收藏按钮注册个点击事件，在这里我注册的是collect， 我们可以用数据的id或者index，来检测是否被储存，具体做看下面代码在Wxml中的代码<text bindtap="collect"><text class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}"> 收藏&l
2021-05-16 19:18:13
154
原创 小程序中下拉刷新，上拉加载更多
下拉刷新下拉刷新，简单的来说就是在我们的页面上第一次点进来的数据，然后还有数据未加载出来，下拉刷新，就是向再次接口请求了数据，把页面上已经请求到的数据和刷新后又请求出来的数据拼接到一起，可以利用展开运算符，然后页面进行了再次渲染，有了新的数据，这就是下拉刷新。1）一般用户的程序中下拉刷新是被禁止的，我们可以先在要刷新页面的Json中添加 “enablePullDownRefresh”:true,2）配置后Json 就开始具体的代码操作data{ lister: [ ],
2021-05-14 16:49:23
450
3
原创 在小程序中实现Tab切换
使用wx:if的方法（1） Wtml中的代码<view class="big"> <view wx:for="{{list}}" wx:key="index" data-index="{{index}}" class="nav {{status==index ?'on':''}}" bindtap="change">{{item.title}}</view></view><view wx:if="{{status==0}}">1<
2021-05-11 21:09:14
340
原创 对Promise的理解
promise1.什么是promise？promise是异步编程的一种方案，解决地狱回调的问题，是一种链式调动的方式简单来说promise就是一个容器，里面可以保存着某个未来才会有结束的结果promise是一个对象，从他可以获取异步操作的最终状态（成功和失败）。它也是一个构造函数，对外提供统一的API，自己身上有all，reject，resolve等方法，原型上有then.catch等方法。一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作
2021-05-07 20:20:48
176
原创 用Promise封装wx.request
1.目录结构在根目录下创建一个文档，例如创建一个http文档，在文档内写入三个js文件，分别为api.js文件、fetch.js文件以及http.js文件在根目录xia创建一个env目录，yongjs配置并导出多个开发环境module.exports={//开发变量Dev:{ "BaseUrl":"https://www.develep.com"},//测试环境Test:{ "BaseUrl":"https://www.test.com"},//生产环境P
2021-05-07 19:58:27
135
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人