模板 代码如下 html <template> <div class="header"> <ul> <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 --> <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(ite

简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-saver xlsx npm install -D script-loader 使用 ## 1.在项目的 src 目录下新建文件夹(名字任意),创建如下两个文件 *** 文件1:Blob.js /* eslint-disable */ /* Blob.js*/ /*global self, unesca

最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度,当内容部分内容高度大于设置的高度时,产生滚动条 c.左右部分也设置固定宽度,左边设置固定宽度,右边设置成窗口的宽度减去左边部分的宽度,当右边部分的宽度大于设置的宽度时产生滚动条 扩展思路: a.监控左右(x)滚动条滚动到右边边缘时,可以触发事件(如:加载下一批数据) b.监控上下(y)滚动条滚动到下

css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left"></div> <div class="main_right></div> </div> css样式: .main{ overflow: hidden; } .main_left{ width: 20%; height:100%; float:

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 data数据是后端接口返回的,其中的数据格式是这样的: [ { "studentId": "ff808081651e03d4016530b937f50a33", "studentName": "傅xx", "studentC

注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx  和  npm install -D script-loader.其次,在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:http://files.cnblogs.com/files/luyuefeng/vendor.rar).之后就可以愉快的导入导出了. 1.导入 <inpu

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv

(一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.js安装器界面,如下图所示: 我们只要一直点击继续按钮即可,采用默认设置,安装成功后最终的效果图如下图所示: 默认是安装了npm,我们可以在终端中输入node -v和npm -v命令,分别查看node和npm的版本是多少,若Node安装成功后在终端只会输出版本号,若不是这些信息就表明安装失败了:在我这

本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取.(前端也可以自己设置文件名)这其中遇到两个问题,第一是文件名获取不到:第二是返回的数据data已经被转成了Blob无法读取错误时后端反馈的信息 不多BB,上代码和解决方法: 第一步发送请求 Axios.request({ method: 'GET', url: `${baseUrl}/order/e

vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有更好的性能,非常容易优化,因为他不用脏检查.而angular中,watcher越来越多的时候整理代码性能就会变得越来越慢,因为作用域中的每一次变化,所有的watcher都需要重新计算.并且,如果一些watcher触发另一个更新,脏检查循环可能要运行多次.angular用户常常需要头疼解决脏检查循环机

Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescrip

Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescrip

写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门Webpack,看这篇就够了>(网址:http://www.jianshu.com/p/42e11515c10f),看完这篇文章,相信大家对于webpack包管理工具会有一个新的认识. 一.cnpm的安装 npm是node的包管理工具,由于npm是基于国外的服务器,所以有些电脑运行起来比较慢,在这里我们选

浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直接Next 这里同样的,有固态硬盘的童鞋可以安装到固态硬盘,不过这里有个小问题就是 在选择目录的时候会卡死一小会儿.可能是若羽的机器性能不太好. 接下来一路下一步即可,坐等安装 安装完成,让我们命令行测测看 win键 + R呼出运行,输入cmd确定即可 输入node -v,查看nodejs的版本.若

1.mint-ui官网:https://mint-ui.github.io/#!/zh-cn 可以点击开始使用,里边有详细的讲解.安装mint-ui: 官网是: 但是应用没有装成功,不知为何,可能是我配置原因导致的吧~然后搜索之后用的: 1)npm i mint-ui -S 2)这里官网很详细的写了,在你配置好的vue项目中找到main.js.我这里全部引入了~~ . 2.下边开始说下VUE的重点目录逻辑. 1)页面中现在一共2个页面文件夹,也就是2个页面~其中index.vue就是首页,而in

1.准备 全文重点在于搭建环境,其他相关知识点请百度. VS2017 升级到最新的版本 安装 net core 2.0 安装 npm (npm相关使用请百度或咨询前端小伙伴) 全局安装 webpack (webpack相关使用请百度或咨询前端小伙伴) vue 的使用 (推荐看一下vue创建的webpack项目模板) axios的使用,vue中用于调用后端接口的方法 2.创建AspNetCore MVC项目 3.清空项目 删除不必要的文件后,项目文件结果如下: 4.初始化项目 4.1 在项目web

现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: https://ecomfe.github.io/echarts-doc/public/en/index.html 前端框架使用vue,服务器使用express搭建,交互使用axios. 一.引入vue-resource 通过npm下载vue-resource //命令行中输入 npm install

版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事:也可在第二次搭建的时候作为步骤回顾与参考. 一.在node.js官网下载node.js并安装 //官网下载地址 https://nodejs.org/en/download/ 二.安装镜像 //如果公司有搭建私服,使用公司私服镜像 npm set registry http://127.0.0.1:

一.Vue自动化工具的安装 nvm:nodejs 版本管理工具. 也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本. nodejs:在项目开发时的所需要的代码库 npm:nodejs 包管理工具. 在安装的 nodejs 的时候,npm 也会跟着一起安装,它是包管理工具. npm 管理 nodejs 中的第三方插件 1,安装nvm 它是一个node管理工具,当我们的电脑上有多个node版本时,nvm可以帮我们切换node版本. 下载地址:https://github.com/

最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql+vue开发环境搭建 因为之前做项目的时候都是在别人(合作开发的大神)搭建好环境后,我直接学习相关的前端开发知识进行开发的,所以这次可以说是我第一次接触到后台(...应该算是后台吧..)的东西. 我首先遇到的问题是项目目录的构建问题(不要笑!我就是这么小白/(ㄒoㄒ)/~~) 问题: 后台的expr

vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的个人站点就准备先创建项目. 然后就出现了一系列问题,可能是很久没用吧,太生疏了,之前又不小心把环境变量删除了,结果各种不是内部或外部命令. 这里要说的问题就是一个让我很不爽的问题: I  Your application is running here: http://localhost:8080