![](https://img-blog.csdnimg.cn/20191026112609868.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue.js学习总结
明致成
人生海海,山山而川,不过尔尔!
展开
-
在vue项目中自定义事件总线eventHub
由于在工作中vue的项目中使用了大量是全局事件总线广播,使得某些方法在某种情况下被重复多次调用,查看了一下原因,是因为在每个单文件组件中定义的事件接收器和事件广播器在页面销毁的时候没有注销导致的。于是在保证改动量不大的前提下,决定自定义一个全局事件总线文件。之前的使用是在 main.js 文件中 vue.prototype.$eventHub = vue.prototype.$eventHub || new Vue()因此,重新定义一个文件 EventHub.js/** * Created原创 2021-01-03 13:49:19 · 768 阅读 · 0 评论 -
V3主要功能点总结
参考自开课吧。原创 2020-08-24 08:58:49 · 255 阅读 · 0 评论 -
使用elementUI的upload上传文件,用自定义请求(FormData)覆盖默认action,并实现表格预览excel数据
需求1、使用elementui组件库的upload上传文件2、后端接口要求前台将文件对象以FormData的形式发送请求3、前端请求接口前,要提前预览数据方法1、用elementUI组件的upload提供的 http-request 钩子覆盖默认的上传行为,实现自定义上传2、使用 xlsx 将文件流数据转换成JSON格式的数据以下是代码实现:首先安装xlsx:npm in...原创 2020-05-01 13:30:44 · 2729 阅读 · 1 评论 -
vue-light-timeline时间轴插件的使用
vue-light-timeline时间轴插件的使用第一步、安装:install第二步、引入:main.js第三步、使用:timeline.vue第一步、安装:installnpm install vue-light-timeline --save第二步、引入:main.jsimport LightTimeline from 'vue-light-timeline';Vue.use(...原创 2020-04-11 14:45:26 · 3172 阅读 · 2 评论 -
vue使用vue-xlsx-table包读取Excel文件,并实现单元格数据可编辑
Vue读取Excel并以表格形式展现在页面上,并实现单元格数据可编辑第一步、安装:install第二步、引入:main.js第三步、使用:ExcelRead.vue最近由于公司项目需求,我在画原型图的时候发现,有个功能是前端导入Excel文件并在页面上进行预览,在预览过程中用户可能会修改某个单元格的数据。因此,本文来实现利用node包vue-xlsx-table实现此需求。第一步、安装:i...原创 2020-03-26 08:26:15 · 4106 阅读 · 0 评论 -
Vue中使用类封装CSS3实现的序列图动画
考虑到大家现在更多的使用的是VUe,于是呢我考虑把之前发的这篇文章(https://blog.csdn.net/LiyangBai/article/details/105028359)用es6的类去封装,然后在vue中使用它。说干就干~AnimationUtil.jsimport ColorUtil from "./ColorUtil"/** * 生成动画css字符串,生成的动画字符...原创 2020-03-22 15:24:57 · 1386 阅读 · 0 评论 -
如何将vue中自定义的组件编译打包输出,并提供给其他系统使用(或者上传到npm仓库)?
最近,本人参与的一个系统突然要考虑一个问题:那就是把系统A中的一些公共的组件页面提供给其他系统使用。面对这个问题,我认为有以下两种方式:1、提供一个页面URL,直接甩给其他系统调用者,并加上权限验证2、将公共组件编译成文件,并以包的方式输出给其他系统这里我们来考虑方式二如何实现:1、建立一个用来打包编译的工程plugin-generator-system安装脚手架npm instal...原创 2020-01-11 09:45:15 · 2760 阅读 · 3 评论 -
命令行操作VUE及其相关插件的方法
今天为止,我已经入职一个月了,这一个月有辛酸有快乐。心酸的是没有人搭理你,你就像个傻子一样坐在那里,没有任何你说话。快乐的是我又学到了好多vue相关的知识,虽然都是我一步一步采坑踩过来的。今天做个总结:1、命令行创建项目的方法首先必须cd到一个空文件夹中vue init webpack vue-demo1如果安装不成功,则:cd vue-demo1cnpm install...原创 2018-08-01 10:27:08 · 663 阅读 · 0 评论 -
VUE组件传值与引用
1、父组件引入子组件:父组件引入子组件,三步走: 第一步:引入子组件 import StateWatchListPage from '子组件的路径'; 第二步:将子组件名称加入到components对象 components:{ StateWatchListPage } 第三步:使用子组件 <state-...原创 2018-08-01 10:51:29 · 4287 阅读 · 0 评论 -
vue学习中的一些注意事项
1、父子组件的生命周期函数的加载过程?父子组件之间的传值问题? 周期函数加载过程: 父组件的beforeCreate->父组件的created->父组件的beforeMount->子组件的beforeCreate->子组件的created->子组件的beforeMount->子组件的mounted->子组件的...(其他生命周期函数...原创 2018-08-09 11:55:09 · 330 阅读 · 0 评论 -
vue项目下离线安装插件步骤总结
由于公司电脑有网络限制,所以只能进行离线安装一些需要的插件,以下是安装步骤:这里我们以element UI 为例:首先在有网络的电脑上初始化一个新的vue项目,然后输入命令:npm install -g element-ui这时候在vue项目下的node_modules文件夹下就会找到一个element-ui文件夹,但是千万有注意,它也有很多依赖的模块,比如:async-valid...原创 2018-08-30 17:11:43 · 15499 阅读 · 2 评论 -
vue生命周期相关说明
异步请求,初始化应该放在created阶段DOM相关操作只能在mounted阶段开始对所有数据的更新完毕处理,可以在updated阶段若要数据每次更新之后都立即处理,可以在this.$nextTick()中处理watch可以针对具体某个属性变化后进行处理,若要对数组、对象深度监听,要添加deep:true...原创 2018-09-14 13:11:59 · 157 阅读 · 0 评论 -
vue学习总结
计算属性computed对象中的方法调用的时候不能加括号()父子组件之间的通信问题:方法一:父向子传:props子向父传:this.$emit()方法二:单个插槽:适用于那些数据相同,但展示模板相近又不一样的情况在父组件中定义子组件的插槽内的HTML标签,样式定义在父子组件中都可以具名插槽:引用多个插槽,避免插槽重复作用域插槽:可以传递数据,但子向父传。子决定数据,父决定...原创 2018-09-30 14:20:30 · 229 阅读 · 0 评论