- 博客(33)
- 收藏
- 关注
RSS订阅原创 elemeng-ui 中el-form 表单如何校验
elemeng-ui 中el-form 表单如何校验zhangxlY~2021-06-07 18:50:023收藏版权elemeng-ui 中el-form 表单如何校验：表单有一个rules属性,它的值是一个数组,里边每一项是一个对象包含着每一条校验规则:trigger:'blur' 是指当表单失去焦点时开始校验；message是当校验失败时的提示信息；rules的值也可以是变量,在data中进行赋值：举例是：...
2021-06-08 07:56:31
243
原创 Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）
Vue项目使用Nginx服务器配置(路由history模式白屏如何处理):第一步:先下载Nginx;第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的):第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置：找到 location / {} 选项,在里面写：...
2021-06-08 07:54:39
286
原创 下安装Nginx
前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的 它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：http://nginx.org/en/download.html（Ngi.
2021-06-07 11:22:06
115
转载 webpack打包
webpack打包优化①第一步:先配置路由懒加载：在配置路由时,可以使用路由懒加载,当切换到这个路由时才会加载这个页面。我们可以在路由规则中配置如下:{ path: '/', // 路由 name: 'Home', // 路由名称 component: () => import("@/views/Home.vue") // 使用这种方式来实现路由懒加载 }②第二步:关闭生产环境下的SourceMap映射文件:...
2021-06-06 20:39:56
100
原创 vant-ui按需引入
.安装vant-ui插件#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -D2.在babel.config.js中添加配置plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]3.创
2021-06-03 15:57:09
97
转载 Vue axios接口封装和api管理
axios拦截为什么要进行接口封装？axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。每个组件中走一遍axios流程，很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。使用步骤安装...
2021-06-03 15:54:16
83
原创 transition
ransition①transition：transition是双标签,包裹需要过渡的元素/组件,transition只会把过渡的效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中: ②transition元素的属性:(1)name -string，用于自动生成CSS过度类名。例如：name=“fade” 将自动扩展为 .fade-enter ，.fade-enter-active，等。默认类名为 “v”。(2)appear -b...
2021-06-03 15:45:13
233
原创 多环境变量配置
多环境变量配置①在项目的根目录下找到package.json文件,在scripts中配置:以上根据不同的启动方式来启用不同的域。②之后在项目的根目录下创建3个文件(开发环境、生产环境和测试环境)：(1).env.development // 开发环境(2).env.production // 生产环境(3).env.testing // 测试环境之后,在.env.development 文件里写 NODE_ENV = “deve..
2021-06-03 15:42:55
63
原创 移动端项目(去哪儿)项目开发流程
一、确定项目技术栈技术栈： Vue、 vue-cli、 vue-router、 Vuex、 axios、 vant、 rem、 scss、 webpack、描述： vue.js、 vue脚手架、 vue路由、 vue状态管理工具、 异步请求数据、移动端框架、自适应布局、css扩展语言、 打包工具、二、搭建项目...
2021-06-03 15:28:54
101
原创 keep-alive
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时
2021-06-01 16:49:36
56
原创 闭包的概念
闭包对于闭包,简单的理解就是:函数中套了一个函数,内层函数可以访问外层函数中的变量,就形成了闭包。①闭包的优点:这个变量在外层函数执行完之后还不会被销毁,因为它被别的函数使用了;缺点:闭包会使函数中的变量都被保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页的性能问题,可能会导致内存泄露(解决方法:在退出函数之前，将不使用的变量全部删除)。②闭包的定义:③闭包的作用：(1)可以读取函数内部的变量;(2)让这些变量的值始终保存在...
2021-06-01 07:57:59
215
原创 var let const 区别
①使用var定义的变量,没有块的概念,它可以跨块访问,不可以跨函数访问；②使用let定义的变量,只可以在块作用域里访问,不可以跨块访问,也不可以跨函数访问;③使用const定义的常量,是永远不变的量,使用时必须初始化(就是必须赋值),只可以在块作用域里访问,但不能修改,它是不可以改变,不可以重复声明的:<script type="text/javascript"> // 块作用域 { var a = 1; let b = 2; ...
2021-06-01 07:55:38
59
1
原创 Vue事件委托
Vue事件委托①事件委托:是把子元素的事件委托给父元素去处理;②事件委托的好处:可以减少事件注册;③使用事件委托:事件委托一般都是使用在列表里的,以下用列表举例：(1)首先在每一个循环的标签上动态绑定一个自定义属性;...
2021-06-01 07:54:08
157
转载 argument
argument在了解arguments对象之前先看一下javascript的一些功能：Javascript并没有重载函数的功能,而arguments对象能够模拟重载。Javascrip中每个函数都会有一个arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素;arguments.length为函数实参个数，arguments.callee引用函数自身;arguments他的特性和使用方法:特性:arguments
2021-05-26 07:42:15
119
原创 js数据类型
js数据类型①基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol(es6)、基本数据类型，又称值类型。②引用数据类型:Object。包含了Object、Array、 function、Date、RegExp。栈堆存储(1)值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。值类型在栈上分配内存，但值类型的..
2021-05-25 08:00:11
93
原创 数据类型判断
数据类型判断① typeof:typeof {} // objecttypeof [1,2] // object判断数据类型,返回表示数据类型的字符串(返回结果只能包括number,boolean,string,function,object,undefined);使用typeof判断变量是否存在（如if(typeof a!="undefined"){...});Typeof 运算符的问题是无论引用的对象是什么类型,它都返回object;②instanceof：判断已知...
2021-05-25 07:58:02
166
原创 Vue-router (①两种路由模式、②编程式/组件式、③如何传参(优缺点))
Vue-router (①两种路由模式、②编程式/组件式、如何传参(优缺点))Vue路由：路由的基础用法：1 .安装npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews fro...
2021-05-24 08:04:35
137
原创 深拷贝
深拷贝深拷贝:创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象。为什么要使用深拷贝? 我们希望在改变新的数组（对象）的时候，不改变原数组（对象)。在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。(1)当我们对数据进行操作的时候，会发生两种情况基本数据类型
2021-05-24 07:42:10
50
原创 Vuex(概念、几部分组成、map高级语法、数据持久化)
Vuex(概念、几部分组成、map高级语法、数据持久化、模块化管理数据(modules))①概念：Vuex是一个专门为vue.js应用程序开发的状态管理模式；是用来存放公共数据的；②几部分组成：有五部分组成，分别是:(1)state: 数据:(2)actions:异步操作;(3)mutations:唯一一个可以修改state数据的;(4)getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存);(5)modules:模块化管理store(仓库),每个模块拥有自己的 st..
2021-05-24 07:37:22
140
原创 Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序）
Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序）Vue生命周期函数有四个阶段：①实例创建之前/之后、②组件挂载之前/之后、③数据改变视图更新之前/之后、④实例销毁之前/之后、每个钩子函数可以做什么：①实例创建之前/之后：beforeCreate(实例创建之前)：每个页面都是一个Vue实例,这时实例还没创建,所以data还不知道,也不能用watch监听, 这时data和methods的钩子函数都不能使用;created(实例创建之后)：实例已经创建完，可以得到data,调用w.
2021-05-21 07:54:06
1424
原创 uni-app的(项目创建、tabbar配置、运行)
uni-app:①项目创建、②tabbar配置、③运行)uni-app简介：uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app官网：https://uniapp.dcloud.io/①项目创建(1)开发者需先下载安装 HBuilderX 下载地址:https://www.dcloud.io/hbuilderx.h...
2021-05-20 07:58:54
170
原创 Vue的组件通信(父传子、子传父、兄弟组件通信)
Vue的组件通信：①父传子、②子传父、③兄弟组件通信①父传子父组件是通过props:['自定义属性名']给子组件通信的(子组件通过props:['自定义属性名']来接收数据)：(1)父组件parent.vue代码是： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组.
2021-05-20 07:57:30
115
原创 uni.requet()封装
uni.requet()封装?①uni-app题拱了uni.requet()方法，发起网络请求；③uni.request()未封装VUE组件中的使用；③uniapp封装网络请求；①uni-app题拱了uni.requet()方法，发起网络请求：uni.request({ url: 'https://ceshi2.dishait.cn/api/v1/list', //仅为示例，并非真实接口地址。 data: { text: 'uni.request'
2021-05-20 07:53:38
110
原创 小程序支付流程
支付 <view class="order_pay_wrap" bindtap="handleOrderPay"> 支付({{totalNum}}) </view> async handleOrderPay() { try {// 判断缓存中有没有tokenconst token = wx.getStorageSync("token");没有用户就跳转 if (token) { wx...
2021-05-17 20:58:04
41
原创 小程序发布流程
发布流程有三部分1、上传代码2、提交审核3、发布版本1、上传代码输入版本号，项目备注,点击上传上传成后有提示，上传成功到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填写小程序基本资料点击填写填写基本信息添加开发者 、点击编辑点击添加成员输入微信号，设置权限，点击确认添加，手机扫描二维码，确认添加。添加成功、添
2021-05-17 20:49:46
51
原创 小程序下拉刷新，上拉加载更多
index.json{ "enablePullDownRefresh": true, "onPullDownRefresh": true, "onReachBottom": true}如果看不到下拉动画，需要在 app.json 中设置"window": { "backgroundTextStyle": "dark"},接下来就是写 js 代码了下拉刷新/** * 下拉刷新恢复初始化 */ onPullDow..
2021-05-16 20:02:56
43
原创 如何使用Promise封装wx.request()
在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={//开发环境Dev:{“BaseUrl”:“https://www.develep.com”},//测试环境Test:{“BaseUrl”:“https://www.test.com”},//生产环境Prod:{“BaseUrl”: “https://api.douban.com”}}
2021-05-16 20:00:41
167
原创 小程序如何写收藏、分享、客服功能
收藏获取缓存中的商品收藏的数组 (本地存储里收藏的数据)页面onShow的时候 加载缓存中的商品收藏的数据判断当前商品是不是被收藏 点击商品收藏按钮判断该商品是否存在于缓存数组中已经存在 就把该商品删除没有存在 把商品添加到收藏数组中 存入到缓存中即可分享<view>分享</view><button open-type="share></button>客服<view>客服<...
2021-05-16 19:58:15
48
原创 小程序获取收货地址流程
页面中的请求地址事件 <view class="address_btn" wx:if="{{!address.userName}}" > <button bindtap="handleChooseAddress" type="primary" plain >获取收货地址</button> </view>JS页面实现async handleChooseAddress() { try { // 1 获取 权限状态...
2021-05-16 19:55:17
48
原创 小程序授权登陆流程
// 1 获取用户信息const { encryptedData, rawData, iv, signature } = e.detail;1// 2 获取小程序登录成功后的code const loginParams={ encryptedData, rawData, iv, signature ,code};13 发送请求 获取用户的tokenconst {token}=await request({url:"/users/wxlogin",data:loginParams,m..
2021-05-16 19:54:04
77
原创 小程序支付流程
支付 <view class="order_pay_wrap" bindtap="handleOrderPay" > 支付({{totalNum}}) </view> async handleOrderPay() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token");没有用户就跳转 // 2 判断 ...
2021-05-16 19:50:44
119
原创 数组的方法
①some():检测数组中元素是否满足指定条件，会依次执行数组的每个元素。若有一个元素满足条件，表达式将返回true,剩余的元素不会再执行检测，若没有满足条件的元素，就返回false。some()不会检测空数组以及不会改变原始数组。②every():检测数组所有元素是否都符合指定条件，使用指定函数检测数组中的所有元素。若数组中检测出有一个元素不满足，整个表达式返回false,剩下元素不再进行检测，若元素都满足条件，就返回true。every()不会检测空数组，也不会改变原始数组。③filter.
2021-05-14 14:21:43
56
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人