是大林的林吖-CSDN博客

一、新增的用于声明变量的关键字。（1）let声明的变量只在所处于的块级有效不存在变量提升（2）const声明的变量只在所处于的块级有效声明常量时必须赋值常量赋值后，值不能修改（3）var、let、const的区别使用 var 声明的变量，其作用域在该语句所在的函数内，且存在变量提升现象，值可更改。使用 let 声明的变量，其作用域在该语句所在的代码块内，不存在变量提升，值不可更改。使用 const 声明的变量，其作用域在该语句所在的代码块内，不存在变量提升，值不可更改。

2022-05-30 15:17:50 396 1

原创什么是闭包和如何使用闭包？

一、概念闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。二、特性函数嵌套函数函数内部可以引用函数外部的参数和变量参数和变量不会被垃圾回收机制回收三、用法1. 函数作为返回值function closure(num) { var count = num // t()使用 // return function

2022-05-26 15:25:37 458

原创 js对象继承的六种方式的相关学习

一、理清构造函数，对象实例，原型对象prototype，对象原型__proto__，的关系构造函数：用于建立对象的函数，经过new关键字生成对象。函数名通常首字母大写的。对象实例：原型对象：每一个函数都有一个prototype属性，它是一个指向原型对象的指针（原型对象在定义函数时同时被建立）对象原型：1、原型链继承...

2022-05-24 15:37:20 172

原创 Promise（）的相关学习

1、什么是Promise？主要用于异步计算可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作promise，帮助我们处理队列2、Promise的好处promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）可以很好的解决回调深渊的问题语法简洁。可读性强多个异步等待合并便于解决3、用法resolve：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 fulfilled）。将异步的执行从pe

2022-05-18 19:52:14 247

原创关于webpack-cli4.0的相关配置（三）

配置多环境变量package.json 里的 scripts 配置 dev build等，来执行不同环境通过 npm run dev启动本地 , 执行 development通过 npm run build 打包正式 , 执行 production配置介绍可以在vue.config.js里通过console.log(process)查看具体配置信息常用的配置process.env.NODE_ENV会是 “development”、“production” 或 “test” 中的一个。

2022-05-12 19:26:50 279

原创关于webpack-cli4.0的相关配置（二）

注意：从cli3.0 开始，Webpack的配置文件从webpack.config.js变为了 vue.config.js更多配置信息参考地址（1）publicPathType：stringDefault： ‘/’默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设

2022-05-11 19:23:15 552

原创关于webpack的学习（一）

一、概念本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。可以通俗地把Webpack理解为一个模块处理工厂。我们把源代码交给Webpack，由它去进行加工、拼装处理，产出最终的资源文件。二、webpack的安装npm install webpac

2022-05-09 20:29:39 123

原创 Vue自定义指令directive的用法

官网提供了几个钩子函数（可选）：1)bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。2)inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。3)update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。4)componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。5)unbin

2022-04-23 15:06:38 1430

原创前端Vue使用封装Mock.js和api请求模拟数据

mock的使用改进，可参考上一篇文章mock的使用1) mock.js// mock.js 文件import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据const dataList = [] // 用于接受生成数据的数组for (let i = 0; i < 26; i++) { // 可自定义生成的个数 const template = {

2022-04-15 16:40:03 774

原创 vuex 直接修改state、commit 和dispatch 修改state 的用法及区别

vuex 直接修改state、commit 和dispatch 修改state 的用法及区别1）可以直接使用 this.$store.state.变量 = xxx;2）通过commit修改stateimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name:'' }, mutations: {//类似method SET_N

2022-04-14 11:29:57 3341

原创 npm运行/打包时内存溢出问题的解决

问题描述1：1、node内存溢出的解决方案(1)全局安装 increase-memory-limit插件，执行 npm install -g increase-memory-limit(2)进入到package.json的同级目录下，执行increase-memory-limit若还是会报错，问题描述2：2、执行修复脚本即可(1)把wfpath改成自己的项目地址即可(2)可以把该脚本放在build目录下，执行node increase-memory-limit.js即可,执行完就可以删

2022-03-09 20:17:48 4582 5

原创 element ui table表格有子节点（树形表格），且展开子节点不在默认第一列？

问题描述:element ui table表格有子节点（树形表格），且展开子节点不在默认第一列？解决：1、tableHead的数据格式返回如下，没有type属性的则会作为展开子节点列,tableData的数据格式如下，有children属性则会有子节点。:tree-props="{ children: ‘children’, hasChildren: ‘hasChildren’ }"tableHead:[ { "column_name": "a", "column_comment"

2022-01-26 09:39:52 1381 1

原创关于组件中直接修改props传递的值报错的解决方法

问题描述：自定义组件中，在组件里直接修改props传递的值会报错解决方案：在掉用该组件时使用sync修饰符（具有双向绑定原理）组件中通过$emit进行修改props中的值总结：等同于

2022-01-05 15:57:11 599

原创 vue页面自定义平滑滚动到页面任意位置

问题描述：点击表格行数据，页面滚动到指定位置解决方法：1、scroll-to.jsMath.easeInOutQuad = function(t, b, c, d) { t /= d / 2 if (t < 1) { return c / 2 * t * t + b } t-- return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animating http://goo

2021-12-12 10:03:57 1121

原创使用$set修改对象某个属性的值以及$delete删除对象某个属性

使用$set修改对象某个属性的值以及$delete删除对象某个属性fun() { user = { name: '大林', age: 22, address: '广东深圳', desc: '123' } this.$delete(user , 'desc') this.$set(user , 'address', '广东广州') console.log(user)}结果是user为{name: ‘大林’, age: 22, address: ‘广东广州’

2021-12-02 11:33:39 964

原创 js正则表达式匹配固定汉字

js正则表达式匹配固定汉字 var label = 'XXX计划说明书' var reg = new RegExp('概算|合同|计划') if (reg.test(label)) { console.log('success') }else{ console.log('error') }

2021-12-02 11:17:52 3026

原创 el-table 某一行行高亮如何设置？

问题描述：使用了highlight-current-row属性实现点击行的高亮，但在操作栏的事件使用了stop阻止事件冒泡，所以导致点击事件后，当前行并没有高亮显示。解决方法：可以通过table的setCurrentRow方法传入当前行选中edit（row）{ this.$refs.table.setCurrentRow(row) // row为当前行数据}...

2021-12-01 14:04:55 2765

原创 watch监听事件的多种用法

一、普通监听watch: { name(newVal, oldVal) { console.log(newVal) // 打印name变化的值 }}二、immediate属性(默认false)watch: { name: { handler(newVal, oldVal){ console.log(newVal) // 打印name变化的值 } immediate: true }}三、deep属性（深度监听）watch: { name: { handle

2021-12-01 09:43:45 7233

原创 vue中使用v-bind=“$attrs“进行多层组件的传值&v-on=“$listener“监听事件（父级事件传递到内部组件）

使用v-bind="$attrs"进行多层组件的传值(即继承)1、最外层组件（祖父）grandfather.vue<template> <div class="grandfather"> <father :title="title"/> </div> </template> <script> export default { data() { return{ title: 'hello worl

2021-11-26 15:52:07 3793 1

原创 vue项目网页全屏功能screenfull & screenfull全屏某一块元素

一、vue项目网页全屏功能screenfull1、安装screenfull依赖npm install screenfull --save-dev2、使用（1）、写组件Screenfull/index.vue<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div></t

2021-11-21 15:59:40 2099 5

原创 element UI Table 根据判断列值相等即合并单元格 & 根据某列值两个相等以上即设置单元格的 style

一、合并行单元格:span-method=“objectSpanMethod”<el-table v-loading="tableLoading" :data="tabledata" :element-loading-text="$t('common.loading')" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"

2021-11-13 11:11:22 1968

原创 table表格的type为selection有时无效问题

问题描述：table表格增加一列多选框，如果它页面中多个table，且用v-if else 控制，则会导致type的selection失效。解决：给v-if else 控制的table增加key值即可解决异常问题。

2021-11-03 08:04:45 1118

原创 vue父向子组件传值、兄弟组件间传值、子向父组件传值

父组件向子组件传值1.父组件.vue// 父组件中<template> <div> <Child ref="child" :title="value"/> </div></template> <script>export default { data() { return { value: 'hello world!' } }}&lt

2021-10-29 14:59:14 185 1

原创使用插槽后，动态控制button不生效的解决有效方法

使用插槽后，动态控制button不生效控制button动态切换是否禁用状态，由于button位于插槽内，导致数据改变，按钮状态并未改变。使用插槽自定义表头，会遇到插槽里面数据不更新问题，插槽使用 slot=“header” 应改成 #header，即可解决插槽内数据不更新<el-table v-loading="tableLoading" :data="tableData" :element-loading-text="$t('common.loading')

2021-10-29 11:34:20 1382

原创 vue+element ui el-upload覆盖默认的上传行为，可以自定义上传的实现

1.vue页面视图http-request覆盖默认的上传行为，可以自定义上传的实现,: 即绑定<el-upload action="string" :http-request="handleImport" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".xls,.xlsx" :show-file-list="true">

2021-09-27 14:41:23 1186

原创 vue通过 a 标签的 download 属性结合 blob 构造函数下载excel文件

1.vue页面视图<el-button type="danger" icon="el-icon-download" size="medium" @click="templateDownload" >模板示例</el-button>2.methods方法里templateDownload() { aoiTemplateExport().then((res) => { const url = window.URL

2021-09-27 14:21:34 390

原创 vue+mockjs模拟数据分页功能、新增功能、编辑功能、删除功能

Mockjs模拟数据，实现增删改查1、安装mockjsnpm install mockjs --save-dev2、mock.js文件// mock.js 文件import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据const dataList = [] // 用于接受生成数据的数组for (let i = 0; i < 26; i++) { // 可

2021-09-22 16:52:35 974

原创防抖函数，解决短时间内多次触发同一事件时只执行一次。

防抖函数在utils里，debounce.jsfunction debounce(fun, delay) { var timer = null; return function() { var taht = this; // 注意 this 指向 var args = arguments; // arguments中存着e if (timer) clearTi

2021-09-10 16:13:16 829

空空如也

空空如也