- 博客(37)
- 收藏
- 关注
RSS订阅原创 iframe
iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性。示例：<iframe src="https://www.baidu.net" width="200" height="500"> 该网站使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问。 </iframe> iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出.
2021-06-15 07:47:54
311
1
原创 项目中如何修改element-ui的默认样式
Vue项目中，通常我们在写样式的时候为了避免全局污染，我们会给当前组件的样式加上scoped，让当前的样式只作用域当前组件，但是在写项目的时候会发现一个问题，当我们需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成的组件之间的样式覆盖，这是我们可以通过特殊的方式穿透scoped。1.style的样式穿透.wrapper >>> .swiper-pagination-bullet-active background: #fff2.sass与less的样式.
2021-06-10 21:48:01
234
原创 vue2与vue3的区别
1.懒观察在Vue2中，数据无论大小，都会在刚开始的时候就会创建观察者，当数据量比较多的时候性能会有所减弱。在Vue3中，只会对渲染初始可见的部分数据创建观察者，提高效率2.变更通知例如：在Vue2中，使用Vue.set来给对象新增一个属性时，这个对象的所有watcher都会重新运行。Vue3中，只有依赖的那个属性的watcher会重新运行。3.创建方式Vue2:vue init webpack vuedemoVue3:vue create vuedemo4.项目目录Vue
2021-06-08 16:14:08
233
原创 elemeng-ui 中el-form 表单如何校验
elemeng-ui 中el-form 表单如何校验为甚么要校验表单校验可以提醒用户填写数据规则以确保用户提交数据的有效性，也可以防止用户因误操作、填写错误数据或者而已提交数据而占用服务器资源Element UI校验规则Element UI封装了组件el-form来收集、校验和提交数据，其中rules属性就是用来做数据校验的。Element UI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验，根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出messag
2021-06-07 21:50:18
455
原创 vue-router 守卫 鉴权
路由导航守卫路由导航守卫共有三种共有三个参数to: Route即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由next():进入页面全局路由守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})路由独享守卫const router = new VueRouter({ routes: [ { p
2021-06-04 11:40:55
119
原创 webpack打包优化
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。配置proxy跨域使用vue-cli开发项目，在本地开发环境中，如果遇到跨域问题。可以通过配置proxy的方式，解决跨域问题module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号
2021-06-04 10:31:47
393
原创 vant 按需引入
首先安装vant1.下载vantnpm install vant -S2.下载需要的插件babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D3.在src目录下新建.babelrc文件，配置plugins（插件）// 在.babelrc 中添加配置// 注意：webpack 1 无需设置 libraryDirectory{ "plugins": [
2021-06-03 21:50:02
136
原创 axios封装与api接口管理
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库axios封装步骤1.安装axios`npm install axios -S`
2021-06-03 21:20:08
300
1
原创 多环境变量配置
在package.js中的script配置serve、stage、build，通过–mode xxx来执行不同环境通过npm run serve 从本地启动，执行development通过npm run stage 打包测试，执行staging通过npm run build 进行打包，执行production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli-service build --mod
2021-06-03 19:49:46
130
原创 transition
transition的属性及值transition-propenrty：规定设置过渡效果的 CSS 属性的名称。transition-duration:规定完成过渡效果需要多少秒或毫秒。transition-timing-function：规定速度效果的速度曲线。transition-delay： 定义过渡效果何时开始。1.transition-property属性规定过度的css属性的名称 提示：通常在用户的鼠标悬浮到元素上时发生2.重点：他跟transition-duration属性，始终
2021-06-01 21:36:39
98
转载 keep-alive
keep-Alive的作用keep-alive的概念keep-alive是vue内置的一个组件，当它包裹动态组件时，会保存不活动的组件实例，而不是销毁他们，和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组建切换的过程中，将切换出去的组件保留在内存中，防止重新渲染DOM，减少加载时间及性能消耗，提高用户的体验。原理在created钩子函数调用时将需要缓存的VNode节点保存在this.cache中，在re
2021-06-01 20:48:17
129
原创 事件委托的概念
事件委托这里是引用概念事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处提高性能，减少了事件绑定，从而减少内存占用案例1需要点击每个a，来弹出他们的内容<div> <a href="#">a1</a><br> <a href="#">a2</a><br> <a href="#">a3<
2021-05-28 20:53:08
120
原创 关于闭包的理解
闭包闭包的概念闭包函数：声明一个在函数中的函数，叫做闭包函数闭包：内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回了之后闭包的特点让外部访问函数内部成为可能局部变量会常驻在内存中可以避免使用全局变量，防止全局变量污染会造成内存的泄露（有一块内存空间被长期占用，而不被释放）闭包的创建闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡
2021-05-28 19:31:57
801
原创 var、let和const的区别
var、let和const的区别再ES5中，声明变量只有var和function两种形式，但是因为var声明变量会有一定的缺陷（内层变量可能覆盖外层变量的问题，以及用来计数的循环变量泄露为全局变量），ES6中提出了let和const声明变量，弥补了ES5中var的缺点变量提升的问题var声明的变量存在变量提升，将变量提升到当前作用域的顶部，变量可以在声明之前调用，值为nudefinedlet和const声明的变量不存在变量提升，必须在声明之后使用，否则会报错示例：console.log(
2021-05-28 17:08:40
143
原创 作用域、作用域链、自由变量、变量提升
作用域、作用域链、自由变量和变量提升作用域作用域的定义：所谓作用域就是一个变量可以使用的范围作用域又分多种全局作用域函数作用域块级作用域（ES6新增）js中首先有一个最外层的作用域，称为全局作用域js中可以可以通过函数来创建一个独立的作用域，称为函数作用域，函数可以嵌套，所以作用域也可以嵌套示例：let a = 0function fn1(){ let a1 = 100 function fn2(){ let a2 = 200 function fn3(){
2021-05-27 19:48:10
236
1
原创 new的过程
new的过程像普通函数那样执行，形成私有作用域，进行形参赋值，变量提升等一系列操作默认创建一个对象让这个对象成为当前类的实例，__proto__指向构造函数原型让函数中的this指向这个对象代码执行默认把创建的对象返回var obj = new aa()var obj = {}obj.__proto__ = aa.prototype;aa.call(obj)1.第一行我们先创建了一个空对象2.第二行我们将这个空对象的__proto__指向了aa函数对象的prototyp
2021-05-27 18:58:50
75
原创 this的指向问题
this的指向问题this有五大使用场景this的取值，是在执行的时候确认的，定义时无法确认普通函数、对象方法、call apply bindclass箭头函数1.普通函数全局下，普通函数fn1执行，相当于window执行了fn1函数,所以this是windowcall apply bind可以修改this,2.对象方法对象方法中的this，指向当前对象（因为当前对象执行了方法）。setTimeout函数中的this,相当于普通函数中的this,因为setTimeou
2021-05-26 21:23:32
91
原创 原型、原型链
原型与原型链什么是原型？1.prototype每一个函数都有一个prototype属性，被称为显示原型2.proto每一个实例对象都有一个__proto__属性，被称为隐式原型每一个实例对象的隐式原型__proto__都指向自身构造函数的显示原型prototype3.constructor每一个prototype都有一个constructor属性，指向与它关联的构造函数4.原型链获取对象属性时，如果对象本身没有这个属性，就去它的原型__proto__上去找，如果还找不到，就
2021-05-26 19:07:40
78
转载 数组常用的方法
数组常用的方法indexOf()作用：给定一个数据，查找该数据在数组中的第一个索引,从前往后查找返回值：找到的第一个元素的索引，没有找到返回-1var arr = [11,22,55,44,22,33,55,66]console.log(arr.indexOf(55)) //2console.log(arr.indexOf(55,3)) //6console.log(arr.indexOf(99)) //-1lastIndexOf()作用：给定一个数据，查找该数据在
2021-05-25 21:46:07
86
原创 argument详解
arguments详解arguments 是一个伪数组对象。代表传给一个function的参数列表。实例：function printArgs() { console.log(arguments);}printArgs("A", "a", 0, { foo: "Hello, arguments" })；返回的结果是：[“A”, “a”, 0, Object]控制台打印出来的是一个数组，但并不是真正的数组，所以说arguments 是一个伪数组的对象argument有 lengt
2021-05-25 21:22:11
1138
原创 数据类型判断
数据类型判断数据类型判断有以下几种方式typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1.typeof() 基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object 基本
2021-05-24 21:24:41
177
原创 js数据类型
js的数据类型1.基本数据类型（又称值类型）Boolean、String、Number、Undefined、Null、Symbol（es6新增独一无二的值） 和BigInt（es10新增）2.引用数据类型Object：包含Object、Array、 function、Date、RegExp（在js中除了基本数据类型其余都是对象 数据是对象，函数是对象，正则表达式是对象）基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问
2021-05-24 20:02:21
55
原创 什么是深拷贝
什么是深拷贝深拷贝的含义当拷贝多层级的对象时，也能实现互不影响的效果。也就是说，当遇到对象时，就再新开一个对象，然后将第二层源对象的属性值，完整地拷贝到这个新开的对象中。深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被拷贝的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。深拷贝的三种写法：1.for infunction clone(source) { let
2021-05-23 20:10:34
419
原创 vue-router的理解
vue-router详解路由的概念通过改变URL，在不重新请求页面的情况下，更新页面视图更新视图但不重新请求页面是前端路由原理的核心之一，它共有两种路由模式，默认为hash模式hash模式：利用url中的hash("#")history：利用url中的路径("/home")如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})两种路由模式下mode的区别mode："hash"多了“
2021-05-23 19:17:05
338
原创 Vuex的理解
什么是Vuex？vuex是一个专门为vue.js应用程序开发的状态管理模式。它由五部分组成：state、actions、mutations、getters、modules这五部份分别代表：1.state：存储数据的地方2.actions：可以进行异步操作3.mutations：唯一可以修改state中数据的场所4.getters：类似于vue中的计算属性，可以对state中的数据做一些逻辑性的操作5.modules：模块化管理store（仓库），每个模块拥有自己的 state、mutatio
2021-05-21 18:41:54
83
原创 生命周期函数
生命周期函数也叫生命周期钩子，是组件创建，组件销毁，组件更新时执行的方法，主要分为八个阶段，常用的是mounted，destroyedbeforeCreate(){console.log(“实例创建前”);},vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。created(){ console.log("实例已创建");},vue实例的数据对象data有了，$el还没有。beforeMount(){ console.log("实例编译前");}
2021-05-21 07:51:44
80
原创 Vue组件通信
vue的组件通信*1.父传子首先要在components文件夹中创建一个子组件，然后在父组件的script中使用import引入一下子组件，然后再在components中注册一下，就可以当作普通的标签一样在模板中使用了，如果要传值的话，再在子组件的标签上自定义一个属性，然后将要传输的变量挂载上去父组件中的代码<template> <div class="parent"> <h2>{{ msg }}</h2> <son :
2021-05-20 08:27:27
70
原创 uniapp封装promise接口
uniapp封装promise接口uni-app题拱了uni.requet()方法，发起网络请求首先在根目录里创建一个request文件夹，在里面创建request.js文件，在文件里编写发起网络请求的代码在全局main.js中配置在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单最后在组件中使用...
2021-05-19 00:49:13
464
1
原创 小程序支付流程
小程序支付流程1.点击支付按钮的时候先判断缓存中有没有token值，如果没有就跳转到授权页面获取token值2.创建订单准备一下请求需要的参数，请求的时候将准备好的参数带进去3.发起预支付接口，把获取的订单编号当作参数带进去...
2021-05-18 07:43:23
479
原创 黑马优购项目讲解
黑马优购项目讲解首先在全局app.json配置一下项目需要的页面和底部tabBar "pages": [ "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/index", "pages/cart/index", "pages/collect/index", "pages/order/index", "pa
2021-05-17 22:01:37
864
原创 微信小程序发布流程
微信小程序发布流程上传之前，配置服务器域名白名单1.代码编译完成后点击上传按钮按要求输入版本号，项目备注，完成后点击上传按钮点击上传成功后回弹出一个上传成功的提示，点击确定就行接下来的操作就是去微信小程序平台进行发布2.在小程序平台上找到版本管理，在里面可以看到我们发布的信息点击提交审核会弹出一个提示框，提示我们填写基本资料点击前往填写会跳转到填写信息的页面接下来根据要求完成小程序信息的填写信息填写完毕后点击确定按钮接下来可以添加成员输入微信号，确认添加，扫码登录，
2021-05-17 10:32:28
704
原创 小程序授权登陆流程
小程序授权登陆流程通过给点击按钮设置open-type属性，值为getUserInfo，配合bindgetuserinfo来获取用户信息代码展示通过点击获取到用户信息，然后存到本地存储中，最后再通过wx.navigateBack跳转到上一页逻辑代码展示用户信息打印...
2021-05-16 21:47:48
131
原创 小程序获取收货地址流程
小程序获取收货地址流程当用户点击获取地址的时候先通过wx.getSetting查看一下用户的当前设置然后判断一下状态，如果为true的话就用微信小程序自带的获取地址的api，然后将收货地址信息存到本地存储中...
2021-05-16 21:36:49
269
原创 小程序如何写收藏、分享、客服功能
小程序如何写收藏、分享、客服功能收藏功能1.获取数据的时候先获取缓存中收藏的商品数组 // 获取商品详情数据 async getGoodsDetail(goods_id) { const goodsObj = await request({ url: "/goods/detail", data: { goods_id } }); this.GoodsInfo = goodsObj; // 1 获取缓存中的商品收藏的数组 let collect = wx.getSt
2021-05-16 20:42:26
154
原创 小程序下拉刷新，上拉加载更多
小程序下拉刷新，上拉加载更多1.首先获取商品数据//获取商品数据async getGoodsList(){ const res=await request({url:"/goods/search",data:this.QueryParams}); // 获取 总条数 const total=res.total; // 计算总页数 this.totalPages=Math.ceil(total/this.QueryParams.pagesize); //
2021-05-16 20:04:20
154
原创 promise封装wx.request()
使用promise封装wx.request()1、目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境下面展示一些 内联代码片。module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com"
2021-05-07 21:17:12
157
原创 微信小程序新手留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局<input type="text" class="inp" placeholder="请输入留言" /><button>点击提交</button><block> <view wx:for="{{msgData}}" wx:key="index" class="list"> <text>{{index+1}}----{{item.msg}}</
2021-05-06 21:28:27
1874
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人