提莫拌一团蘑菇-CSDN博客

原创 ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台

使用场景：选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。????直接上代码：index.vue<el-form ref="importList" :rules="ImportRules" :model="importList" label-positio...

2019-11-01 10:25:49 44804 32

原创 npm run dev(pnpm run dev) 的过程都做了什么？

按照项目设定的开发流程自动化地完成一系列构建和部署操作，以便于开发者能够快速地进入本地开发状态并持续迭代。实际上是运行了 webpack serve --config webpack.dev.config.js。

2024-03-07 11:47:38 943

原创 vue3、vue2增加防抖节流函数（最全攻略）

当用户点击按钮时，防抖函数将确保在指定的延迟时间内只执行一次逻辑，避免多次触发。在Vue中使用防抖或节流函数可以通过以下4个步骤实现 ......

2024-01-02 17:45:37 3072

原创 Chrome网页翻译插件，实测超好用，万物皆可译

话不多说，给大家推荐一个比较靠谱的网页翻译插件：可可翻译Windows 和 mac均可使用，实测超好用！各位如果可以墙，还是建议使用Chrome 应用商店直接下载哈。

2022-11-10 16:29:23 21328 9

原创 Property ‘page‘ does not exist on type ‘AxiosResponse＜any＞‘ vue3.0+typescript运行报错

报错截图：

2021-06-03 17:51:27 6626 2

原创 vue3 父子组件传值(v-model避坑指南)，亲测有效！！！

一、使用场景点击button弹出弹框，弹框是一个自定义组件「child.vue」二、父组件：1. 父组件使用 v-model 传值给子组件// parent.vue //<template><el-button @click="addMenu('new')">打开弹框</el-button><MediaDialog :

2021-04-25 16:47:52 13968 11

原创 Invalid prop: type check failed for prop “index“. Expected String with value “282“

一、页面报错信息如下二、解决方法1. 按照报错信息，我们可以找到对应报错文件SidebarItem.vue2. 修改为 :index="item.id + ' ' "三、报错原因1. 报错翻译：无效属性：属性“index”的类型检查失败。应为值为“undefined”的字符串，但未定义2. 官方定义这里index定义的类型为字符串，所以我们把number 改为字符串就大功告成了...

2021-04-19 17:44:01 267

原创解决vue3.0 启动报错 :Cannot find module ‘vue-loader-v16/package.json‘

1. 项目报错截图：2. 报错原因：原因在于使用npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来，那我们换成国内镜像（cnpm）下载就可以解决了！！3. 步骤（1）先卸载vue-loader-v16依赖npm uninstall vue-loader-v16（2）之后使用cnpm安装vue-loader-v16依赖cnpm i vue-loader-v16（3）再次启动项目，启动成功如果我的解决方式对你...

2021-04-08 14:48:11 4194

原创 20. 有效的括号 - 使用js实现, 算法执行用时超过100%的人

20. 有效的括号给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。示例:输入: "()"输出: true示例 1：输入: "()[]{}"输出: true示例 2：输入: "([)]"输出: false示例 3：输入: "{[]}"输出: true(一)方法一:巧妙使用对象使用这.

2020-12-09 21:56:22 115

原创 509. 斐波那契数 - 使用js实现, 算法执行用时超过91%的人

1. 两数之和给定一个整数数组 nums和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1](一)方法一:暴力遍历 for (let i = 0; i < nums.length; i++...

2020-12-08 21:34:01 112

原创一款好看的VSCode主题裂墙推荐, 用了它你就是可可爱爱的小仙女‍♀️

女生肯定喜欢这款vscode主题, 裂墙推荐!!!!!, 真滴是可可爱爱, 很养眼哦哈哈, 如果你也喜欢的举个爪爪 ????????‍♀️????????‍♀️????????‍♀️????????‍♀️VSCode插件:Nebula Theme

2020-09-29 16:48:29 1032

原创 vue使用scss，全局引入公共scss样式和变量

1. 安装sass的loader, 让scss 变量可以全局使用(1)安装依赖npm install sass-resources-loader --save-dev(2) 修改build中的utils.jsreturn {// 将下面一行: scss: generateLoaders('sass')// 修改成:scss: generateLoaders('sass').concat(　　{　　　　loader: 'sass-resources-loader',　　　　o

2020-09-10 10:17:59 1386

原创 TypeScript (ts) 工程化最全安装教程

一、安装流程：sudo npm install -g typescripttsc --initnpm initnpm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin二、详解：1. 使用NPM 全局安装 TypeScript// Windowsnpm install -g typescript// Macossudo npm install ..

2020-07-18 00:28:38 1167

原创 typescript 工程化webpack配置详情

typescript 工程化的demo，请移步我的github。webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 入口文件 entry: './src/index.ts', // 输出 output: { filename: 'app.js', }, resolve: { // 模块导入的扩展名处理 .

2020-07-18 00:19:34 268

原创 Node热启动工具 nodemon

问题：我们的Node项目每次改动后，都需要重新启动Node，灰常影响开发效率。给大家推荐一个Node热启动工具nodemon，它的作用是监听代码文件的变动，当代码改变之后，自动重启。nodemon官方文档安装方法：-windowscnpm i -g nodemon-macossudo cnpm i nodemon -g使用方法：项目内修改node代码，Command + S 后，控制台会自动重启node项目，完美????C...

2020-07-15 09:47:11 609

原创 Vue 的数据响应式原理以及具体实现

一、理解Vue的设计思想MVVM框架的三要素:数据响应式、模板引擎及其渲染 (1) 数据响应式:监听数据变化并在视图中更新Object.defineProperty() Proxy(2) 模版引擎:提供描述视图的模版语法插值:{{}} 指令:v-bind，v-on，v-model，v-for，v-if(3) 渲染:如何将模板转换为html模板 => vdom => dom二、数据响应式原理数据变更能够响应在视图中，就是数据响应式。vue2中利用 Ob...

2020-07-05 20:03:41 396

原创利用 Object.defineProperty 对象响应式原理实现时钟效果

实现代码????：<body> <div id="#app"></div><script> // TODO 定义一个对象响应式原理 ⏰ function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { // console.log('Get方法:', val) return val

2020-07-05 18:13:41 178

原创 Vue 浅谈自定义指令 directive

自定义指令除了核心功能默认内置的指令 ( 和 )，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。???? 例子：输入框获取焦点1. 定义 v-focus 指令(1) 全局自定义指令// main.js// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DO

2020-07-01 15:15:54 208

原创 vue cli-service-golbal安装后不能使用的问题

一、问题：我们在安装 @vue/cli-service-global组件后，想要执行某个单独的 *.vue文件，执行如下命令：vue serve hello.vue报错：command not found: vue二、解决方式：需要重新安装 vue-cli 命令工具npm install -g @vue/cli 就能成功把单文件跑起来啦：...

2020-06-25 16:08:41 1292

原创 Vue 多个平行页面间传值，非组件间传递，简单易懂

一、使用路由传递参数A页面和B页面是两个平行页面，非父子组件关系，先要将A页面的参数传递到B页面中。⚠️注意：query 中的参数 params ，需要使用JSON.stringify({}) 方法，把对象转化成JSON字符串A.vue 页面<el-button type="primary" size="medium" icon="el-icon-plus" @click="add">新建订单</el-button>add() { this...

2020-06-05 19:00:33 3621

原创 unpkg.com 资源加载太慢？来用国内的镜像地址吧

一、原因：unpkg也没有幸免于难，也被墙了，unpkg上的相关资源都不能访问，才导致项目资源加载不出。二、解决方法可以使用 unpkg.com 的国内镜像地址：unpkg.zhimg.com

2020-05-27 16:55:44 23866 6

原创 HTML 网页加载时，默认清除所有浏览器缓存

一、用HTML标签设置HTTP头信息<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />HTTP头信息“Expires”和“Cache-Control”为应用...

2020-05-27 15:19:18 1026 1

原创如何提升Vue的开发效率呢？ Vue-devtools帮你实现快速调试！

12

2020-03-31 23:27:52 301

原创使用Vue DevTools 插件报错的问题：Vue.js is detected on this page. Open DevTools and look for the Vue panel.

这个问题，是因为没有在main.js中开启debug modemain.jsimport Vue from 'vue'Vue.config.devtools = true重新启动项目，就可以成功调试啦！

2020-03-31 16:12:30 6875 6

转载 $nextTick —— vue中实现请求数据后渲染dom

我们先看下面代码示例效果1）示例<body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div>...

2020-03-31 13:55:15 1236

原创 js 去掉string中最后一个逗号

let string = [1, 2, 3, 4];string = string.substring(0, string.lastIndexOf(','));

2020-01-16 11:30:23 478

原创 Vue 优雅的强制重新渲染子组件

原理：我们通过 :key实现，当key 值变更时，会自动的重新渲染，key的作用主要是为了高效的更新虚拟DOM。代码实现：<template> <div>  <div> <button @click="reLoad">点击重新渲染...

2019-12-29 12:16:49 3707 6

原创那些年你猜的坑之——数组去重reduce的用法

数组去重在JS中最常见的处理方式就是构建Object，因为Object查找key的时间复杂度是O(1)，而数组是O(n)const list1 = [ {id: 0, name: 'xiaomin'}, {id: 1, name: 'xiaohong'},];const list2 = [ {id: 0, name: 'xiaomin'}, {id: 1...

2019-12-24 15:42:54 235

原创 vue-elementUI el-tree组件获取当前选中(check)的所有数据（含所有选中的二级节点和父节点）数组

获取方法如下：this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

2019-12-24 15:38:43 12760 5

转载 vue中关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件：<template> <div class="train-city"> ...

2019-12-12 10:13:39 115

原创那些年你猜的坑之—— call()用法的深度解析

每个函数都包含两个非继承而来的方法：call()方法和apply()方法。一、call/apply/bind方法的来源call，apply，bind 这三个方法其实都是继承自Function.prototype中的，属于实例方法console.log(Function.prototype.hasOwnProperty('call')) //trueconsole.l...

2019-12-10 18:02:00 560

原创浏览器中的 preview 和 response 显示的值不一致

背景：图中是浏览器渲染的表结构，我们的节目ID在表结构中作为主键ID，是不会存在重复的情况的，那到底是怎么造成的呢？逻辑梳理：经过排查返回值，我们发现NetWork中的preview 与我们页面所展示出来的值一致，主键ID是错误的????‍♂️，我在js中设置debug，可以看到拿到的返回值和 preview 的一致，主键ID是错误的????‍♂️，但是...Net...

2019-11-08 18:52:23 3047

原创 vue报错 Emitted value instead of an instance of Error el-collapse v-for="val in content.value"

完整报错信息????：问题代码：<el-collapse v-for="(val, index) in item.list" v-model="activeListNames" class="listCollapse"> <el-collapse-item title="-点击展开子列表-" :name="index"></el-collapse...

2019-10-25 17:36:52 1850

原创 mac下 webstorm输入光标变成块状解决方法

原因：webstorm默认安装ideaVim 插件解决办法：1. 选择 preferences.. 或快捷键"command + , "2. 取消勾选☑️

2019-10-10 10:58:58 943

原创 Vue报错：Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

解决方法：配置文件 .env.developmentVUE_APP_BASE_API, 一定要加 http://

2019-08-30 15:19:31 8902 1

原创 mac 如何快速找到host文件、并修改

1. 打开 Finder，然后点击菜单栏中的前往——前往文件夹（或者快捷键 Shift+Command+G）2. 在路径中输入 /etc/hosts3. 将host文件拷贝到本地，修改之后，将本地的host文件拖入etc文件夹中,覆盖4.修改完成...

2019-08-26 11:49:56 1484

原创 babel 编译时出现 Cannot find module '@babel/core' ，附代码，亲测有效。

目录报错信息：问题原因：解决方法：1.版本降级：2.升级babel-core版本为7.0.0报错信息：问题原因："babel-loader": "^8.0.0"版本问题。解决方法：1.版本降级：将"babel-loader" 的版本改为 “7.1.5” "devDependencies": { "babel-core...

2019-06-29 17:03:01 10701 1

原创使用Git的Kdiff3解决合并冲突显示乱码的问题

1.点击setting —— 选择Configure Kdiff3... 2. 选择Regional Settings —— 将编码格式修改为 UTF-8 —— 点击确认 3. 重新打开Kdiff3 合并工具，编码格式修改成功 ...

2019-01-04 17:33:18 2538

原创 Webstorm 的IDE 突然不停indexing , 目录列表不断刷新的问题 ,造成系统卡死

运行了node后，我的Webstorm 突然不停indexing , 并且项目的目录列表也不断的刷新 ,造成系统卡死，重启机器并没有作用。其实很简单，只要清理一下IDE的缓存和索引就可以了。操作过程：“File” —— 选中 “Invalidate Caches / Restart” —— 选择 “Invalidate and Restart” 清除缓存之后，webstrom会...

2018-12-07 10:12:22 1575 2

原创 Sea.js 三分钟快读入门

引言这篇文章是写给前端刚刚入门的小猿们的，大神请绕路，嗷嗷~ 因为公司的项目中一直在用Sea.js，从而接触到了前端模块化的一些东西。刚接触的时候，觉得“模块”很像是java当中“类”的概念；我想很多刚入门的小猿们，和我刚入门时候的代码习惯是一致的，将自己的逻辑代码从上到下写在一个js文件中（ps:哈哈，中枪没:-）这样做的弊端呐，就是可维护性不高，当我们想要回过头来修改某个需求和逻

2017-06-19 16:41:05 234

空空如也

空空如也