- 博客(37)
- 收藏
- 关注
RSS订阅原创 iframe优缺点
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe>iframe中的属性：1.frameborder:是否显示边框，1(yes),0(no)2.height:框架作为一个普通元素的高度，建议在使用css设置。3.width:框架作为一个普通元素的宽度，建议使用css设置。4.name:框架的名称，window.frames[na
2021-06-14 18:46:42
344
原创 项目中如何修改element-ui的默认样式
修改element-ui的默认样式3种方法1.通过创建一个css文件，然后在某一个组件中引用，css文件中使用和组件样式一样的命名，这样组件的默认样式就会被覆盖。>>> 2.使用 /deep/ 是less模式.homePage /deep/ .el-main { padding: 0;}3…在单个xx.vue文件最后多写一对标签，即有两对style标签，一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里：覆盖的样式不会生效！
2021-06-11 07:52:41
229
原创 nginx服务器配置
首先上传项目需要先打包，打包流程请看webpacknginx概念Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的 它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：http://ngin
2021-06-08 08:47:32
548
原创 element-ui表单校验
ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。...
2021-06-08 07:55:05
158
原创 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 15:39:26
100
原创 axios封装、api封装
概念axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库一、封装步骤1.首先安装axiosnpm i axios -Syar
2021-06-03 19:18:59
180
原创 vant-ui按需引入
1.安装在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：Vue 2 项目，安装 Vant 2：npm i vant -SVue 3 项目，安装 Vant 3：npm i vant@next -Syarn安装yarn add vant -S2.引入组件自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。安装插件npm i babel-plugin
2021-06-03 16:07:26
99
原创 去哪儿项目流程
1.确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2.安装依赖如果有创建好的项目模板，可以拿过来然后npm i下载安装依赖3.封装组件封装头部搜索框、轮播图、分类、推荐组件然后在父组件中引入4.请求数据进行渲染因为是json数据，所以请求json数据后进行页面渲染，然后css页面布局5.跳转详情页点击跳转详情，跳转至详情页然后请求详情页的json数据，进行渲
2021-06-02 14:36:42
105
原创 多环境变量配置
配置多环境变量package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run test 打包测试 , 执行testing通过 npm run build 打包正式 , 执行 production配置介绍 以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。 比如,VUE_APP_
2021-06-02 14:15:39
99
原创 transition
1.vue过渡组件Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果语法格式: <transition name="xx"> </div></transition>1232.过渡的类名在进入/离开的过渡中，会有 6 个 class 切换：v-enter：进入过渡的开始状态v-enter-active：进入过渡生效时的状态v-enter-to：进入过渡的结束状态v-leave：离开过渡的开始状态v-leav
2021-06-02 07:51:53
140
原创 keep-alive
keep-alive概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性生命周期变化被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子:activated（组件激活时使用）deactivated（组价离开时调用）
2021-06-02 07:38:14
75
原创 js事件委托
事件委托事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处：提高性能，减少了事件绑定，从而减少内存占用案例<div id="div3"> <a href="#">a1</a><br> <a href="#">a2</a><br> <a href="#">a3</a><br&
2021-06-02 07:37:51
62
原创 对闭包的理解
闭包什么是闭包？闭包就是能够读取其他函数内部变量的函数。闭包是将函数内部和函数外部连接起来的桥梁。vue中的data就是一种闭包的形式。闭包作为回调函数，可以实现函数的复用如何产生闭包？函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系闭包的优缺点优点：1.长期驻留内存，可以缓存数据2.可以重复使用变量，不会造成变量污染 缺点：1.占内存、2.对捕获的变量是引用，不是复制3.父函数每调用一次会产生不同的闭包.闭包的应用场景①函数作为参数被传递②函数作为返回
2021-06-01 14:03:35
204
原创 generator
generatorGenerator 函数的定义语法上，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。function* func(){console.log(“one”);yield ‘1’;console.log(“two”);yield ‘2’;co
2021-06-01 08:10:16
57
原创 var、let、const区别
var、let、const区别在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面有介绍），ES6提出了使用let和const声明变量,弥补了ES5中var的缺点。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报Ref
2021-06-01 08:08:57
53
原创 作用域和自由变量
作用域和自由变量作用域定义：作用域就是一个变量和函数可以使用的范围，主要分为全局作用域和局部（函数）作用域作用域 （种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；自由变量自由变量的概念： 当前作用域没有定义的变量当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域
2021-06-01 08:03:38
103
原创 this、call、apply、bind
this/call/apply/bind1、在浏览器里，在全局范围内this 指向window对象；2、在函数中，this永远指向最后调用他的那个对象；3、构造函数中，this指向new出来的那个新的对象；4、call、apply、bind中的this被强绑定在指定的那个对象上；5、箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；6、apply、cal
2021-05-27 16:43:53
92
原创 原型与原型链
原型1.prototype每个函数都有一个prototype属性，被称为显示原型function Person(age){ this.age = age}Person.prototype.name="小花"var person1 = new Person()var person2 = new Person()console.log(person1) // 小花console.log(person2) // 小花上述例子中，函数的prototype指向了一个对象，这个对象就是调用
2021-05-27 08:08:24
65
原创 arguments
argumentsarguments对象不是一个真正的数组 ，它类似于数组，但除了length属性和索引元素之外没有任何数组属性。每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。arguments不是数组而是一个对象，但它和数组很相似，所以通常称为类数组对象，以后看到类数组其实就表示arguments。arguments对象不能显式的创建，它只有在函数开始时才可用。arguments特点1.arguments对象和Function是分
2021-05-25 20:52:52
133
原创 数据类型判断
数据类型判断1、typeof最基本的判断方式，该操作符返回一个表示数据类型的字符串，number、string、boolean、object、function、undefined、symbol‘undefined’ --未定义的变量或值‘boolean’ --布尔类型的变量或值‘string’ --字符串类型的变量或值‘number’ --数字类型的变量或值‘object’ --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)‘function’
2021-05-24 20:57:50
134
原创 js数据类型
js数据类型数据类型分为两种：基本数据类型和引用数据类型基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。基本数据类型保存在栈里引用数据类型： Object。包含Object、Array、 function、Date、RegExp。引用数据类型是保存在堆内存中的对象。基本数据类型的取值：Number:类型包含整
2021-05-24 20:44:30
57
原创 深拷贝
深拷贝什么是深拷贝？深拷贝：主要是将另一个对象的属性值拷贝过来之后，另一个对象的属性值并不受到影响，因为此时它自己在堆中开辟了自己的内存区域，不受外界干扰。浅拷贝：将原对象的引用直接赋给新对象，新对象只是原对象的一个引用，而不复制对象本身，新旧对象还是共享同一块内存一、堆栈和数据类型在js中，数据类型分为两种，基本类型和引用类型。基本类型指的是简单的数据段，而引用类型指的是那些可能由多个值构成的对象。js中有五种基本数据类型number,string,boolean,null,undefined，
2021-05-23 21:28:42
115
原创 vue-router
vue-router一、路由概念vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。router：译为路由器，我们可以理解为一个容器或者说它是一个管理者，举个常见的场景的例子：当用户在页面
2021-05-23 20:50:48
51
原创 vuex
Vuex1. 什么是Vuex?vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护2.Vuex由五部分组成state: 存放状态，例如你要存放的数据getters： 计算属性，可以通过this.$store.getters来获取存放在state里面的数据mutations： 改变状态，唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()a
2021-05-23 19:13:56
717
原创 Vue生命周期函数
Vue生命周期函数生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段分别有:实例创建前：beforeCreate()只有一些实例本身的事件和生命周期函数实例创建后：Created()最早使用data和methods中数据的钩子函数组件挂载前：beforeMount()指令已经解析完毕，内存中已经生成dom树组件挂载后：Mounted()dom渲染完毕页面和内存的数据已经同步视图更新前：beforeUptate()当data的数据发生改变
2021-05-20 21:22:49
291
原创 Vue组件通讯
Vue组件通讯1.父传子：在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}父组件中代码： <template> <cateTab :content="item.content"></cateTab> </template> <script> import cateTab
2021-05-20 08:29:45
81
原创 优购商城项目讲解
优购商城项目讲解1.首先创建项目，然后在微信公众平台官网配置白名单2.在全局的app.json里面配置需要的路由"pages":[ "pages/index/index", "pages/category/category", "pages/goods_list/goods_list", "pages/goods_detail/goods_detail", "pages/cart/cart", "pages/collect/collect",
2021-05-17 21:54:36
1008
原创 微信发布流程
微信发布流程发布流程，大概分三个步骤1.上传代码2.提交审核3.发布版本注意：发布之前，配置服务器域名白名单1.上传代码代码编写完毕后，点击上传按钮输入版本号，项目备注，点击上传2.提交审核进入微信小程序的官网:https://mp.weixin.qq.com1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写2.填写小程序基本资料3.添加开发者4.添加成员5.再次点击提交审核，会出现以下弹框点击进行下一步输
2021-05-17 10:39:37
426
原创 小程序支付流程
小程序支付流程首先我们肯定是判断用户有没登录，一般都是判断本地有没有token。 // 点击 支付 async handleOrderPay() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/auth/index
2021-05-16 19:27:58
61
原创 小程序如何写收藏、分享、客服功能
小程序如何写收藏、分享、客服功能首先需要两个不同颜色的收藏icon-font图标，来显示是否加入收藏，然后声明一个变量来判断状态true或者false然后给收藏一个点击事件，获取本地存储中的商品收藏数组shouc(){ let iscollect=false //获取本地存储中的商品收藏数组 let shopca=wx.getStorageSync('shopca')||[] //用findIndex方法来判断是否有被收藏过 let index=shopca.
2021-05-14 17:09:06
169
原创 数组方法
数组方法1. some();判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。2. every();判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。3. filter();“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。4. map();指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。5. forEach();对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是fun
2021-05-14 14:37:34
428
原创 小程序授权登录流程
小程序授权登录流程实现登录首先要和微信建立连接，然后获取用户的信息，进行授权登录点击button按钮进行申请，小程序的button按钮有内置的属性，点击该按钮时，会返回获取到的用户信息。然后设置button按钮的open-type属性然后就会和微信建立连接，跳出授权登录的页面然后给点击事件使用console.log(e),然后就可以获取到detail参数，里面就是获取到的用户信息。...
2021-05-13 20:56:28
602
原创 小程序获取收货地址流程
小程序获取收货地址流程wx.chooseAddress()是小程序中有自己内置的api，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。返回参数：使用console.log(result)输出就可以看到地址的参数然后我们取需要的参数，存入本地，获取地址时就可以使用这些参数进行渲染：...
2021-05-13 20:33:24
168
原创 如何使用Promise封装wx.request()
如何使用Promise封装wx.request()1.目录结构在根目录下创建request目录及api.js文件fatch.js文件以及http.js文件在api.js文件中统一管理，请求的url地址在fetch.js文件中用Promise对wx.request()进行封装在http.js文件中，设置相应baseUrl,引入fetch中封装好的Promise请求，引用封装好的api文件，设置对应的方法的方法并导出;在全局app.js中导入http，注册到根组件在具体页面中导入，并使
2021-05-13 19:58:55
87
原创 async、await
async、awaitasync和await是一种同步的写法，执行异步的操作特点1.async的用法，把它放在普通函数前面，这样普通函数就变成了异步函数。2.异步async的调用方法和普通函数的一样。3.async必须搭配await关键字使用是异步的方法4.异步async函数返回的是一个promise对象优点1.同步代码编写方式：Promise使用then函数进行链式调用，async和await是用同步的方式书写异步的代码，从上到下，顺序执行，更符合代码书写习惯。2.多个参数传递：Prom
2021-05-07 20:51:54
103
原创 promise
promise1.什么是promise？promise是es6中处理异步操作的，可以用来解决异步回调promise是一个构造函数，这个构造函数放一个回调函数作为参数，这个回调函数中放的是异步的操作，promise执行时需要一定的时间的，一开始promise是一个pending(等待)初始化状态，到一定的条件就会变成fulfilled(成功)状态或者是reject(失败)状态。在成功的时候执行的是resolve回调函数，其实执行的是.then里面的回调，在失败的时候执行的是reject回调函数，其实执
2021-05-07 20:30:33
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人