- 博客(39)
- 收藏
- 关注
RSS订阅原创 iframe 优点、缺点
一、iframe使用<body> <iframe src="https://blog.csdn.net/weixin_50580285/article/details/117792145?spm=1001.2014.3001.5501" frameborder="0" width="100%" height="700px"></iframe></body>展示效果图：二、iframe的优点iframe能够原封不动的把嵌
2021-06-11 15:05:10
382
1
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
一、如何修改element-ui默认的css样式去除scopedscoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped解决方法：1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。——————可以解决问题——————缺点：这样设置的是全局样
2021-06-10 21:56:54
1615
1
原创 elemeng-ui 中el-form 表单如何校验
el-form首先对el-form标签中的几个关键属性:ref: 当前表单的唯一标识model: 表单绑定的对象rules: 字段校验规则案例：代码：这里是引用<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age"
2021-06-07 21:37:49
199
原创 Windows下安装Nginx
简述NginxNginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的安装步骤下载 Nginx下载地址：http://nginx.org/en/download.html （Nginx官网）箭头指向的是稳定版的，下载即可下载之后，解压到指定的目录，就可以看到以下的目录控制台（CMD）切换到Nginx目录下，
2021-06-07 11:43:53
135
原创 移动端开发流程
一、确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack二、搭建推荐使用yarnyarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）从0开始搭建首先我们要创建一
2021-06-07 08:38:56
765
4
原创 vue-router 鉴权 守卫
permission.js//路由配置文件import router from './router'import store from './store'//需要安装nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'//禁用进度环NProgress.configure({ showSpinner: false })// 路由白名单const whiteList = ['/login']/
2021-06-07 07:45:23
75
原创 webpack配置打包优化 （vue.config.js）
新建vue.config.js设置静态资源路径为"./"，否则打包后项目无法运行module.exports = { publicPath: "./"}关闭生产环境下的SourceMap映射文件，包可减少80%module.exports = { productionSourceMap: false,}跨域配置 --说白了就是欺骗浏览器的module.exports = { devServer: { open: false, // 自动启动浏览器 h.
2021-06-04 16:12:42
1107
原创 vant-ui 按需引入
前言：之前写的都是全局引入，之后为了提高性能，我们使用按需引入，需要那个就引入那个。一、安装我们可以通过yarn来安装，速度快yarn add vant -S二、按需导入安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式命令：yarn add babel-plugin-import -D 或者 npm i babel-plugin-import -D安装之后，找到我们的 babel.confi
2021-06-03 21:50:00
121
原创 axios拦截，api统一管理
项目路径下，引入axios、qs依赖 —>下载axios cnpm install axios cnpm install qs在项目的src路径下新建一个commJs文件夹，在commJs文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里request.jsimport axios from 'axios';import QS from 'qs';//自动切换环境axios.defaults.bas..
2021-06-02 14:53:47
117
原创 多环境变量配置
配置多环境变量步骤：在package.json 里 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production代码如下："scripts": { "serve": "vue-cli-service serve --open", //
2021-06-02 09:59:51
420
原创 transition
transition定义：transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition-property 过渡属性(默认值为all)transition-duration 过渡持续时间(默认值为0s)transiton-timing-function 过渡函数
2021-06-01 21:12:29
180
原创 keep-alive
keep-alive的生命周期初次进入时：created > mounted > activated；退出后触发 deactivated再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中案例:更改App.vue<div id="app" class='wrapper'> <keep-alive> <!-- 需要缓存的视图组件 --&
2021-06-01 20:19:41
101
原创 什么是事件委托？
一、概念事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个简单的例子： 比如一个班级的同学的快递同时到了，一种方法就是他们一个个去领，另一种方法就是把这件事情委托给班长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个同学； 这样的话，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的班长长就是代理的元素，所以真正绑
2021-05-28 21:48:39
23348
3
原创 什么是闭包？
什么是闭包？1、概念闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回。先来个案例，一目了之！ var local="变量" function foo (){ //foo是一个函数 console.log(local) // }在函数内部可访问local的变量，称之为闭包使用return可以实现闭包例如：function foo(){ var local = 1 function
2021-05-28 21:32:46
392
原创 var let const 区别
一、var、let、const使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。var使用 var 在全局级别（在函数外部）进行声明都会自动成为 window 对象上的一个属性举个简单的例子：var name = 'Johnson';window.name === name // truelet 、const但是，如果
2021-05-28 11:55:30
91
原创 作用域、作用域链、自由变量、变量提升
一、作用域1、什么是作用域？作用域就是，规定的变量可以访问的范围。2、在JS中有三个作用域全局作用域：定义全局作用域下的变量，全局任何地方都可以访问。（window环境）函数作用域：函数也能限制一个变量的访问范围（保护变量）块级作用域：使用 let 、const 定义的对象，就会产生块级作用域3、执行分4阶段开始执行前定义函数时函数执行阶段函数执行后注意：let 定义的变量不会挂到 window上， 会定义一个全局的对象 来存储二、作用域链在函数创建的时候，作用域链就形成
2021-05-27 21:20:21
118
原创 this指向问题、new的过程
This的指向规则：谁调用就指向谁。事件监听函数内部，this会指向监听的那个元素节点。在构造函数中，this指向New出来的新对象。对于箭头函数，自身没有变量，所有指向环境中的this。如果一个函数没有被调用，也就是普通调用，this指向全局变量。在严格的情况下，this为Undefined。New实例化过程创建一个空的对象。例如：let obj = { }将该对象的 _ _ proto _ _指向类的原型对象。绑定该函数内部的this，指向这个对象。执行这个
2021-05-27 17:21:05
168
原创 原型、原型链
原型：可分为隐式原型和显示原型隐式原型（_ _ proto_ _）每个对象上都有一个_proto_属性。隐式原型的作用是用来构成原型链，实现基于原型的继承如果在 _ proto _属性中如果找不到想要的属性，就去父函数中去找，直至找到最顶层的object.prototype为Null显示原型（prototype）每一个函数创建之后，都会拥有一个prototype属性，这个属性指向函数的原型对象。显示原型的作用是用来实现基于原型的继承与属性的共享...
2021-05-26 20:53:41
71
原创 call/apply/bind
总结：在浏览器中，在全局范围内this，指向window。在函数中，this永远指向最后调用它的那个对象。在构造函数中，this指向New出来的新对象。call、apply、bind中的this被强制绑定在那个对象上。箭头函数比较特殊，箭头函数的this为父作用域的this。三者都可以传参，也是函数内部的API。首先呢，call、apply、bind三个方法都是Function.prototype中的属性，被称为实例对象例子： console.log(Function.prototyp
2021-05-26 20:21:18
84
原创 数组常用方法 （ES4、ES5、ES6以及ES7）
把数组转换为字符串1）JavaScript 方法 toString()把数组转换为数组值（逗号分隔）的字符串。实例：<!DOCTYPE html><html><body><h1>JavaScript 数组方法</h1> <h2>toString()</h2><p id="demo"></p><script> var fruits = ["Banana", "Ora
2021-05-25 16:46:56
828
原创 argument详解
argument中的形参、实参以及参数的值传递和引用传值形参：函数定义的参数。实参：函数调用时实际传递参数。参数匹配是从左向右进行匹配的，如果实参个数小于形参，后面的参数对应赋值undefined。实参的个数如果多于形参的个数，可以通过argument访问。参数的值传递和引用传值↓↓↓1）引用传递的参数，是传递引用对象的地址。函数内部修改会影响传递参数引用对象2）值传递的是一个值类型的副本，函数内部不会影响外部传递的参数变量...
2021-05-25 16:45:44
323
原创 JS数据类型判断
判断数据类型有五种方法：typeof01.可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；02.可以使用typeof判断变量是否存在（如if(typeof a!=“undefined”){…}）;03.Typeof 运算符的问题是无论引用的对象是什么类型 它都返回objecttypeof { } // objecttypeof [1,2] // objecttype
2021-05-25 16:44:39
138
原创 JavaScript的数据类型、堆&栈存储、多数据类型计算
1.js数据类型有哪些基本数据类型(值类型)：Number、String、Boolean、Undefined、NullSymboles6新增独一无二的值BigIntes10新增注：基本数据类型、又称值类型例子：var length = 7; // 数字var lastName = "Gates"; // 字符串var cars = ["Porsche", "Volvo", "BMW"];
2021-05-25 16:43:30
77
原创 Vue生命周期
一、什么是生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。二、生命周期函数Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。1. beforeCreate（创建前）表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。2. created（创建后）数据对象 data 已
2021-05-25 16:29:58
138
原创 深拷贝的三种方法
一、JSON方法实现深拷贝var obj = { name: 'a', arr:[1,2,3]}var newObj = JSON.parse(JSON.stringify(obj))newObj.name = "cc"console.log(obj) //{ name: 'a', arr: [ 1, 2, 3 ] }console.log(newObj) //{ name: 'cc', arr: [ 1, 2, 3 ] }对于一般常用的数据拷贝这种方法无疑是非常简单的
2021-05-21 21:07:30
1662
原创 Vue-Router的两种路由模式、编程式/组件式、如何传参(优缺点)
一、组件式导航组件式是指通过点击链接实现导航的方式，比如 a、router-link 标签。<div id="app"> <router-link :to="{ name:'user',params:{id:3} }">login3</router-link> <router-link :to="{ name:'user',params:{id:4} }">login4</router-link> <route
2021-05-21 19:33:50
318
原创 vuex (概念、组成、map高级语法、数据持久化)
一、概念Vuex 是一个专门为 Vue.js应用程序开发的状态管理模式。它采用的是集中存储，来管理所有应用组件的状态，vuex也是vue的官方调试工具。在数据量大的时候使用vuex二、组成五种状态分别是： state:存储状态、getters:计算属性、mutations:修改状态， actions:异步操作、modules:模块plugins 是一个插件 1. state:存储状态 2. getters:计算属性，获取数据之前再次编译，我们在组件中使用 通过$sotre.getters.
2021-05-21 16:28:49
152
原创 Vue中的组件通信
一、组件通信可分为父传子、子传父、兄弟组件之间的通信1. 父传子父组件给子组件传值，可以在父组件的子标签中添加自定义属性名 绑定需要传递的参数，最后在子组件中通过props来接收这个参数props的用法有三种//第一种props:['call']//第二种props:{ call:String //可以指定类型，如数组、字符串···}//第三种props:{ call:{ type:String, //类型 default:'Baby' //默认的值 }}
2021-05-19 20:14:25
114
原创 YouGou商城
参考项目文档搭建目录结构目录名作用styles存放公共样式components存放存放组件样式lib存放第三⽅库utils帮助库request⾃⼰的接⼝帮助库搭建项目页面在做项目之前呢，我们先来封装下http,方便调用接口http中包含api.js、fatch.js、http.js 1. api.js:是导出我们请求的接口 2. fatch.js:是用的Promise 分别传三个参数( url,data,method,)
2021-05-17 21:49:47
149
原创 小程序发布流程
发布三大步骤：上传代码提交审核发布版本注意：发布之前，配置服务器域名白名单上传代码在代码编写完毕后，在顶部的导航条上找到【上传】，点击上传到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。提交审核进入微信小程序的官网:https://mp.weixin.qq.com2.1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填写小程序基本资料点击填写填写基本信息添加开发者添加体验人员
2021-05-17 11:52:02
100
原创 小程序支付流程
点击下单按钮，请求下单支付，后端返回支付参数，收到5个参数之后输入密码确认用户支付 输入密码是跟小程序 小程序是跟微信 然后返回给我们参数给微信后台wx.requestPayment() //获取五个参数后调用支付接口timeStamp:res.data.timeStamp //时间戳nonceStr:res.data.nonceStr //随机字符串package:res.data.package ///订单详情扩展字符串signType:res.data.signType //签名方式.
2021-05-16 21:32:50
198
原创 小程序获取收货地址开发流程
1.流程小程序使用API：wx.chooseAddress获取微信地址，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址初次使用微信地址要进行授权的，获取地址的权限，用户确认了才能获取地址。wx.getSetting({ success:(result)=>{ console.log(result); //用户点击确定授权时：authSetting 的scope.address为 true； //用户点击取消时为false，且用户再次获取地址则无任何反应，无法再次
2021-05-16 21:24:32
542
原创 小程序如何写收藏、分享、客服功能
1.收藏首先是在列表页中跳到详情页面，对应的每一条商品进行收藏，星星的点击功能有两种形式，一是传值后台自动的转换星星的颜色、二是页面中改变星星的颜色给收藏绑定点击事件，存当前点击的ID、存放状态，将当前详情页中的整条数据，使用本地存储存到本地[ wx.setStorageSync(‘xxx’，this.data.**) ] ， 可以用三元运算符来控制星星状态在收藏页面用[ wx.getStorageSync(‘xxx’) ] 放到新的数组中2.分享首先参考我们的API,在button按钮
2021-05-16 21:11:25
144
原创 微信小程序授权登录
授权登录:我们在项目中，登录，授权页面，都必须要传递token值。一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。token是前端鉴权的一种方式，token由后端生成， 是有时效性的。微信小程序登录授权，拿到token需要三步骤：第一步：登录流程 ：前端—>后端—>腾讯服务器 wx.login—>wx.request—>后端—>小程序(腾讯)服务器第二步：`登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入
2021-05-13 19:58:10
250
原创 Promise封装wx.request ( )
Promise封装wx.request( )思路：首先创建目录结构 在根目录下创建http目录，目录下有三种js文件分别是api.js 、 fetch.js、http.js然后在根目录下创建env目录,创建index.js配置并导出多个开发环境开发环境分别是：1.开发环境2.测试环境3.生产环境： 是使用Https形式 通常也是真实环境需要注意的是在微信小程序开发时，你在开发工具中详情设置中可以不校验https证书，但出于安全考虑，小程序在上线时只能使用https的接口。然后在api.
2021-05-13 19:15:31
113
1
原创 关于Vue
==<font color=#f000>自定义组件</font>==： 创建子组件的文件，建立组件的模板，把架子搭起来，也就是在子组件中写好<template>视图层，<script>逻辑层<style>css样式层。然后定义好props里面的数据，实现子组件需要的逻辑代码后，也就封装好了，然后直接调用即可。调用的花import引入，同时在父组件<script>（逻辑层）中的components这个对象中写入组件名称，最后挂载到父组件的template中即可。
2021-05-13 18:20:52
83
原创 微信小程序 下拉刷新/上拉加载更多 （上拉加载更多怎么实现）
实现原理：下拉刷新：由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。2. 上拉加载更多（页面上拉触底事件）：新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染，小程序在保持原数据显示不变的基础上，自动追加渲染显示新数据。注意（小程序官方有说明）：上拉加载更多 不要用scroll-view,用普通的view即可。下拉刷新需要在 当前页面.json 里配置{ "enablePullDownRefresh": true }p
2021-05-11 13:51:28
2924
原创 es6中的generator函数详解
Generator 函数的定义语法上， Generator 函数是一个状态机，封装了多个内部状态。形式上， Generator 是一个函数。可以暂停执行，函数名之前要加星号，以示区别。整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。什么是Generator函数1、function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。2、调用Generator函数后，该函数并不执行，
2021-05-07 20:40:16
230
原创 对Promise、async/await 的理解
一、对Promise 的理解1、首先Promise是一个构造函数，通过 new Promise()可以得到一个 Promise 的实例；2、Promise 有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数） ；3、在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到这个 .then() 方法 ；4、Promise 是一个异步操作；每当我们 new 一
2021-05-07 20:08:01
1044
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人