
Vue
彭世瑜
记录我的工作学习笔记
展开
-
Vue2.js:xlsx实现Excel文件的导入导出
需求: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/原创 2020-12-30 12:03:59 · 1849 阅读 · 2 评论 -
关于vue.js的使用经验总结
css的作用域使用页面使用局部css样式,避免全局样式污染全局组件使用全局css样式,方便调用者样式覆盖原创 2022-06-21 13:12:13 · 250 阅读 · 0 评论 -
js: 监听键盘按键事件KeyboardEvent
【代码】js: 监听键盘按键事件KeyboardEvent。原创 2022-08-27 17:45:00 · 299 阅读 · 0 评论 -
Vue2.js迁移到Vue3.js的API变化
Vue2.js迁移到Vue3.js的API变化,原创 2022-08-26 17:30:13 · 468 阅读 · 2 评论 -
vue-cli3打包项目不同环境:开发环境、生产环境、测试环境
开发环境: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'原创 2020-05-12 17:48:43 · 3764 阅读 · 1 评论 -
Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
文档v-click-outside 可以实现点击外部区域才触发事件实现代码原创 2022-08-25 16:20:42 · 1235 阅读 · 0 评论 -
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
标签的padding值去掉,以免点击触发到结果项外边,保证结果项将整行都覆盖住。通过搜索,将搜索结果关联到当前页面的对象,原来点击一下就关联,弹框关闭。现在需要支持同一个搜索结果多次点击关联,加快处理速度。// 调用 callback 返回建议列表的数据。就不能收到点击事件,就不会关闭搜索结果了。将捕获点击事件,并且阻止传播。测试数据 data.json。// @select 触发。// 焦点触发搜索第一页。原创 2022-08-25 15:48:44 · 288 阅读 · 0 评论 -
element-ui:el-autocomplete实现滚动触底翻页
element-ui的 el-autocomplete 组件支持远程搜索输入建议,不过不能翻页,只能搜索到首页内容。要求实现下滑到底部的时候,触发翻页请求,查看更多结果。想办法监听到滚动事件,就能判断是否到达底部,然后进行。// 调用 callback 返回建议列表的数据。来监听滚动事件,需要注意事件的监听与移除监听。// 焦点触发搜索第一页。// 避免上次数据影响。原创 2022-08-25 15:35:26 · 695 阅读 · 0 评论 -
Vue项目打包部署Nginx配置及前端缓存问题解决
配置如下其中:/app 是网站根目录3、缓存问题解决浏览器缓存分类:html默认当做了静态文件传输,会被浏览器缓存,每次打开都拿不到最新的页面使用Charles抓包发现:访问网站首页压根没有进行请求,直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略nginx 添加以下配置,告诉浏览器怎么缓存html文件参数说明Cache-Control: no-cache协商缓存,只能应用于http 1.1,会返回304(资源无更新)Cache-Contro原创 2020-08-22 16:44:48 · 4565 阅读 · 1 评论 -
ElementUI:表格table列宽度压缩出现空白
table { width: 100% !important;}原创 2021-10-26 13:43:34 · 1302 阅读 · 0 评论 -
js: ElementUI表单验证validate和validateField
文档回顾1、validate:对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promiseFunction(callback: Function(boolean, object))2、validateField:对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: st原创 2021-09-23 10:44:42 · 12440 阅读 · 0 评论 -
Vue Router路由变化router-view视图不刷新
通过添加key 来让视图进行刷新<router-view :key="$route.fullPath" />原创 2021-09-22 12:02:51 · 1128 阅读 · 0 评论 -
TypeError: this.getOptions is not a function at Object.lessLoader
安装完 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原创 2021-09-17 14:27:02 · 712 阅读 · 0 评论 -
Vue:插槽属性prop的使用示例
插槽属性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原创 2021-01-25 15:13:25 · 1606 阅读 · 0 评论 -
Vue:a标签点击和file-saver实现文件下载
/ 存在浏览器兼容性。//释放掉blob对象。//下载完成移除元素。原创 2020-12-30 11:39:12 · 3772 阅读 · 0 评论 -
Cannot read property 'echarts' of undefined
场景描述:将echarts 引入到vue项目中,使用了地图map,在开发环境中引入没有问题import Echarts from "echarts";// 引入中国地图数据import "./china.js";打包上线后发现界面白屏,而且控制台报错Cannot read property 'echarts' of undefined问题解决由于参考了网上的文章,将china....原创 2020-04-20 20:19:07 · 6304 阅读 · 1 评论 -
Vue服务端渲染Nuxt.js实例
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...原创 2019-11-15 00:31:09 · 1073 阅读 · 0 评论 -
Vue项目中使用继承extends实现复用代码
parent.vue定义了1个方法和2个数据<template> <div class=""> 这是父组件 {{message}} </div></template><script>export default { name: 'Parent', data() { retur...原创 2019-11-14 22:56:43 · 2834 阅读 · 0 评论 -
Vue项目的预渲染与页面元信息配置
测试环境利用脚手架生成一个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...原创 2019-11-14 22:33:49 · 962 阅读 · 0 评论 -
Vue子孙三代的三级组件通信
1、首先是一个简单的示例三个文件app.vue # 自定义的业务,调用自己封装的组件child.vuechild.vue # 自己封装的第三方组件plug.vue,便于上层调用plug.vue # 第三方组件,提供v-model数据绑定调用层次结构 app -> child -> plugchild在这里起到一个承上启下的桥梁功能代码...原创 2019-11-05 11:39:01 · 1803 阅读 · 0 评论 -
Vue数据双向绑定.sync 和v-model
结论:.sync 和v-model两者的本质都是语法糖,目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一.sync修饰符父组件<comp :foo.sync="bar" ></comp>// 等价于, 组件属性名称一致<comp :foo="bar" @update:foot=...原创 2019-11-04 23:40:46 · 3492 阅读 · 2 评论 -
Vue新窗口打开this.$router
this.$router默认是当前窗口打开代码示例let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });window.open(routeData.href, '_blank');参考vue中$router.push打开新窗口...原创 2019-10-30 16:20:48 · 1466 阅读 · 0 评论 -
Vue深度作用选择器
1、使用 >>><style scoped>.a >>> .b { }</style>2、使用 /deep/<style lang="scss" scoped>/deep/ .upload-demo{ }</style>参考Vue scoped CSS 与深度作用选择器 /de...原创 2019-10-23 21:01:17 · 1220 阅读 · 0 评论 -
Vue项目通过scrollIntoView实现锚点点击页面平滑滚动
实现代码this.$el.querySelector(selector).scrollIntoView();完整代码实现<template> <div class="main"> <!-- 菜单 --> <div class="nav"> <a href="javascript:" @click="goA...原创 2019-10-14 16:06:40 · 12676 阅读 · 9 评论 -
Egg.js+Vant前后端实例
前后端环境$ 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 # 路由...原创 2019-10-14 00:28:20 · 1368 阅读 · 0 评论 -
Egg.js快速入门
Egg.js基于Node.js和Koa企业级应用开发框架特性提供基于Egg的定制上层框架的能力高度可扩展的插件机制内置多进程管理基于Koa开发性能优异框架稳定,测试覆盖率搞渐进式开发涉及内容vant uivue-cli3moment.jsEgg.jsmysql前后端联调开发环境Egg.jshttps://eggjs.org/zh-cn/intro/quickst...原创 2019-10-14 00:25:04 · 1125 阅读 · 0 评论 -
Bug:Vue路由不跳转而是刷新页面
问题Vue路由不跳转而是刷新页面解决经过同事的仔细观察,发现点击跳转时,路由中多了一个【问号】并刷新页面没有发生跳转,再次点击才生效方式一使用了click.prevent阻止form表单的默认提交事件<button @click.prevent="onSubmit" >登录</button>方式二button默认是submit类型,改成type=“butt...原创 2019-08-20 10:44:03 · 2917 阅读 · 0 评论 -
Vue中父组件与子组件之间的通信
prop 父组件向子组件传递数据, 单向绑定$refs 父组件调用子组件里的属性和方法$emit 子组件向父组件传递消息新建项目$ vue create demo$ cd demo$ npm run serve父组件引用子组件components/Child.vue<template> <h2>子组件</h2></templa...原创 2019-08-10 19:13:26 · 3627 阅读 · 2 评论 -
前端开发:axios在项目中的应用
用到的模块: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...原创 2019-08-09 00:23:04 · 1040 阅读 · 0 评论 -
前端开发:vant在vue中的使用
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...原创 2019-07-30 11:04:42 · 7361 阅读 · 1 评论 -
前端开发:axios在vue中的使用
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...原创 2019-07-30 10:58:22 · 4008 阅读 · 0 评论 -
Vue:从单页面到工程化项目
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...原创 2019-07-07 23:53:38 · 2312 阅读 · 1 评论 -
前端开发:Vuex的基本使用
Vuex为vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件状态以相应的规则保证以一种可预测的方式发生变化应用场景读取,多个视图依赖于同一个状态修改,不同视图的行为需要改变同一个状态组成部分State 数据仓库getter 获取数据Mutation 修改数据Action 提交mutation安装Vuex1、安装vuex包:npm install vue...原创 2019-08-17 21:55:13 · 968 阅读 · 0 评论 -
Vue 路由跳转 新窗口打开页面
1、router-link<router-link :to='url' target='_blank></router-link>2、$routerlet router = this.$router.resolve( { path: <yourPath>, query: { 'ticket': '123456' ...原创 2019-08-30 10:44:14 · 1726 阅读 · 0 评论 -
vColorPicker基于 Vue 的颜色选择器插件
主页: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...原创 2019-09-06 13:57:38 · 10957 阅读 · 9 评论 -
Vue:自定义v-model数据双向绑定
示例age 数据单向绑定name 数据双向绑定<template> <div> <h3>单向绑定数据</h3> <p>age: {{ age }}</p> <p>age: <input type="text" :value="age">&l...原创 2019-09-06 15:00:04 · 1176 阅读 · 0 评论 -
CDN方式使用Vue组件通信
代码示例<div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child></div><script src="./vue.js"></script><script> // 定义子组件 V...原创 2019-09-20 23:52:15 · 2529 阅读 · 0 评论 -
CDN方式Vue组件注册
代码示例<div id="app"> <global-child></global-child> <local-child></local-child></div><script src="./vue.js"></script><script> Vue.c...原创 2019-09-21 00:01:48 · 2337 阅读 · 0 评论 -
基于Vue实现多标签选择器
实现效果实现代码<html lang="en"><head> <title>Document</title> <!-- 引入本地组件库 --> <link rel="stylesheet" href="static/element-ui/index.css"> <script ...原创 2019-09-22 21:15:06 · 6863 阅读 · 2 评论 -
Vue基于$attrs及$listeners实现隔代通信
所谓隔代通信就是A 与C的通信A -> B -> C代码实例A.vue<template> <div id="app"> <!-- 此处监听了事件,可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonC...原创 2019-09-22 21:53:15 · 1443 阅读 · 0 评论