- 博客(72)
- 收藏
- 关注
RSS订阅原创 JS获取URL参数和ajax请求
// 获取url参数function getUrlVars() { var vars = {}; var parts = decodeURI(window.location.href).replace(/[?&]+([^=&]+)=([^&#]*)/gi, function(m,key,value) { vars[key] = value; } ); return vars;}var data = getUrlVars()// 浏览器不刷新时执行if
2021-07-30 11:26:40
437
原创 vue中导出excel表格(支持导出图片)
//安装插件npm install js-table2excel//引入插件import table2excel from 'js-table2excel'//tableData数据tableData: [ { account: "15325833437" avatar: "https://img.png" registerDate: 1626788156000 }]//支持导出图片和类型转换onBatchExport(){ //导出按钮 const column =
2021-07-23 14:04:26
2699
2
原创 vue中实现倒计时功能
//24小时内倒计时countdown() { const end = 1627094160 * 1000 //订单创建时间毫秒数 const now = new Date().getTime() //当前时间毫秒数 const pastTime = now - end //过去的时间，越来越久 const h_24 = 24 * 60 * 60 * 1000 //倒计时24小时毫秒数 const differ = h_24 - pastTime //剩余的时间，越来越少 let da
2021-07-23 11:33:54
772
原创 vue-axios传递数组参数
直接放在对象中传递数组，传递的参数格式如下：但是这样的话后台是取不到值的，我们需要把数组变成如下这种格式：test:111test:222get / delete请求axios.get(url, { params: { test: [1,2,3], type: 1 }, paramsSerializer: params => { return qs.stringify(params, { indices: false }) }})
2021-07-01 10:50:28
1904
原创 修改element-ui中的样式
1.去掉scopedscoped会把样式局限在当前页面，无法覆盖element-ui的原有样式。2.使用 /deep//*.homePage 为我们要修改组件类名的父级组件样式类名*//*.el-main 为我们要修改组件的样式*/.homePage /deep/ .el-main { padding: 0;}/*或者*//deep/ .el-form-item__content{ margin-left: 140px !important;}...
2021-04-14 10:32:38
794
原创 微信小程序扫码功能
1.微信扫一扫 (wx.scanCode)<!-- wxml --><button bindtap="getQRCode">微信扫一扫</button><view>{{ scanCodeMsg }}</view>// jsPage({ data:{ scanCodeMsg:'' }, getQRCode: function(){ var _this = this; wx.scanCode({ //扫描
2021-01-07 17:59:43
724
原创 vue+elementui 封装表单自定义校验
<!-- 子组件 --><template> <div> <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm"> <el-form-item label="选择设备故障:" prop="region1" style="display: inli
2020-12-30 19:01:28
560
原创 vue 实现点击发送验证码出现倒计时
<template> <div> <el-button :disabled="disabled" @click="sendcode">{{btntxt}}</el-button> </div></template> <script> export default { data() { return { disabled:false, time:5, btntxt:"发送验
2020-12-30 18:43:01
393
原创 vue中实现点击按钮滚动到页面对应位置（使用c3平滑属性实现）
<template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2)">按钮二</span> <span @click="Submit(3)">按钮三</span> <span @click="Submit(4)">按钮四<
2020-12-29 18:45:52
1168
转载 Vue中封装返回顶部功能
<template> <div> <div @click="backtop" class="fh" v-show="isShow">返回顶部</div> </div></template><script>export default { data() { return { isShow: false, }; }, mounted() { this.lis
2020-12-25 18:35:00
146
1
原创 vue中动态切换title、description、keywords
1.在router里面index.js文件夹中 const routes = [ { path: '/', name: 'Home', component: () => import('@/views/home/index.vue'), meta:{ title:'百邦Apple授权服务商-中国售后服务领域上市公司', content:{ keywords:'首页keywords', description:'首页description', }
2020-12-25 14:37:14
990
原创 vue中全局引入scss（mixin）
使用 sass-resources-loader 工具cnpm install sass-resources-loader在 src/assets/style 目录中新建一个 mixin.scss 文件@mixin border-radius ($radius: .10rem) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius;
2020-12-25 14:17:34
441
原创 Vue数据/数组对象改变视图不更新
产生原因：Vue2 现在是通过Object.defineProerty来进行数据的双向数据绑定Object.defineProerty目前主要有三个问题不能监听数组的变化必须遍历对象的每个属性必须深层遍历嵌套的对象Vue2 实现响应式渲染更新原理，在于监听data里的数据，但针对于对象、数组这类结构较深的数据无法完全监测解决方案：1.使用$set调用方法：Vue.set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具
2020-10-14 21:51:54
652
1
原创 vue 项目优化+项目上线
项目优化项目优化策略1.生成打包报告2.第三方库启用 CDN3.Element-UI 组件按需加载4.路由懒加载5.首页内容定制1.生成打包报告打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build --report② 通过可视化的UI面板直
2020-09-24 22:00:20
284
原创 Vue 虚拟DOM和Diff算法
什么是虚拟DOM所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么使用虚拟DOM虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重排自然会
2020-09-20 20:53:40
421
原创 Vue 中的过滤器（filter）
vue中的过滤器分为两种：局部过滤器和全局过滤器过滤器就是一个数据经过了这个过滤器之后出来另一样东西全局过滤器全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义，它定义好了之后，在所有的组件内都可以使用.// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(
2020-09-20 20:15:05
332
原创 Vue 中自定义指令及使用场景（directive）
背景除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。创建自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(
2020-09-20 19:24:45
560
原创 Vue 组件封装
你在项目中是如何封装组件的？我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个common目录和一个components目录，views目录中放页面级的组件，common目录中放公共组件（如：head（公共头组件），foot（公共底部组件）等），components目录中放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立
2020-09-17 23:50:00
495
原创 Vue 修饰符
事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页
2020-09-17 22:00:09
179
原创 js 事件模型
事件模型JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。观察者模式又叫做发布订阅者模式(Publish/Subscribe)，它可以让多个观察者对象同时监听某一个主题对象，这个主题对象的状态变化时会通知所有的订阅者，使得它们能够做出反应。JS的事件模型就是一种观察者模式的体现，当对应的事件被触发时，监听该事件的所有监听函数都会被调用。原始事件模型（DOM
2020-09-16 23:52:53
126
原创 Vue 双向数据绑定原理
原理1、vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变2、vue实现双向数据绑定的核心是Object.defineProperty()方法3、Object.defineProperty(obj
2020-09-16 23:13:40
9440
2
原创 vue 常用指令
vue常用指令1.v-model 多用于表单元素实现双向数据绑定2.v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json3.v-show 显示内容 ,通过display=block/none来控制元素隐藏出现4.v-hide 隐藏内容 同上5.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）6.v-else-if 必须和 v-if 连用7.v-else 必须和 v-if 连用 不能单独使用
2020-09-16 21:44:27
91
原创 Vue生命周期的执行过程
1、创建vue实例，new Vue()2、在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数；3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；4、以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML编译过程分三种情况：（1）实例内部有template属性，直接调用，然后调用render函数去渲染（2）没有该属性
2020-09-15 22:00:15
172
原创 vue中 v-if 和 v-show 的区别
相同点都可以动态控制dom元素的显示隐藏区别v-if：控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show：控制DOM的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的性能对比v-if 有更高的切换消耗v-show 有更高的初始渲染消耗使用场景v-if 适合不频繁切换的场景v-show 适合频繁切换的场景、商品分类选项卡例如v-if：在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据
2020-09-15 21:53:10
129
原创 js 设计模式
一、单例模式1.定义保证一个类仅有一个实例，并提供一个访问它的全局访问点2.核心确保只有一个实例，并提供全局访问3.实现在vue脚手架项目开发中，我们需要对axios进行请求拦截，响应拦截，多次调用封装好的axios实例也仅设置一次，封装后的axios就是一个单例模式。以下是vue-cli4中axios单例模式的案例：一般我会在项目的src目录中，新建一个 network 文件夹，然后在里面新建一个 http.js 和一个 api.js 文件。http.js文件用来封装我们的axios，ap
2020-09-15 21:37:02
91
原创 axios封装和api接口管理
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库axios封装步骤1.安装axiosnpm install axios; //
2020-09-15 21:14:08
170
原创 js 事件绑定、事件监听
事件绑定有三种常用的方法：1.在DOM元素中直接绑定2.在 javascript 代码中绑定3.绑定事件监听函数1.在DOM中直接绑定事件我们可以在DOM元素上直接绑定事件<input type='button' value='click me' οnclick='hello()'><script>function hello(){alert('hello world!');};</script>2.在 javascript代码中绑定在ja
2020-09-14 00:27:48
462
原创 js 内存泄漏、垃圾回收机制
什么是内存泄漏？程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。有些语言（比如c语言）必须手动释放内存，程序员负责内存管理。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"。javascript垃圾回收机制原理：解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），
2020-09-13 21:44:41
133
原创 js 事件委托
经典面试题概念事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处:提高性能案例需要触发每个li来改变他们的背景颜色。这样我们就可以做到li上面添加鼠标事件。但是如果说我们可能有很多个li用for循环的话就比较影响性能。<ul id="ul"> <li>
2020-09-10 21:54:16
181
原创 js 数组扁平化
经典面试题，项目中用js数组操作的地方很多，js数组扁平化是其中一种什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。1.常规方式 递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.le
2020-09-10 21:45:34
116
原创 js 数组排序
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>ar
2020-09-09 21:57:08
91
原创 js 数组去重
情境：将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}] 中重复的值过滤掉1、ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined,
2020-09-09 21:37:02
93
原创 ES6 数组对象方法
方法描述copyWithin()从数组的指定位置拷贝元素到数组的另一个指定位置中。entries()返回数组的可迭代对象。fill()使用一个固定值来填充数组。find()返回符合传入测试（函数）条件的数组元素。findIndex()返回符合传入测试（函数）条件的数组元素索引。from()通过给定的对象中创建一个数组。includes()判断一个数组是否包含一个指定的值。keys()返回数组的可迭代对象，包含原始数组的键(key)...
2020-09-09 00:06:24
136
原创 ES5 数组对象方法
方法描述concat()连接两个或更多的数组，并返回结果。every()检测数值元素的每个元素是否都符合条件。filter()检测数值元素，并返回符合条件所有元素的数组。forEach()数组每个元素都执行一次回调函数。indexOf()搜索数组中的元素，并返回它所在的位置。isArray()判断对象是否为数组。join()把数组的所有元素放入一个字符串。lastIndexOf()搜索数组中的元素，并返回它最后出现的位置。m...
2020-09-09 00:06:09
226
原创 es6 generator函数
Generator 函数的定义语法上，可以理解成，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数。它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。什么是Generator函数function 关键字和函数之间有一个星号(*)，且内部使用yield表达式，定义不同的内部状态。调用
2020-09-06 23:20:32
121
原创 async、await
ES2017 标准引入了 async 函数，使得异步操作变得更加方便async/await场景async主要来处理异步的操作，需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一步返回的数据执行第二步操作的接口调用，达到异步操作。这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。名词解释async：async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，
2020-09-06 21:00:18
152
原创 promise 特点及使用
名词约定Promises的概念是由CommonJS小组的成员在Promises/A规范中提出来的。一般来讲，有以下的名词约定：promise（首字母小写）对象指的是promise实例对象Promise首字母大写且单数形式，表示Promise构造函数Promises首字母大写且复数形式，用于指代Promises规范为什么有promise同步的方式写异步的代码，用来解决回调地狱问题。此外，promise对象提供统一的接口，使得控制异步操作更加容易。什么是promisePromise，简
2020-09-06 20:37:12
760
原创 js 中var、let、const的区别
在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量），ES6提出了使用let和const声明变量。1.是否存在变量提升var 声明的变量存在变量提升（将变量提升到当前作用域的顶部），即变量可以在声明之前调用，值为undefined。let 和 const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。console.log(f) //undef
2020-09-06 19:45:12
123
原创 vuex 总结
vuex简介vuex是专门用来管理 vue.js 应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。vuex概念五个核心：state： 存放状态，存储数据的地方actions： 提交mutation，异步操作mutations： 同步操作，只有mutations可以修改state中的数据getters： 相当于 state的计算属性。modules： 将store模块化，模块化
2020-09-03 21:01:11
114
原创 js原型与原型链
原型1.prototype每个函数对象下都有一个prototype属性，这个属性指向函数的原型对象。2.protojs 的每个对象(除null外)中都会有一个__proto__属性，这个属性会指向该对象的原型。3.constructor每个原型中都有一个constructor属性，指向它关联的构造函数。原型链当查找一个属性或方法时，如果在当前对象中找不到，会继续在当前对象的原型对象中查找；如果原型对象中依然没有找到，会继续在原型对象的原型中查找（原型也是对象，也有它自己的原型）；直到找到为止
2020-09-02 21:01:07
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人