vue.js开发历程
记录vue开发时遇到的问题以及解决方法
weixin_44635214
这个作者很懒,什么都没留下…
展开
-
vue中静态文件引用
assets文件夹与static文件夹的区别区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了区别二:assets中的文件在vue中的template/style下用…/这种相对路径的形式进行引用,在script下必须用@import的方式引入,而static下的文件在.vue中的任何地方都只要使用…/这种相对路径的方式引入,总结:1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。2.s原创 2020-10-29 10:46:36 · 550 阅读 · 0 评论 -
解决Vue中事件(eventBus)$on()多次触发问题
项目中使用了事件总线eventBus来进行两个组件间的通信,使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下:import Vue from 'vue'export default new Vue()在需要通信的两个组件中分别importimport eventBus from "common/utils/eventBus";然后就可以通过emit、on进行通信:如下://一个组件中发射eventBus .$emit('open_dialog',true);/原创 2020-09-29 16:44:56 · 2065 阅读 · 0 评论 -
vue-video-player在vue项目中无法显示controls按钮只有小方块
这几天做项目要用到视频播放插件vue-video-player,遇到了一个比较奇葩的问题,就是control栏的图标显示不出来,刚开始以为是css没有加载进来,审查元素才发现不是,一番折腾才发现是font字体没有被识别各种折腾才发现在项目的App.vue中发现一段css全局app.vue里把font-family写死了,将vue-video-player中标签的font-family覆盖了删除掉这一句css,video.js就正常了但是由于项目要求统一字体使用思源黑体,所以还有一种解决办法就是.原创 2020-09-29 15:35:39 · 3654 阅读 · 2 评论 -
vue中使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用创建SvgIcon组件<template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script>export def原创 2020-07-09 09:01:13 · 473 阅读 · 3 评论 -
探究Vue中父子组件生命周期执行顺序
写一个有父子嵌套关系的组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载.Vue父子组件生命周期钩子的执行顺序遵循:从外到内,然后再从内到外,不管嵌套几层深,也遵循这个规律。...原创 2020-06-15 14:31:46 · 174 阅读 · 0 评论 -
vue项目实现文件拖拽上传
1、基本代码<template> <div id="drop-area" :class="dropActive ? 'drop-active' : ''"> </div></template><script>export default { name:'index', data(){ return { dropActive:false } }, methods:{ dropEvent(e) {原创 2020-06-01 15:06:16 · 3365 阅读 · 0 评论 -
vue项目刷新当前页面的三种方法
最近项目加了一个新需求,游客模式在点击某些按钮是需要跳出登陆框,登陆成功后才可以生效,所以需要在登陆成功后重新刷新当前页面,下面总结了一些我的尝试方法:1、我一开始的想法就是使用这种方式,直接重新跳转至当前页面this.$router.replace({path:'/index'})试过后发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用,所以这种方法是不可行的;2、然后就想到最直接的方式就是像ctrl+F5 一样强制刷新:location. reload()t原创 2020-06-01 14:39:28 · 2600 阅读 · 0 评论 -
element-ui之el-table翻页后仍然记忆所勾选项
在vue和element的组合开发时,element总有会不满足需要的情况发生,所以经常需要我们自己去想解决办法,下面就是我总结的对于element中el-table翻页记忆勾选项的例子<template> <div class="test"> <el-table :data="tableList" border :height="tableHeigt" @select="select"原创 2020-05-25 17:51:38 · 994 阅读 · 0 评论 -
vue实现点击按钮选中复制
<template> <p id="copy-content">{{shareContent}}</p> <el-button @click="copyShare">复制分享链接</el-button><template><script>export default{ data(){ return { shareContent:"分享内容" } }, methods:{ copyShare原创 2020-05-20 16:34:38 · 684 阅读 · 0 评论 -
解决ie9/ie10项目报错,打不开问题
一般情况下,我们在ie上报语法错误,都会先进行安装npm install --save babel-polyfill,然后引包import ‘babel-polyfill’;但是现在已经引入babel-polyfill后也出现一些特殊的情况。比如在ie11上能够正常显示,但是用ie10或ie9项目会打不开,并且报语法错误。如下图:点击错误会进入到一个错误定位的地方,测试环境的代码会直接定位到错...转载 2019-08-15 15:22:00 · 565 阅读 · 0 评论