彭世瑜的博客

需求：Vue2.js + ElementUI 项目，通过xlsx实现一个前端的 Excel 导入和导出功能文档兼容性依赖示例依赖 package.json引入element-uidata.jsApp.vue工具类文件 utils.js导出截图完整代码：https://github.com/mouday/vue-excel在线演示：https://mouday.github.io/vue-excel/

css的作用域使用页面使用局部css样式，避免全局样式污染全局组件使用全局css样式，方便调用者样式覆盖

【代码】js: 监听键盘按键事件KeyboardEvent。

Vue2.js迁移到Vue3.js的API变化，

开发环境：vue-cli-service serve 默认：process.env.NODE_ENV=development.evn.developmentENV = 'development'VUE_APP_BASE_URL = 'https://development.demo.com'生产环境：vue-cli-service build // 默认：process.env.NODE_ENV=production.env.productionENV = 'development'

文档v-click-outside 可以实现点击外部区域才触发事件实现代码

标签的padding值去掉，以免点击触发到结果项外边，保证结果项将整行都覆盖住。通过搜索，将搜索结果关联到当前页面的对象，原来点击一下就关联，弹框关闭。现在需要支持同一个搜索结果多次点击关联，加快处理速度。// 调用 callback 返回建议列表的数据。就不能收到点击事件，就不会关闭搜索结果了。将捕获点击事件，并且阻止传播。测试数据 data.json。// @select 触发。// 焦点触发搜索第一页。

element-ui的 el-autocomplete 组件支持远程搜索输入建议，不过不能翻页，只能搜索到首页内容。要求实现下滑到底部的时候，触发翻页请求，查看更多结果。想办法监听到滚动事件，就能判断是否到达底部，然后进行。// 调用 callback 返回建议列表的数据。来监听滚动事件，需要注意事件的监听与移除监听。// 焦点触发搜索第一页。// 避免上次数据影响。

配置如下其中:/app 是网站根目录3、缓存问题解决浏览器缓存分类：html默认当做了静态文件传输，会被浏览器缓存，每次打开都拿不到最新的页面使用Charles抓包发现：访问网站首页压根没有进行请求，直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略nginx 添加以下配置，告诉浏览器怎么缓存html文件参数说明Cache-Control: no-cache协商缓存，只能应用于http 1.1，会返回304(资源无更新)Cache-Contro

table { width: 100% !important;}

文档回顾1、validate：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))2、validateField：对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: st

通过添加key 来让视图进行刷新<router-view :key="$route.fullPath" />

安装完 less-loadernpm i less-loader报错TypeError: this.getOptions is not a function at Object.lessLoader原因是版本过高降级安装即可解决问题npm install less-loader@6.0.0参考TypeError: this.getOptions is not a function

插槽属性prop的使用示例文档：https://cn.vuejs.org/v2/guide/components-slots.html子组件<template> <div class=""> <span v-for="item in list"> <slot v-bind="item">{{item.name}}</slot> </span> </div></template

/ 存在浏览器兼容性。//释放掉blob对象。//下载完成移除元素。

场景描述：将echarts 引入到vue项目中，使用了地图map，在开发环境中引入没有问题import Echarts from "echarts";// 引入中国地图数据import "./china.js";打包上线后发现界面白屏，而且控制台报错Cannot read property 'echarts' of undefined问题解决由于参考了网上的文章，将china....

nuxtjs： https://zh.nuxtjs.org/SSR：server side render1、使用模板新建项目vue init nuxt-community/starter-template <project-name>cnpm installnpm run dev2、配置axioshttps://github.com/nuxt-community/axi...

parent.vue定义了1个方法和2个数据<template> <div class=""> 这是父组件 {{message}} </div></template><script>export default { name: 'Parent', data() { retur...

测试环境利用脚手架生成一个vue项目，需要选择 vue-router# 安装 Vue Clicnpm install -g @vue/cli$ vue --version3.12.0# 创建一个项目vue create vue-demo一、预渲染1、安装插件cnpm install prerender-spa-plugin --save2、配置预渲染vue.conf...

1、首先是一个简单的示例三个文件app.vue # 自定义的业务，调用自己封装的组件child.vuechild.vue # 自己封装的第三方组件plug.vue，便于上层调用plug.vue # 第三方组件，提供v-model数据绑定调用层次结构 app -> child -> plugchild在这里起到一个承上启下的桥梁功能代码...

结论：.sync 和v-model两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一.sync修饰符父组件<comp :foo.sync="bar" ></comp>// 等价于, 组件属性名称一致<comp :foo="bar" @update:foot=...

this.$router默认是当前窗口打开代码示例let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });window.open(routeData.href, '_blank');参考vue中$router.push打开新窗口...

1、使用 >>><style scoped>.a >>> .b { }</style>2、使用 /deep/<style lang="scss" scoped>/deep/ .upload-demo{ }</style>参考Vue scoped CSS 与深度作用选择器 /de...

实现代码this.$el.querySelector(selector).scrollIntoView();完整代码实现<template> <div class="main"> <!-- 菜单 --> <div class="nav"> <a href="javascript:" @click="goA...

前后端环境$ node -vv10.16.0前端部分1、项目环境# 创建项目cnpm install -g @vue/clivue create client && cd client# 安装依赖cnpm i vant -S # vantcnpm i babel-plugin-import -Dcnpm i vue-router --save # 路由...

Egg.js基于Node.js和Koa企业级应用开发框架特性提供基于Egg的定制上层框架的能力高度可扩展的插件机制内置多进程管理基于Koa开发性能优异框架稳定，测试覆盖率搞渐进式开发涉及内容vant uivue-cli3moment.jsEgg.jsmysql前后端联调开发环境Egg.jshttps://eggjs.org/zh-cn/intro/quickst...

问题Vue路由不跳转而是刷新页面解决经过同事的仔细观察，发现点击跳转时，路由中多了一个【问号】并刷新页面没有发生跳转，再次点击才生效方式一使用了click.prevent阻止form表单的默认提交事件<button @click.prevent="onSubmit" >登录</button>方式二button默认是submit类型，改成type=“butt...

prop 父组件向子组件传递数据, 单向绑定$refs 父组件调用子组件里的属性和方法$emit 子组件向父组件传递消息新建项目$ vue create demo$ cd demo$ npm run serve父组件引用子组件components/Child.vue<template> <h2>子组件</h2></templa...

用到的模块：Vue: https://cn.vuejs.org/v2/guide/Axios: http://www.axios-js.com/zh-cn/docs/vant: https://youzan.github.io/vant/#/zh-CN/intro可参考文章前端开发：axios在vue中的使用前端开发：vant在vue中的使用1、接口配置server/con...

1、安装# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目vue create hello-world# 安装vant npm i vant -S# 完整写法：npm install vant --save# 安装插件 npm i babel-plugin-import -D# 完整写法： npm install babel-plugi...

Aixos1、Aixos特性（1）支持Promise API（2）拦截请求和响应（3）装换请求数据和响应数据（4）取消请求（5）自动转换JSON数据（6）客户端支持防御XSRF2、Axios基础用法get post put等请求方法3、Axios进阶用法实例 配置 拦截器 取消请求4、Axios进一步封装Axios基础用法文档：https://www.npmjs.com...

Vue模板语法，条件渲染，列表渲染vue-router vuexvue-cli用到的网站：https://cn.vuejs.org/v2/guide/https://cli.vuejs.org/zh/guide/https://www.bootcdn.cn/开发环境1、IDEwebstorm http://www.jetbrains.com/webstormvscode h...

Vuex为vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件状态以相应的规则保证以一种可预测的方式发生变化应用场景读取，多个视图依赖于同一个状态修改，不同视图的行为需要改变同一个状态组成部分State 数据仓库getter 获取数据Mutation 修改数据Action 提交mutation安装Vuex1、安装vuex包：npm install vue...

1、router-link<router-link :to='url' target='_blank></router-link>2、$routerlet router = this.$router.resolve( { path: <yourPath>, query: { 'ticket': '123456' ...

主页：http://vue-color-picker.rxshc.com/Github：https://github.com/zuley/vue-color-picker很不错的插件，支持吸管拾取颜色安装$ npm install vcolorpicker -S使用在 main.js 文件中引入插件并注册# main.jsimport vcolorpicker from 'vc...

示例age 数据单向绑定name 数据双向绑定<template> <div> <h3>单向绑定数据</h3> <p>age: {{ age }}</p> <p>age: <input type="text" :value="age">&l...

代码示例<div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child></div><script src="./vue.js"></script><script> // 定义子组件 V...

代码示例<div id="app"> <global-child></global-child> <local-child></local-child></div><script src="./vue.js"></script><script> Vue.c...

实现效果实现代码<html lang="en"><head> <title>Document</title> <!-- 引入本地组件库 --> <link rel="stylesheet" href="static/element-ui/index.css"> <script ...

所谓隔代通信就是A 与C的通信A -> B -> C代码实例A.vue<template> <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonC...