- 博客(39)
- 收藏
- 关注
RSS订阅原创 Vue生命周期都有哪些？
Vue的生命周期就是实例从创建到销毁的一个过程，即从创建、初始化数据、编译模板、挂载Dom($el)->渲染、更新->渲染，卸载等一系列的过程。el是挂载点如。
2024-04-29 10:37:18
312
1
原创 Promise和async/await
Promise用来解决多层回调嵌套的问题。它的构造函数是执行的，then 方法是执行的，所以创建后里面的函数会立即执行，构造函数中的resolve和reject只有第一次执行有效，也就是说。简单说Promises是一个容器或对未来事情的承诺。
2024-04-05 20:28:01
301
原创 JS 数组去重
8.组合reduce+inicludes方法去重：通过reduce()方法遍历数组，将元素存储在一个临时对象中，每次遇到重复元素时将其跳过，最后返回所有不重复元素的数组。7.组合filter+inidexOf方法去重：通过filter()方法遍历数组，返回仅包含首次出现的元素的新数组。5.使用includes去重，判断一个数组是否包含一个指定的值，如果是返回 true，否则false。4.使用indexOf()去重，方法可返回某个指定的字符串值在字符串中首次出现的位置。3.使用Map()去重。
2024-04-02 18:05:32
269
原创 JS for与foreach的区别
1.for语法循环最简单，它没有任何额外的函数调用和上下文；2.forEach函数签名更为复杂array.forEach(function(currentValue, index, arr), thisValue)，有诸多参数和上下文在执行时需考虑，性能可能减弱;3.for循环可以使用continue跳出当次循环，使用break跳出整个循环，forEach不行；for循环可控制循环起点i,forEach只能默认从0开始；
2024-04-01 15:58:00
332
原创 JS 作用域的提升
作用域是一个变量绑定的有效范围。就是在这个作用域中变量绑定是有效的，出了这个作用域变量绑定就无效了。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。有全局作用域和函数作用域，es6后增了块级作用域。执行上下文是对JS代码执行环境的一种抽象，每当JS运行时都是在执行上下文中运行的。JavaScript 执行上下文有三种。
2024-03-31 16:52:35
434
原创 JS typeof和instanceof的区别是什么
例2：检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，(object instanceof constructor) object 是指某个实例对象，constructor是指某个构造函数。但是你会发现，typeof判断null、array、object以及函数的实例（new + 函数）时，它返回的都是object。可以准确判断引用数据类型（Object、Array、Function），它返回值是布尔值，用于判断一个对象是谁的实例，它是根据原型链进行搜寻的，比如。
2024-03-29 11:31:51
140
原创 vue 防止手动修改sessionStorage
1.在main.js里面添加该代码，当修改后会重新赋值修改前的值window.addEventListener('storage', function (e) { sessionStorage.setItem(e.key, e.oldValue)});2.当localStorage值被修改的时候清除他并且跳转到登录页window.addEventListener('storage', function () { sessionStorage.clear(); window.
2021-07-15 17:25:52
1180
原创 vue路由传参的三种基本方式
1.拼接参数的,数据不会丢失const routes = [{path: '/hello/:id',name:'hello'，component: hello}]function getId(id){this.$router.push({path:`/hello/${id}`})}this.$route.params.id2.刷新后数据会丢失this.$router.push({name:'hello',params:{id:'123'}})this.$route.params.id3.刷
2021-07-05 10:47:58
138
原创 vue get请求怎样传数组参数
场景: vue中在与后端进行数据交互时，使用axios发送请求，不做配置直接使用get请求传递数组类型参数的时候，后端是无法接收数据的，需要对axios一些简单的配置才能让后端完美的接收数组let params = ['2021715','20210415']list(data){ return request({ url: '/getList', method: 'get', params: data, })}上述代码在不做配置的时候请求信息为：/list?season[]=
2021-06-08 10:55:50
4469
原创 vue 导出excel模块
reportTotal.vue<template> <div class="reportTotal"> <el-button type="primary" @click="handleExport">导出</el-button> </div></template><script>import reportTotal from '@/api/reportTotal'export de
2021-05-26 15:35:44
96
原创 vue 表格多页的列序号自增
<template> <el-table :data="tableData"> <el-table-column type="index" width="50" label="序号" align='center'> <template slot-scope="scope"> <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
2021-05-20 10:41:39
910
1
原创 Vue项目中实现用户登录及token验证
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token6、后端判断请求头中有无token，
2021-03-18 09:43:10
107
原创 vue dialog对话框模块
父页：<template> <el-dialog title="修改" v-if="updateDialog" :visible.sync="updateDialog" @close="handleAddClose" :model-append-to-body="false" :close-on-click-modal="false"> <update-Dialog :updateChild="updateChild" updateEmit="updateEmit"
2021-01-23 22:30:04
266
原创 vue select下拉框需要取其label值的方法
思路是当select值发生变化时触发@change方法，用当前值去遍历odsOptions数组里的内容，若值一致则取其label值赋给this.params.odsTypeName。<el-select v-model="params.odsTypeCode" @change="getOdsLabel" filterable placeholder="请选择"> <el-option v-for="(item, index) in odsOptions" :label="item.la
2021-01-23 22:17:32
3310
原创 vue dialog对话框第二次打开值失效解决方法
加个v-if就解决了<el-dialog title="修改" v-if="updateDialog" :visible.sync="updateDialog" @close="handleAddClose" :model-append-to-body="false" :close-on-click-modal="false"> <update-Dialog :updateChild="updateChild" updateEmit="updateEmit" ref="updateG
2021-01-23 22:08:29
2765
原创 vue当左侧导航栏高度溢出无法下拉显示全
外层设置overflow:hidden，内层设置overflow-y:scroll，内层比外层多20px来隐藏滚动条;<template> <el-container> <div class="asideBox"> <el-aside> <leftMenu></leftMenu> </el-aside> </div> <el-main></el-main>
2021-01-19 11:33:36
1027
原创 Vue elementUI 多选表格实现单选操作
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="53vh" @row-click="toStaffDetail" @select="userChoose" > <el-table-column type="
2021-01-15 08:06:13
1123
原创 vue 使用mockjs造假数据
什么是Mock.js?生成随机数据，拦截 Ajax 请求。通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。使用步骤：1.先安装mockjsnpm install mockjs --save-dev2.在src目录下创建mock文件夹，并创建index.js文件,拦截axio
2020-12-30 14:30:11
940
1
原创 vue 不同环境打包配置不同命令与IP
1、什么是cross-env?它是运行跨平台设置和使用Node中环境变量的组件。2、为什么需要cross-env?【 cross-env 能够提供一个设置环境变量的scripts】自定义配置环境变量在不同的环境下，配置方式也是不同的。根据本地、测试、线上环境配置不同的API。npm install cross-env --save-devconfig->dev.env.js文件module.exports=merge(prodEnv,{NODE_ENV:development,ENV
2020-12-27 17:56:17
525
原创 vue el-date-picker转换时间格式的几种方式
方式一:使用value-format，该属性是dateValue绑定值的格式；<el-date-picker v-model="datevalue" type="datetimerange" value-format="yyyy-NM-dd hh" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabled="isDisabled"><
2020-12-25 11:14:15
14671
3
原创 解决el-table某列数据无法修改内容问题
因数据库问题，列数据时间值的末尾都带有.0，要求去掉，按思路即可解决。解决前：<el-table> <el-table-columm prop="newCommitTime" label="最新时间" sortable :formatter="formatTime" width="144px" align="center"></el-table-columm></el-table>formatTime(row,column){//解决最新时间和消
2020-12-24 00:31:54
1752
原创 解决el-table排序时当某列数据有空值导致排序错乱的问题
当表格列排序不是连续有值时会导致组件自带排序功能错误，按照如下思路即可解决。解决前：<el-table> <el-table-columm prop="newCommitTime" label="最新时间" sortable width="144px" align="center"></el-table-columm> <el-table-columm prop="consumerCommitTime" label="消费时间" sortable widt
2020-12-24 00:18:21
2683
原创 Vue防止重复点击
Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-disabled'); el.disabled = true; setTimeout(() => { el.disabled = false; el.classList.remove('is-di
2020-12-08 11:23:30
324
原创 nginx配置vue项目多个页面
因项目要求，需要在本地起nginx服务。先下载并解压nginx-1.18.0版本，接着npm run build打包项目，接着放在html文件夹内。配置nginx.conf，使用@router可以取到vue项目中的路由并切换访问。server { listen 8806; server_name localhost; location / { root html; try_files $uri $uri/ @router; index index.html index.htm; }
2020-12-03 10:20:45
1308
原创 解决element-ui不区分大小写排序的坑
因项目要求需对表格增加排序功能。开始在代码内写sortable便可进行默认排序，会发现只对当前页进行排序。后来要求对所有页进行排序，于是就加上@sort-change，这是触发排序时会执行的方法，再写个sort_change函数并返回比较结果。问题来了！发现点击排序顺序是数字大写小写，可要求是不区分大小写排序，查遍全网也没解决。经过看文档仔细琢磨，才知道光写sortable执行的是sort-method默认的a-b升序，又执行了@sort-change函数，等于进行了两次排序才导致的报错。于是改成sorta
2020-11-11 19:23:35
1093
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人