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

目前是webpack下开发

 

1、图片的地址要用require（补充：当你的图片资源放在src目录下的话需要）

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="0"  ref="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

 

12、router

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

 

13、element 走马灯

@change="carouselChange"

//轮播切换
carouselChange:function (val, oldVal) {
},

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

 

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

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

另外补充一个最新发现的接口轮询请求方法可以解决setInterval引起的页面卡死问题

window.setInterval(() => {
  setTimeout(fun, 0)
}, 30000)

 

15、vue请求本地json文件

用到了express，在node安装时已经安装了express

在build-webpack.dev.conf.js文件里添加

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

//这个位置之后添加

/*添加json文件引入-后可删*/

const express=require('express')

const app=express()

var carList=require('../src/common/carList.json')

var carTypeList=require('../src/common/33.json')

var apiRoutes=express.Router()

app.use('/api',apiRoutes)

/*添加json文件引入-后可删*/

和

watchOptions: {

  poll: config.dev.poll,

}

//这个文件之后添加

/*添加json文件引入-后可删*/

,

before(app){

  app.get('/api/carList',(req,res)=>{

    res.json({

      errno:0,

      data:carList

    })

  }),

    app.get('/api/33',(req,res)=>{

      res.json({

        errno:0,

        data:carTypeList

      })

    })

}

/*添加json文件引入-后可删*/

请求json文件方法

this.$axios.get('/api/carList')

  .then(res=>{

 

16、vue设置button disabled

:disabled="addible"

addible的值是除了false之外的任何值时都将设置为disabled只有为false才会取消禁用

 

17、element table的CheckBox如何设置禁用

<el-table-column

  type="selection"

  :selectable='checkboxInit'

  width="60">

</el-table-column>

设置selectable属性

// CheckBox的初始是否可选状态设置

checkboxInit: function (row,index) {

    if (index === 1 || index === 2 || index === 3){ //这里只是模拟可根据具体需求来写，return 0 就是禁用

    return 0

  } else {

    return 1

  }

}