vue使用过程中遇到的坑--个人总结(不定时更新)

最近在用vue,_(:3」∠)_腥风血雨啊,这里总结一些学习使用过程中遇到的坑,因为是学习中所以会一直更新总结

目前是webpack下开发

1、图片的地址要用require

navList:[
  {src:require('../assets/home.png'),txt:"首页",href:"#" }
]

设置background要用

v-bind:style="{'background':'url('+require('../assets/logo.png')+')'}"

 

2、路由——点击按钮先提交内容获取服务器返回信息后跳转到新页面并显示数据

// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'searchResult', params: { result: text }})

3、element-坑

用某些表单时自动生成的import和components要删除,不然       IE下报错页面空白

 

4、element轮播--取消自动播放

用autoplay为false没用,设置interval为0起作用

<el-carousel trigger="click" :interval="0" >

 

5、element-点击显示大图且大图轮播

坑---大图轮播显示当前点击图片首次点击总是报错从第二次点击开始正常

@click="showCarousel(index)"

图片点击的时候把当前index传进去

showCarousel:function (index) {
  this.imgIndex=index;
  this.dialogShow=true;
  if(this.$refs.carousel){
    this.$refs.carousel.setActiveItem(index);
  }
}

调用的方法里修改imgIndex的值,并且把这个变量设置为轮播的initial-index(初始状态激活的幻灯片的索引)

 

<!--弹出框-->
<el-dialog :visible.sync="dialogShow">
  <el-carousel trigger="click" height="620px" :interval="0ref="carousel" :initial-index="imgIndex">
      </el-carousel>
</el-dialog>
<!--弹出框-->

 

6、px和rem混用

我们有时要js获取offsetLeft之类的距离得到的是px如果这时我们用的是rem作单位,混合算一些值的时候统一用px来算,宽度之类直接用offsetWidth来获取px而不是用设置好的rem单位值


7、rem.js的引入(onresize效果也实现)

在src下建一个common(随便起)文件夹存放rem.js文件

自执行方法,这样当页面尺寸改变时rem值也随之改变。

再在main.js里import './common/rem'

rem.js内容

(function(doc, win) {
  let docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = (clientWidth / 19.2) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

8、Class绑定

<i v-else :class="{'el-icon-loading':loading,'el-icon-upload':!loading}" class="avatar-uploader-icon"></i>

 

9、echarts

echarts不能通过Vue.use()全局调用,使用有两种方法

一是在需要使用图标的.vue文件中直接引入

import echarts from 'echarts'

然后

let myChart = echarts.init(document.getElementById('myChart'))

如果想要全局使用,可以在main.js引入

import echarts from 'echarts'

然后

Vue.prototype.$echarts = echarts 
let myChart = this.$echarts.init(document.getElementById('myChart'))

 

10、vue+echarts+rem,图表尺寸为rem,点击刷新按钮图表尺寸bug

更改rem.js代码

(function(doc, win) {
  let docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = (clientWidth / 19.2) + 'px';
    };
  if (!doc.addEventListener) return;
  recalc();//增加这一句代码============================
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

11、父子组件渲染顺序

beforeCreate->created->beforeMount->beforeCreate->created->beforeMount->mounted->mounted

 

12router

{path:'*', redirect:'/'}//如果路径输入错误重新导航至首页

13、element 走马灯

@change="carouselChange"
//轮播切换
carouselChange:function (val, oldVal) {
},

val是当前索引,oldVal是上一页的索引

 

14、任何时候当你用了setInterval都请在结束时清除这个定时器clearInterval

别以为你跳转路由渲染新的组件了它就不会继续影响你了_(:3」∠)_,no way

 




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liona_koukou/article/details/80075228
文章标签: vue
个人分类: web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭