- 博客(176)
- 收藏
- 关注
RSS订阅原创 vue3+vite项⽬搭建-配置环境变量env
1、env 文件说明.env --- 全局默认配置文件，在所有的环境中被载入，当你指定了环境，它也会合并,并且优先级大于.env，没有指定环境时先找它.env.development --- 指定开发环境的配置文件.env.production --- 指定生产环境的配置文件，当 build 运行会触发此文件2、根目录下新建文件其中写环境变量和其它变量，必须要以VITE_开头 (...
2022-10-09 14:40:00
2285
原创 Vue.use原理及源码解读
vue.use(plugin, arguments) 语法 》参数：plugin(Function | Object) 》用法： 如果vue安装的组件类型必须为Function或者是Object； 如果是个对象，必须提供install方法； 如果是一个函数，会被直接当作install函数执行； install函数接受参数，默认第一个参数为Vue,其后参数为...
2021-11-24 09:21:00
268
原创 for in 和for of的区别
for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句for in通常用来遍历对象{}，遍历对象的键名for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnP...
2021-09-27 09:54:00
237
原创 JS常用库收集汇总
用于汇总记录一些看着 ok 的 JS 库。库名简介项目地址macy.js仅 4 kb的 原生 流布局插件http://macyjs.com/Driver.js仅 4 kb的 原生 页面分步引导Tippy.js玩转鼠标悬停提示信息tesseract.jsOCRjs库https://www.npmjs.com/package/tesserac...
2021-09-24 11:40:00
137
原创 vue项目中的.env环境变量配置文件
开始之前，先说下为什么要设置和读取环境变量简而言之就是，通过环境变量传参，能让我们在不修改任务代码的情况下执行不同的逻辑。比如在开发环境、测试环境、生产环境的api地址、文件地址等不同，通过环境变量的不同设置不同的api地址、文件地址关于.env 文件内容： NODE_ENV 代表是环境 有development (开发环境)、production(生产环境) VUE_APP_F...
2021-09-16 16:32:00
276
原创 8个非常实用的Vue自定义指令
原博地址https://www.cnblogs.com/lzq035/p/14183553.html在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive...
2021-07-29 15:43:00
65
原创 vuex 的模块中如何调用 actions 中的方法
vuex 的模块中如何调用 actions 中的方法模块vuexTest.js/** * 模块vuexTest.js */export default { namespaced: true, actions: { actionsHello(context, val) { console.log(context, "conte...
2021-07-08 11:48:00
1687
原创 vuex 的模块中如何调用 mutations 中的方法
vuex 的模块中如何调用 mutations 中的方法 模块vuexTest.js/** * 模块 vuexTest.js */ export default { namespaced: true, state: { stateHello: 1, }, mutations: { mutationsHello(sta...
2021-07-07 15:06:00
330
原创 vuex 中辅助函数mapGetters的基本用法详解
mapGetters辅助函数mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：1、在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter<!-- test.vue --><template> <div class="vuexReponse"...
2021-07-07 14:44:00
256
原创 vuex 中辅助函数mapState的基本用法详解
mapState辅助函数 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键：// store.js/** vuex的核心管理对象模块:store */import Vue from 'vue';import Vuex from 'vuex';im...
2021-07-06 17:11:00
1105
原创 import * as obj from 'xxx' 的用法说明
在被引入的文件xxx中存在多个 export 导出文件时，使用import * as obj from 'xxx' 会将"xxx"中所有export导出的内容包裹到obj对象导出；// helloWorld.jsexport function hello(){ return '我是hello 内容';}export function world(){ return...
2021-07-05 17:07:00
108
原创 从不用 try-catch 实现的 async/await 语法说错误处理
前不久看到 Dima Grossman 写的 How to write async await without try-catch blocks in Javascript。看到标题的时候，我感到非常好奇。我知道虽然在异步程序中可以不使用 try-catch 配合 async/await 来处理错误，但是处理方式并不能与 async/await 配合得很好，所以很想知道到底有什么办法会比 tr...
2021-05-25 16:23:00
350
原创 async/await的基础用法
一、async/await的优点1)方便级联调用：即调用依次发生的场景；2)同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；3)多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁...
2021-05-25 16:17:00
135
原创 Element-Ui表单移除校验clearValidate和resetFields的区别
1、介绍2、resetFields()与clearValidate()的区别 相同点：二者都能移除表单校验 不同点：resetFields()会对整个表单进行重置，将所有的字段重置为初始值 clearValidate() 只会移除表单校验，而且可以只对部分字段进行移除校验3、resetFields()与clearValidate()的使用场景 resetFields...
2021-04-19 11:50:00
746
原创 JavaScript中数据类型转换（显式类型转换）
概述JavaScript 是一种弱类型动态类型语言，变量没有类型限制，可以随时赋予任意值。var x = y ? 1 : 'a';上面代码中，变量x到底是数值还是字符串，取决于另一个变量y的值。y为true时，x是一个数值；y为false时，x是一个字符串。这意味着，x的类型没法在编译阶段就知道，必须等到运行时才能知道。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要...
2021-03-02 17:58:00
87
原创 ESlint在vue项目中的配置
https://blog.youkuaiyun.com/weixin_38606332/article/details/80864381https://blog.youkuaiyun.com/weixin_33721344/article/details/88685833?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLe...
2021-02-22 09:46:00
83
原创 函数防抖、函数节流
1、事件频繁触发可能造成的问题？ (1)、一些浏览器事件： window.onresize、window.onmousemove等，触发的频率非常高，会造成浏览器性能问题。 (2)、如果向后台发送请求，频繁触发，对服务器造成不必要的压力；例如百度搜索时输入字符，每改变一下输入框字符时就去请求一下，如果不处理就会产生不必要的多余请求，给服务器产生压力。2、如何限制事件处理函数的频繁调用...
2021-01-31 16:23:00
62
原创 localstorage sessionstorage和cookie的区别
基本概念cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到'记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。localStorage：是HTML5标准...
2021-01-23 16:26:00
158
原创 element中表格中的表头与表格内容边框错位的解决方法
在APP.vue中的style标签内加上.el-table { th.gutter { display: table-cell !important; }}
2021-01-20 11:03:00
111
原创 vue项目上如何做ie浏览器的限制的提示。
vue项目在ie上的限制提示分为两种情况：1、在ie9版本以下的版本情况： 由于ie9以下的ie版本无法识别一下es6方法，所以在vue中的js无法执行，打开网站会直接白屏，没有任何显示。 sdfds所以代码校验浏览器的代码不能在vue中运行，可以在index.html中运行校验浏览器版本的代码<!DOCTYPE html><html lang="en...
2021-01-08 17:22:00
1852
原创 架构使用vuex结合vue-meta实现router动态设置meta标签
可以通过引入vue-meta模块，通过路由守卫监听获取到路由中meta的定义的值，再将获取到的值赋值到vuex中module模块中的state，再将模块中的值通过vue-meta模块中的metaInfo方法修改meta标签参考：https://www.imooc.com/article/2880451、安装npm install vue-meta -Snpm install ...
2020-12-14 21:28:00
1366
原创 Vue中强制组件重新渲染的正确方法
有时候，依赖vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更key的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：...
2020-12-10 12:03:00
7714
2
原创 vue-cli3打包去掉console.log
通过npm包 terser-webpack-plugin 来实现第一步：安装npm install terser-webpack-plugin --save-dev第二步：配置 (vue.config.js)module.export = { configureWebpack: (config)=>{ if(process.env.NODE_ENV ==...
2020-12-09 20:55:00
1455
原创 Vue点击当前路由实现刷新功能
测试提了一个bug，就是当前页面点击所在的侧边栏，页面没有刷新<div v-for="item in navAsideList" :key="item.index"> <el-submenu v-if="item.child&&item.child.length&&item.power" :ind...
2020-11-23 10:52:00
1222
1
原创 element ui使用v-for循环form表单校验的实现
<template> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic"> <el-row v-for="(domain, index) in dynamicValidateForm.pe...
2020-11-12 17:43:00
6682
3
原创 VsCode插件，自动生成注释koroFileHeader
最近正在使用vscode进行编程，为了更便利的对项目实施管理，同时利于后期维护，为一个版块添加注释是非常有必要的。实践出真知，以下是对于插件koroFileHeader的简单使用说明。打开vscode，选择Extensions搜索koroFileheader进行安装在vue文件中，使用快捷键ctrl + Alt + i/t，可以看到当前默认设置内容根据需要修改默认设置1....
2020-09-16 14:27:00
4249
3
原创 vue样式穿透 ::v-deep的具体使用
vue样式穿透 ::v-deep的具体使用更新时间：2020年06月04日 11:32:59 转载作者：柳慕笙 这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，...
2020-08-24 19:14:00
7875
1
原创 vue项目中如何在外部js中例如utils.js直接调用vue实例及vue上挂在的方法
一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from 'vue'）,这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的...
2020-08-10 15:58:00
3036
原创 vue单页应用在页面刷新时保留状态数据的方法
在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你一、问题现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。这时候就需要我们保存刷新之前页面的状态。二、一种解决方案在这个Vue单页应用中，王二是用Vuex作...
2020-08-02 17:16:00
1112
原创 Vue watch 监听复杂对象变化，oldvalue 和 newValue 一致的解决办法。
watch的常规用法：watch:{ tempData: function (value, oldValue) { console.log(value, oldValue) }}但是如果需要监听的数据是对象、内嵌多层的对象后，需要用到watch中的deep属性。类似于下面这种对象内嵌的对象：data(){ return { dat...
2020-07-23 15:30:00
6450
2
原创 vue项目的登录跳转代码
router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next('/error404') } else { if (!sessionStorage.getItem('sid')&&to.path!="/login") { next('/login') } ...
2020-07-22 18:30:00
610
原创 element的el-table表格自定义表头，slot="header"内，数据不更新的问题
<template> <div class="bidsInfo"> <el-table ref="singleTable" :data="noticeData" highlight-current-row style="width: 100%;margin-top:40px;"> <el-table-column typ...
2020-07-21 16:21:00
4447
3
原创 element框架的teble表格的数据展示由横向转向竖向
<template> <div class="m50"> <el-table border style="margin-top: 50px;" :data="originData"> <el-table-column label="题型" property="type" align="cente...
2020-07-16 17:26:00
7334
原创 Vue+Axios:使用拦截器来取消多次重复的请求
-----写在前面-----家园的面试项目接近尾声了，剩下一个大模块（响应式布局）和两个小功能（下拉到一定程度获取新的信息、持续监听返回数据，当有更新时在页面上方提示）听起来下拉到某个位置获取新信息是不难，但今天就遇到了两个问题：1. 下拉过程中会不断发起url相同的请求，可能会有被拉黑的风险，并且影响实际性能。最重要的，在then()方法中会将返回数据稍做处理后添加进组件...
2020-06-17 14:31:00
2736
1
原创 Generator 快速理解
你理解的 Generator 是什么？ Generator 算是 ES6 中难理解的概念之⼀了，Generator 最⼤的 特点就是可以控制函数的执⾏。在这⼀⼩节中我们不会去讲什么是 Generator，⽽是把重点放在 Generator 的⼀些容易困惑的地 ⽅。 直接调用一个generator和调用函数不一样，foo(5)仅仅是创建了一个generator对象，还没有去...
2020-05-07 11:51:00
466
原创 重写函数内置方法
看别人有这样的对象内部有这样的函数写法[](){}；后来了解到这是重写某些内置方法let a = { valueOf () { return 1 }, toString () { return '2' }, [Symbol.toPrimitive] (hint) { console.log(hint) // number retu...
2020-05-07 10:27:00
218
原创 随机字符串的生成
function randomString (len = 32){ const _item = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; let str = ""; for(let i=0;i<len;i++){ str += _item.charAt...
2020-05-06 15:31:00
211
原创 Object.definedProperty()中的getter与setter个人理解
谈Object.definedProperty()中的getter与setter个人理解就先介绍一下Object.definedProperty() Object.definedProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。在vue2.x中用来实现数据双向绑定 语法：Object.defineProperty(obj, p...
2020-05-06 11:37:00
1266
原创 .sync 修饰符
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。 这也是为什么我们推荐以update:myPropName的模式触发事件取而代之。举个例子，在一个包含titleprop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图this.$emit(...
2020-05-06 11:08:00
213
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人