- 博客(44)
- 收藏
- 关注
RSS订阅原创 JS 冒泡排序 数组去重
/** 冒泡排序 * 是一种非常基础的排序方法，其原理就是从把一个数组中的每一个数从前往后依次进行比较，然后根据大小交换位置 ，每一轮的比较都确定出一个当轮比较的最大值，最终实现数组的大小排序。下面我们用JS实现冒泡排序。**/ var arr = [4, 23, 100, 9, 7, 49, 36, 57]; console.log("原始数据：" + arr); for (var i = 0; i < arr.length - 1; i++) { //确定轮.
2021-08-19 16:50:42
279
原创 搭建自己的小服务器
用node搭建小服务器首先得有一个自己的项目 用 npm run build 打包在vue_shop同级创建一个文件夹vue_shop_server存放node服务器使用终端打开vue_shop_server文件夹，输入命令npm init -y初始化包之后，输入命令npm i express -S打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中在vue_shop_server文件夹中创建app.js文件,编写代码如下：const express =
2021-06-22 21:14:57
2194
原创 项目中修改element-ui的默认样式
项目中修改element-ui的默认样式新建全局样式表新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：import "./assets/style/global.css";在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。通过内联样式 或者 绑定类样式覆盖默认样式通过内联
2021-06-11 07:59:48
377
原创 Element-UI中el-form 表单如何校验
Element-UIElement-UI官方表单 简单验证<el-form > <el-form-item> <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item></el-form>第一种：在el-form-item单个添加验证这种方式适用于需要个
2021-06-07 21:46:22
4665
1
原创 Windows 安装 aginx
Windows 安装 aginx下载地址:http://nginx.org/en/download.html 2) 解压到指定文件夹(不能有中文)3) 控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。4) nginx 命令（1）start nginx 开启nginx服务（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息（3
2021-06-07 11:05:44
155
转载 webpack打包优化
webpack打包优化vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域v使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端
2021-06-06 23:11:37
247
原创 vant UI 按需引入
vantUI安装: cnpm install vant -save官网:vantUI安装插件npm i babel-plugin-import -D在.babelrc中配置plugins（插件）"plugins": [ "transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}] ]创建一个commpent文件夹在里面床架另一个vant.jsi
2021-06-03 23:19:25
119
转载 axios拦截，api统一管理
axios封装1、项目路径下，引入axios、qs依赖npm install axiosnpm install qs2、在项目的src路径下新建一个commJs文件夹，在commJs文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里request.jsimport axios from 'axios';import QS from 'qs';//自动切换环境axios.defaults.baseURL = process.
2021-06-03 23:09:35
54
转载 项目创建 多环境变量配置
多环境变量配置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", "stage": "v
2021-06-03 23:03:13
125
转载 去哪儿项目搭建
技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack创建项目vue create 项目名第一步 选择安装方式,我们选择手动安装第二步 我们安转需要的插件 Babel,Router路由 vuex第三步 是否选择历史路由模式 , 我们选择 N(是大写的N) no 的意思第四步 配置文件走默认的第五步 是否配置保存 N(大写的n)然后我们等着他下载完成
2021-06-02 21:35:08
54
原创 vue transition
transition介绍keep-alive与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)类名介绍v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下
2021-06-01 20:31:00
70
原创 vue keep-alive讲解
keep-alive作用keep-alive是Vue提供给我们一个内置组件，作用：保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。组件使用keep-alive以后会新增两个生命周期 actived() deactived(),有两个参数 include - 包裹的组件名会被缓存 exclude 包裹的组件名都不会被缓存<keep-alive> 与 <transition>
2021-06-01 20:09:15
85
原创 js 事件委托
事件委托事件冒泡：JS中当出发某些具有冒泡性质的事件是，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应，这就是事件冒泡。事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。为什么要用事件委托为什么要用事件委托：一般来说，dom需要有事件处理程序，
2021-05-30 22:04:47
117
转载 js 闭包
闭包概念闭包函数:声明在一个函数中的函数,叫做闭包闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回特点让外部访问函数内部变量成为可能;局部变量会常驻扎在内存中;可以避免使用全局变量,防止全局变量污染;会造成内存泄露用途它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。使用闭包的注意点由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题
2021-05-30 21:48:50
65
原创 var let const 区别
var let const 区别var var a = 1;// var a;//不会报错console.log('函数外var定义a：' + a);//可以输出a=1function change(){a = 4;console.log('函数内var定义a：' + a);//可以输出a=4}change();console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4let 是块级作用域，函数内部使用let定义后，对函数外部无影响。let
2021-05-30 21:39:17
38
转载 JavaScript 作用域、作用域链、变量提升
JavaScript 作用域、作用域链、变量提升作用域、作用域链、自由变量和变量提升作用域作用域的定义：所谓作用域就是一个变量可以使用的范围作用域又分多种全局作用域函数作用域块级作用域（ES6新增）js中首先有一个最外层的作用域，称为全局作用域js中可以可以通过函数来创建一个独立的作用域，称为函数作用域，函数可以嵌套，所以作用域也可以嵌套示例：let a = 0function fn1(){ let a1 = 100 function fn2(){ let a2 =
2021-05-27 21:45:42
96
原创 JavaScript this指向问题、new的过程
JavaScript this指向问题、new的过程this是Javascript语言的一个关键字随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。1.普通函数调用时this 指向 windowfunction fn() { console.log(this); // window } fn(); // window.fn（),此处默认省略window2.构造函数调用this指向实例对象 function P
2021-05-27 21:25:48
145
1
原创 JavaScript call/apply/bind
JavaScript call/apply/bind的六种关系在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；apply、cal
2021-05-26 21:22:31
65
转载 JavaScript 常用的数组方法
JavaScript 常用的数组方法es4toString 把数组转换为数组值（逗号分隔）的字符串。var fruits = ["1", "2", "3", "4"];console.log(fruits.toString()); //输出结果 1,2,3,4join 方法也可将所有数组元素结合为一个字符串。var fruits = ["1", "2", "3", "4"];console.log(fruits.join(*)); //输出结果 1*2*3*4pop 方法从数组中删
2021-05-25 21:58:07
156
7
原创 JavaScript arguments 伪数组
arguments 伪数组在Javascript中什么是伪数组？伪数组（类数组）：不能调用数组方法 比如 push unshift有length只能在函数中调用 (箭头函数没有)是函数内置的,不勇声明arguments 什么地方用在不确定函数有多少形参的时候用伪数组转数组的方式let arr; arr = Array.prototype.slice.call(arguments) arr = [].slice.call(arguments) arr = Arr
2021-05-25 21:29:20
92
转载 javaScript 常用的基本数据类型判断
javaScript 基本数据类型判断typeof返回数据类型，包含这7种： number、boolean、symbol、string、object、undefined、function。typeof null 返回类型错误，返回object引用类型，除了function返回function类型外，其他均返回object。其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端
2021-05-24 21:27:08
55
原创 JavaScript 数据类型
JavaScript 数据类型基本数据类型字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol、bigint。引用数据类型对象(Object)、数组(Array)、函数(Function)。基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此，其值存储在堆(
2021-05-24 21:19:59
34
原创 深拷贝
深拷贝什么是深拷贝浅拷贝就比如像引用类型，而深拷贝就比如值类型。浅拷贝就是拷贝对象的引用，而不深层次的拷贝对象的值，多个对象指向堆内存中的同一对象，，任何一个修改都会是使得所有对象的值被修改，因为它们公用一条数据。// 浅拷贝var a = {c:1}var b = aconsole.log(b);//{c:1}b.c = 2console.log(b)//{c:2}console.log(a)//{c:2}浅拷贝是一个传址,也就是把a的值赋给b的时候同时也把a的址赋给了b，当b（
2021-05-24 08:06:56
60
原创 vue-router
vue-router1 .安装npm install vue-router --save在mian.js中引入在router.js中两种方式1.hash ---- 利用URL中的hash（“#”）2.利用History interface在 HTML5中新增的方法, 详情点击默认是hash跳转方式声明式编程式reouter-link :to="…" 注：标签router.push(…)声明式这种只需要跳转页面，不需要添加验证方法的情况，可以使用 来实
2021-05-23 22:00:17
35
原创 vuex 基本用法
vuexvuex的概念Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex安装步骤vuex安装步骤vuex模块1、state 所有的数据都存储在state中 state是一个对象2、mutations 可以直接操作state中的数据3、actions 只能调用mutations的方法4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作5、modules 将仓库
2021-05-23 21:10:37
76
原创 vue 生命周期
vue 生命周期beforeCreated 创建之前表示实例完全被创建出来之前vue实例的挂载元素和数据对象data 都为 undefined 还未初始化create 创建之后数据对象data已经存在 可以调用methods中的方法 操作data中的数据 但dom未生成beforeMount 挂在前vue实例已经加载完成 数据对象data和节点都已经初始化,挂载之前为虚拟的dom节点,模板已经在内存中编辑完成,但是尚未把模板渲染到页面中去mounted 挂载后vue 实例挂在完成 虚拟do
2021-05-21 08:09:57
74
原创 vue 组件通信 (子传父 , 父传子 , 兄弟通信)
vue组件通信1.子传父在父组件中注册子组件父组件的template中使用子组件标签，并在子组件标签中添加自定义属性，把要传给子组件的值赋给这个属性在子组件中使用props来接收这个属性及传来的值父组件:子组件：子传父在子组件中绑定一个点击事件在该点击事件的函数中使用emit，将传给父组件的参数放在emit的第二个参数中在父组件中的子组件标签中绑定监听该自定义事件，并添加该事件的处理方法父组件:子组件:兄弟组件创建一个中央事件总线eventBus.js,只需在里
2021-05-19 22:02:18
156
1
原创 uni-app vuex的安装和使用
1.在本项目中下载vuexcnpm install vuex -save2.创建store 目录3.在index.js中写4.在main.js中导入5.使用
2021-05-19 08:47:55
2062
1
原创 uniapp(uni.request Promise简单封装)
uni.request Promise简单封装1.首先创建 requset 文件夹 在里面写上 index.js2.封装3.在全局引用在mian.js中引用4.使用
2021-05-19 07:58:19
203
原创 小程序 优选商城 项目讲解
优选商城参考文档接口地址微信开发文档阿里图标库首页轮播图导航栏和楼层分类分类主要是用微信小程序提供的滚动组件做的 scroll-view 来完成的左边是分类大的分类 右边是小分类当点击不同的分类时会获取当前的下标的子类数据显示到右边菜单栏当点击右边分类时会把当前的cat_id传到商品列表中去获取当前cat_id下的商品信息点击商品会把当前的商品的goods_id传到详情页面获取当前商品的详细信息收藏首先在data中定义控制收藏高亮的属性 类型为Boolean 值 为tr
2021-05-17 21:56:00
1765
原创 小程序 发布
发布注意：发布之前，配置服务器域名白名单第一步打开项目在右上角有个上传点击上传后点击确定按钮填好信息点击点击上传会提示上传成功第二步点开微信公众平台 https://mp.weixin.qq.com 进行登录登录成功后 找到管理下面的版本管理 可以看到有我们刚才提交的项目 点击提交审核第一次提交都会填写信息 我们点击前往填写跳到首页点击填写小程序基本信息填写小程序基本信息 最后点击提交提交之后我们可以选择添加开发者点击编辑后点击添加开发人员添加完成
2021-05-17 10:30:39
61
原创 小程序 获取授权
首先有个获取授权的button按钮 最主要的是button的 open-type=“getUserInfo” 是小程序自带的一个属性 可查阅微信小程序官方设置点击事件获取到必要的信息
2021-05-17 01:13:48
565
原创 小程序 支付
支付1 先判断缓存中有没有token2 没有 跳转到授权页面 进行获取token3 有token 。。。4 创建订单 获取订单编号5 已经完成了微信支付6 手动删除缓存中 已经被选中了的商品7 删除后的购物车数据 填充回缓存8 再跳转页面 ...
2021-05-17 00:48:21
34
原创 购物车(获取地址)
购物车获取地址首先在data中定义一个数组 Address 判断数组的长度是否为零 如果为零 就显示 获取地址按钮 如果不为零 就显示当前地址。点击获取地址按钮 给绑定个bindtap事件(handleChooseAddress) 然后在事件中调用微信小程序自带的 wx.chooseAddress() 来获取地址信息获取到信息之后把必要的信息给存下来放到本地存储当中去当存入本地中去我们就可以获取本地存储的数据显示到页面当中去在页面中判断data中的Address长度是否为零 如果为零 就显
2021-05-17 00:11:03
136
原创 小程序之收藏,分享,客服
收藏功能收藏前在收藏的标签上设置点击事件 并且在js文件中设置一个 Collent = false 来控制收藏图标是否高亮 Collent=true 就是收藏后点击shoucang时 通过wx.getStorageSync 来看本地存储里是否有收藏的商品 如果没有 就创建一个空的数组 然后判断当前被收藏的商品是否被收藏过 通过 findIndex 来判断数组里是否有相等的商品如果有就返回该商品的下标 把Collent的值改为true 通过push把被收藏的商品添加到本地储存里 如果有 就把Coll
2021-05-16 23:44:25
116
原创 小程序 (下拉刷新,上拉加载)
下拉刷新下拉组件是 <scroll-view></scroll-view> 注:在使用scroll-x 的时候 必须要加宽度 在使用scroll-y 的时候必须给高度上拉刷新页面在微信小程序中有一个自带的函数 叫做 wx.onPullDownRefresh 可以通过这个函数来操作上拉刷新然后在当前的json文件中设定上拉的形状和是否刷新该页面json文件js文件中重新调用需要刷新的数据 注:把当前页改为第一页;js文件下拉刷新首先得有 当前页 和 每页
2021-05-14 17:17:21
82
原创 promise generator aysnc/await
promise: 比较简单，也是最常用的 主要是用来解决异步操作 是一个对象promise对象一共有三个状态等待实现(resolve)失败(reject)从创建开始，promise对象的状态就是等待的状态，直到resolve和reject被调用当promise被变成resolve时，会触发then()里的函数当promise被变成reject时，会触发catch()里的函数 (也可以将err=>{...}写在then中，当做then的第二个形参传入，在reject时也会触发)..
2021-05-07 21:37:14
55
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人