- 博客(33)
- 收藏
- 关注
RSS订阅原创 Vue中的transition
动画周期在它过渡的过程中会有6个class样式来设置transition的过渡动画的效果v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被
2021-07-05 09:03:52
392
原创 v-model双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每
2021-06-16 20:03:44
84
原创 如何在vue的scoped样式中修改element-ui的样式
一般来说修改element-ui样式需要挂在全局才会生效但是有很多时候,样式并不需要统一修改查询资料后发现一个深度选择器/deep//deep/ 第三方组件或者也可以写成外层元素 >>> 第三方组件 .form { padding: 20px; width: 350px; height: 280px; background-color: white; border-radius: 10px; /deep/ .el-f
2021-06-11 07:41:38
944
原创 nginx服务器配置
首先我们上传项目需要打包，打包流程详情请看nginx它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。一、下载http://nginx.org/en/download.html二、安装三、开启在文件安装好的目录下打开命令控制台(cmd)，使用start nginx启动服务在网页上输入localhost，出现下面页面就ok了。四、nginx命令（1）start nginx 开启nginx服务（
2021-06-08 08:01:30
133
原创 webpack打包
项目开始时webpack配置,需要自己在项目根路径下创建vue.config.js文件一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新
2021-06-06 18:59:04
75
原创 vant-ui 按需引入
1.首先安装vantyarn add vant -S2.安装自动按需引入插件安装插件yarn add babel-plugin-import -D在根目录创建.babelrc文件添加配置{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]}3.创建一个文件来存放我们要用的vant组件在v
2021-06-03 17:18:47
98
原创 axios封装与api接口管理
我们为什么要封装axios和api接口管理？主要目的是为了让我们后期维护更加方便，同时简化我们的代码。axios封装步骤1.第一步我们先安装axiosyarn add axios -S2.第二步我们先在src目录中创建network文件夹，http.js文件中存放axios封装，api.js用来管理我们的接口在http.js中我们首先引入// 在http.js中引入axiosimport axios from 'axios'; // 引入axiosimport router from
2021-06-03 17:02:01
154
原创 多环境变量配置
首先我们在package.json中的scripts进行配置："scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode testing"},然后我们通过：通过 npm run serve 启动本地 , 执行 development通过 npm run testing 打包测试 , 执行 test
2021-06-02 14:10:43
98
原创 transition
1.TransitionTransition 可以设置 CSS 属性的过渡效果，它有以下几个属性：transition-property 用于指定应用过渡属性的名称transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。默认值为 all 也就是所有的元素都应用过渡效果。例如，想让容器的宽高有一个过渡的效果，就可以这样写:<style> .box { width: 200px; he
2021-06-01 20:19:18
138
原创 keep-alive
1.概念keep-alive是vue内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。2.应用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性3.生命周期函数被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated1.
2021-06-01 20:12:44
58
原创 事件委托（事件代理）
1.概念事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。使用事件委托的好处1.提高性能2.减少了事件绑定3.从而减少内存占用可以实现当新增子对象时无需再次对其绑定（动态绑定事件）假设列表项li就几个，我们给每个列表项都绑定了事件；在很多时候，我们需要通过 ajax 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事
2021-05-30 20:44:34
452
原创 什么是闭包
1、概念闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。2、特点让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）3、闭包的创建：闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时 候，外部函数的引用地址不同，都会重新创建
2021-05-30 20:37:33
121
原创 var let const 区别
var是ES5提出的，let和const是ES6提出的。const声明的是常量，必须赋值一旦声明必须赋值,不能使用null占位。声明后不能再修改如果声明的是复合类型数据，可以修改其属性let和var声明的是变量，声明之后可以更改，声明时可以不赋值var允许重复声明变量，后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量，会报错。var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和c.
2021-05-30 20:33:11
49
原创 作用域、作用域链、自由变量、变量提升
一、作用域是指一个变量或函数在程序哪些地方可以被访问到二、作用域链作用域链就是变量的查找机制,当我们引用一个变量时,浏览器会首先在当前作用域中查找,看当前作用域中是否有这样一个变量,如果有就直接引用,如果没有就继续向上一级作用域查找,直到找到window, 在window中会先查看有没有需要查找的变量,没有的话会查找在window中有没有需要查找的属性,如果还没有就会报错三、自由变量变量提升(预解释,预处理): 在执行js代码之前,浏览器会对所有带var或者function的变量进行提
2021-05-27 17:11:35
58
原创 this指向问题、new的过程
一、this指向问题总结：在浏览器中，在全局范围内this指向window在构造函数中，this指向new出来的新对象在函数中，this指向调用它的对象call、apply、bind的this是被强绑定在指定的对象上前四种方式，this是在调用时确定，是动态的箭头函数中的this比较特殊，箭头函数的this是父作用域的this，不是调用时的this箭头函数的this指向是静态的，声明时就确定了6.apply、bind、call都是js给函数内置的一些API，调用他们可以为函
2021-05-27 16:58:38
235
原创 call/apply/bind
1、相同点：三个函数都会改变this的指向（调用这三个函数的函数内部的this）2、不同点：1、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）2、call和apply不会产生新的函数，只是在调用时，绑定一下而已。3、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。bind语法：func.bind(thisArg[, arg1[, arg2[, ...]]])t
2021-05-27 07:53:01
55
原创 原型和原型链
一、原型是什么每个函数都有一个prototype(原型)属性，这个属性都有一个指针，指向一个对象，这个对象包含由特定类型所有实例共享的属性和方法，我这里就给他安置了一个辈分——对象的父亲。使用原型的好处是什么呢？ 可以让所有对象实例共享原型包含的方法和属性。利用原型是当前构造函数创建的对象的父类，这个特点我们可以提取对象的公共属性和方法放在原型中，从程序的视角中具有封装性1.1 原型的构成：原型的属性和方法+constructor function Car(color) { thi
2021-05-26 21:26:36
60
原创 argument
1.什么是arguments？arguments是一个类似于数组的对象，对应于传递给函数的参数，他有length属性，有；arguments[ i ]来访问对象中的元素，但是它不能用数组的一些方法。例如push、pop、slice等。
2021-05-26 07:55:42
157
原创 数据类型判断
1.typeof()基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型中：null引用数据类型中的：Array，Object，Date，RegExp。不可以用typeof检测。都会返回小写的object2.instanceof除了使用typeof来判
2021-05-24 19:57:52
59
原创 js数据类型
一、数据类型简介数据类型分为两种：基本数据类型和引用数据类型常用的基本数据类型有：undefined、null、number、boolean、string常用的引用数据类型有：js的引用数据类型也就是对象类型Object，比如：Object、array、function、data等1.引用类型的值可以改变2.引用类型可以添加属性和方法3.引用类型的赋值是对象引用二、数据类型1.Number类型number 数据类型包括整数和浮点数1.浮点数的最高精度是17位2.浮
2021-05-24 19:52:56
97
原创 手写深拷贝
一、什么是深拷贝？创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象二、为什么要进行深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）三、如何进行深拷贝？(三种)json对象JSON.parse(JSON.stringify(a)): a 只能是扁平对象//不能拷贝 function,会直接丢弃,yeconsole.log('JSON 深拷贝a', JSON.p
2021-05-23 20:53:17
81
原创 vue-router
一、路由原理路由就是用来解析URL实现不同页面之间的跳转二、路由的两种模式hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2021-05-23 20:41:03
78
2
原创 什么是Vuex
一、Vuex的概念vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。二、五大核心state – 存放状态getters – state的计算属性mutations – 更改状态的逻辑，同步操作actions – 异步操作module – 将store模块化三、基本使用通过是在根目录下新建一个st
2021-05-23 20:06:59
128
原创 vue生命周期函数
beforeCreate(){} 创建前实例完全被创建出来之前，实例dom和数据对象 data 都为 undefined，还未初始化。created(){} 创建后数据对象 data 已存在，此时可以调用 methods 中的方法，操作 data 中的数据，但实例dom 还未生成，不能进行dom操作，如果需要操作dom，可以在 this.$nextTick(() => { }) 中进行操作。beforeMount(){} 挂载前vue 实例的 $el 和
2021-05-20 21:02:32
108
原创 vue组件传参
1、父传子在父组件中的子组件标签上绑定一个自定义属性，这个自定义属性的值就是我们要传递的参数，我们在子组件接收是使用props<heads :data="list" />// 比如这是我们注册好的子组件标签<script> export default { data(){ return { list:["数据1","数据2","数据3",] } } }</script><script> export defaul
2021-05-20 07:52:48
357
原创 小程序支付流程
首先来看一下微信支付的需求：1、哪些人 哪些帐号 可以实现微信支付 企业帐号2、企业帐号的小程序后台中 必须 给开发者 添加上白名单 ，一个 appid 可以同时绑定多个开发者3、 这些开发者就可以公用这个appid 和 它的开发权限首先先判断登录是否携带token，然后有的话就创建订单：// 点击 支付 async handleOrderPay() { try{ // 1 判断缓存中有没有token const token = wx.getStorage
2021-05-17 08:41:47
1419
2
原创 小程序下拉刷新，上拉加载实现
1.下拉刷新首先我们需要在json文件中配置：{ "enablePullDownRefresh":true, "backgroundTextStyle":"dark"}使用的是小程序自带的页面配置，然后我们需要在获取到数据时关闭下拉刷新：//在我们获取到数据的代码后面加上这个关闭下拉刷新即可wx.stopPullDownRefresh();// 下拉刷新事件 onPullDownRefresh(){ // 1 重置数组 this.setData({
2021-05-14 19:33:53
245
原创 小程序如何写收藏、分享、客服功能
1.收藏第一次点击收藏成功，第二次点击取消收藏，需要一个变量来定义图标显示。data{ isCollect:false}然后根据这个变量来定义图标：<view bindtap="handleCollect"> <text class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}"></text> 收藏</view>然后写一个点击事件来实现收藏功能：
2021-05-14 19:17:30
84
原创 数组的方法
数组方法push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。unshift()：将参数添加到原数组开头，并返回数组的长度 。sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。reverse()：反转数组项的顺序。concat() ：将参数添加到原数组中。这个
2021-05-14 16:57:35
71
原创 小程序授权登录流程
小程序授权登录流程实现登录就是要获取当前的用户信息首先使用button标签中的open-type属性：然后使用内置的点击事件：使用conso.log(e.detail)，即可获取用户信息：
2021-05-13 20:13:30
136
原创 小程序获取收货地址流程
小程序获取收货地址流程wx.chooseAddress()是小程序中有自己内置的api，专门用来获取用户收货地址,调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。回调函数：返回参数：使用方法：console.log(result)即可获得参数然后我们取需要的参数，存入本地，获取地址时就可以使用这些参数进行渲染：...
2021-05-13 19:57:00
142
原创 如何使用promise封装wx.request()
如何使用promise封装wx.request()封装wx.request()可以让我们的代码变得简单，通俗易懂，方便我们后续修改和添加新的接口api。封装wx.request()，首先做好准备工作，创建需要的文件夹及文件。接下来在fetch.js文件中使用promise来封装wx.request()然后写api.js文件，封装我们要使用的接口api然后再http.js文件中引入写好的api.js和fetch.js，集中使用然后在app.js全局引入，方便后面使用http最后在文件中
2021-05-13 19:37:18
92
原创 promise/async/await/generator
全栈面试题总结day01一、Promise1.什么是Promise?Promise是es6中专门用来处理异步回调的，可以解决回调地狱。Promise是一个构造函数，这个构造函数中放一个回调函数作为参数，这个回调函数中放的是异步的操作，对于一个异步操作来说执行是需要时间的，所以一开始Promise是一个pending状态，到了一定的条件就会变成fulfilled（成功）或者reject（失败的状态） 在成功的时候我们执行resolve回调函数，其实调用的是.then里的回调，在失败的时候执行rejec
2021-05-07 20:46:38
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人