陈新科的博客

公司的一个平台为方便第三方平台接入页面，需要写成可以单页面引入的方式。涉及到跨域访问页面，以及页面多余属性的隐藏。

打包之后还可以由运维人员修改配置。方便部署人员配置md5加密。public文件打包不会乱。所以新建pas.js文件。

1、mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。2、mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡。3、mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。4、mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。

在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

(不建议 用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作)校验时，先去校验公共库查找是否有对应校验，有则使用，没有则查看是否要多处使用，如果可复用，则进行抽离。1：作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。1.相同的卡片布局，首先整合数据，尽量使用循环方式去增加，避免变更多处的问题。2：循环变量可以简写，比如：i，j，k等。

/xx是每个页面的标头第一个名字不一样所以需要动态传，扩展参数是所有的数据数组"2021年","2020年","2019年",......];// 所有数组数据// 年份=》key值});});}

v-if=”clearShow”，初始化数据为true，在change事件触发的函数里设置clearShow为false，即移除了该input标签，然后在回调函数中再设置clearShow为true，这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。change事件触发条件是文件上传框内容改变才可以，每次上传完文件默认是不清空上一次上传的内容的，这样上传同名文件就不会触发change事件。网上现有的方法就是重置input上传文件的标签的dom结构，在vue里我的实现方法就是v-if去控制。

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。

需求：多选框需要动态改变背景色。

template>100%">key="item"label=""v-html="'+item+';width30px;3px;displayheight'+'90%'+40px;>颜色'">name//允许一个自定义组件在使用v-model时定制prop和event。默认情况下，一个组件上的v-model会把value用作prop且把input用作event，这里有用到v-html。...

首先卸载干净之前安装的和sass相关的所有依赖，或者直接将node_modules和package-lock.json文件删除。执行以下操作然后运行项目即可安装sass-loader安装node-loader安装style-loader或者把package.json里面node-sass和sass-loader版本改成"^7.3.0"就可以了。...

我用默认的post方法发送数据的时候发现后端获取不到数据，然而在network中看到参数是的确传出去的了。而且用postman测试的时候也是可以的，比较了下两个的不同发现是postman使用的是form-data格式，于是用form-data格式再次请求，发现OJBK这两种格式都是无法使用的：方法一：配置transformRequest缺点：其他请求格式的数据也会被重新格式化（PUT，PATCH）import axios from "axios" //引入//设置axios.

1.使用::deep深度修改标签样式找到需要修改的 ElementUI 标签的类名，然后在类名前加上 ::deep，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。<style lang="scss" scoped>::v-deep .el-select__popper.el-popper { background: rgba(42, 43, 60, 0.5); border: 1px rgba(103, 179, 229, 1) so.

判断上次的页面这次刷新的路由是否一样，不一样才刷新。 mounted: function() { if (location.href.indexOf("#reloaded") == -1) { location.href = location.href + "#reloaded"; location.reload(); } },或者判断上一个页面是不是登录页，是

onMarkerMap(d) { var objString = JSON.stringify(d); var datas = JSON.parse(objString); console.log(datas,'datas');}

解决办法：watch: { propsTime: { handler (newValue, oldValue) { console.log('props', newValue) this.getOverviewData() }, // 这里增加了一个immediate属性，说明监听到props传参后立即先去执行handler方法 immediate: true, }, },immediate属性有

问题说明在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有 __ob__: Observer 数组后缀的就是没有办法取到值，更可怕的是 console.log 却能看得到值。数组如下图所示：解决问题那么首先先解释一下为什么数组后面会出现__ob__: Observer ，这个后缀其实是Vue监控变量产生的，如果你是使用 push添加的对象信息就会出现__ob__: Observer 。__ob__: Observer并不是说不能遍历不能枚举，那到底为什么

将本地数据（.xlsx、.docx等文件）上传或导入数据库，有时候需要使用FormData 对象。FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。一、创建对象：创建一个FormData对象实例1、常用的创建let formData = new FormData();2、vue中的创建let formData = new window.FormData();3、在表单的基础上创建<form id="f

诚心特邀各位小伙伴加入：优快云大前端交流社区https://bbs.youkuaiyun.com/forums/WebLSR快来跟前端人一起交流学习吧，致力营造成资源共享型社区。目录前言使用捕获所有路由或 404 Not found 路由编程式导航命名视图别名路由组件传参不同的历史记录模式导航守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程路由元信息数据获取 数据获取 | Vue Router (v...

目录介绍为什么我们需要 Vue JS 性能优化？Vue 性能不佳背后的主要原因如何检查您的 VueJS 应用的大小？如何优化 Vue js 应用程序的性能？1. 在 Vue js 中懒加载2. 基于路线的代码拆分3.Vue js预加载组件4. 优化第三方库5. 使用浏览器缓存6. 优化和压缩图像结论最后假设您在开发整个 Vue 应用程序方面非常努力.js。但没有优先考虑其性能：现在，您的应用程序需要一段时间来加载、导航、提交或执行任何用户操作。您认为.

通过 url 传递参数控制页面显示数据的两种方式1. query 传统问号传参url 格式：xxx.com/product?id=123 模板内获取数据：this.$route.query.id2. params 动态路由匹配url 格式：xxx.com/product/123 模板内获取数据：this.$route.params.id 注意这个方式参数字段名 id 要在路由配置中定义 用冒号的形式标记 参数可以继续拼接 /student/:id/:name/:age/:address

最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：方法一：params传参：this.$router.push({ name:"admin",　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}}) //这个组件对应的路由配置{　　//组件路径 path

1.安装 FileSaver包npm install file-saver --save2.引入（在那个文件下用就在那个文件引入，用的多就去main.js全局引入） import {saveAs} from 'file-saver';3.将字符串转为Blob对象，触发事件即可导出为txt格式var data = '要导出的内容'let str = new Blob([data], {type: 'text/plain;charset=utf-8'});// 注意：这里要手动写上

nodejs简介：1、Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 JavaScript程序可以运行在浏览器中 JavaScript程序可以运行在Node.js环境中 Node.js在浏览器外运行的。安装Vue脚手架需要先安装Node.js (安装好了的不要随意卸载Nodejs)安装Node.js:1、win+r输入cmd 或者在我的电脑打开cmd查看是否安装nodejs：node -v下载Node.js：（找到与自己电脑对应的） 中文文档地址：[](

导航守卫 概念 “导航”表示路由正在发生变化 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中：全局的, 单个路由独享的, 或者组件级的。 导航守卫：包括全局导航守卫和局部导航守卫 全局守卫 vue-router全局有三个守卫 router.beforeEach ：全局前置守卫，进入路由之前 router.beforeResolve ：全局解析守卫，在beforeRouteEnter调用之后调用（不常用） route

内容很饱满，过程可能会枯燥，愿你经过风雨，过后能成为不一样的烟火????，为了奖励看到最后的小伙伴，博主为你们准备了礼物哦目录开始使用Vueel$mountdata插值表达式vue的响应式-1vm.$elvm.$nextTick & Vue.nextTickvue的响应式-2扩展_剖析Vue响应式原理Vue相关指令v-prev-cloakv-oncev-textv-html条件渲染v-ifv-elsev-else-i

背景因为我的子列表数据都是用的一个变量，所以需要折叠其他的，要不然多个表格展开后，数据渲染都是一样的下列列表是只可以展开一列的：第一步：直接抄我箭头指的那三行即可:row-key="(record)=>record.id" 这个主要用于获取id@expand="zi" 这个为了得到展开行的数据:expandedRowKeys="expandedRowKeys" 这个是负责控制行的展开与关闭，（这个变量是以数组的形式展示，谁的id在数组里就...

首先这是你想实现的效果嘛？如果是的话看这篇就够了，我会写的很详细！第一步在表格里插入一个表格 <a-table :expandRowByClick="true" :columns="columns" :data-source="datas" :loading="loading" @expand="zi" > <template #expandedRowRender="{ record }"> <a-table.

目录Vuex概况store核心概念vuex辅助函数如何使用多个组件共享同一个状态（数据）Getters Store中的计算属性vuex辅助函数辅助函数Vuex中的核心 --- modules实战解析State,Mutationsstore下的index.jsAone组件hello组件Actions,Gettersstore下的index.jsmyvux组件myhome组件辅助函数及Modulesstore下的index....

目录router的基本使用main.jsApp.vuerouter文件夹下的index.js(抽离router)动态传参+编程式导航App.vueuser.vue组件嵌套路由路由传参,懒加载router的index.jsInfo组件User组件App.vue守卫钩子（全局+独享+组件内的守卫）登录页路由About.vue补充 ：解决重复点击路由报错：$route和$router的区别：router的基本使用main...

目录1.setup2.ref3.reactive4.torefs:5.computedvue3.0可以有多个根节点1.setup函数的用法，可以代替vue2中的data和methos属性，compued属性，都是直接写在setup中就可以了//在script上加setup属性，组件编译过程中的代码运行是在setup函数中，所有es模块导出都认为暴露给上下文的值，并且包含在setup()返回对象中// 定义setup// setup是组件使用Composition.

vue脚手架3.X+ 由于之前我们安装了2.x版本的脚手架，现在我们需要安装3.x版本的脚手架。 因为Vue-cli 3.x和 vue-cli 2.x使用了相同的 vue 命令，所以 vue-cli 2.x 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，那么可以全局安装一个桥接工具。 桥接工具安装 npm如果有问题的话可以使用cnpm进行安装,二者选其一即可 如果没有安装旧版本的 vue-cli 2.x 可以跳过桥接直接安装vue-cli 3.x 及以上 安装vu

今天搞了一下午可算搞懂了，网上我查了好多资料发现好像有点老了都比如这种的：<template slot="action" slot-scope="text,record"> <a slot="action" href="javascript:;" @click="onUser(record)">用户</a> <a slot="action" href="javascript:;" @click="onRole(recor

组件化开发组件模块的分离 <div id="app"> <cpn></cpn> </div> <!-- 第1个方法.script标签类型必须是type="text/x-template" --> <!-- <script type="text/x-template" id="cpn"> --> <!-- 组件写这里更方便 --> <!-- <div>

我这里为了同学们好理解，把所有元素都写到一个页面。1.第一步安装插件npm install file-savernpm install xlsx2.第二步在mian.js中设置全局// vue中导出excel表格模板import FileSaver from 'file-saver'import XLSX from 'xlsx'Vue.prototype.$FileSaver = FileSaver; //设置全局Vue.prototype.$XLSX = XLSX; //设

项目开发流程划分目录 引用两个css文件 项目模块划分：tabbar->路由映射关系目录风格文件夹小写，组件大写比较清晰代码组织格式一个项目里页面唯一的用id，多个用class methods，方法里面写函数，生命周期只负责调用就行 页面复杂的话就再分子组件 $el：相当于根组件，可以拿到组件的js原生值比如浏览宽高目录结构注意看每个文件的后缀名，没有后缀的就是文件夹。src assets 静态资源 css base 地基（公共.

初识Vue<div id="app"> <!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 --> <h2>{{message+name}}</h2> <h2>{{mesage+' '+neme}}</h2> <h3>{{message}}</h3> <h1>{{name}}</h1> </div>&

一般项目不大就利用事件车，公共的Vue实例进行传递数据一共有两种写事件车的方式，下面一一介绍利用$emit发射自定义事件和$on监听自定义事件 $off销毁事件一、第一种方式 （创建公共文件）src文件夹下建立公共文件// 建立公共的js文件（事件车），主要用来传递信息// 引入vue.jsimport Vue from 'vue';// 创建空的vue实例var event = new Vue();export default event;hom...

|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js /..

目录我刚开始对数组里的对象属性监听监听一个对象及属性同样也可以设置计算属性computed来监听首次加载不调用监听函数我刚开始对数组里的对象属性监听以下对象里的newValue是改变后的新值，oldValue是改变之前的旧值watch:{ 'listMenu[4].value':{ handler(newValue, oldValue) {　　　　　　console.log(newValue)　　　　} }直接报错Watcher only acce.