vue项目开发中遇到的几个问题？《闲着无聊总结了的—一个作为两年工作经验的程序员》

1.使用elment或者mintUI库时，需要全局引入ui库的css文件；然后在修改自己样式时，需要将自己的css文件引入到main.js中才会生效，全局引用
2、使用v-html展示dom字符串时，相应的css文件中的样式是不会生效的，需要使用组件展示dom

3、axios使用，是需要一个qs的node模块，然后请求的数据格式是表单格式的，需要设置header的Content-Type格式

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'


Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs，序列化data数据

　　axios({
　　　　method: 'post',
　　　url:prefix + url,
　　　　data: qs.stringify(data),
　　　　timeout: 30000,
　　　　headers: {
　　　　　　// 'X-Requested-With': 'XMLHttpRequest',
　　　　　　'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
　　　　}
　　})

4、watch监听object时，需要进行深度监听，因为vue默认只监听data中的属性一级


watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

5、写props时可以写成对象{ }，里面配置数据类型

6、axios请求是异步的，需要注意在其then之后操作，否则拿不到数据，此时可以保存axios返回的Promise对象，然后在Promise的then方法中做异步操作

7、使用事件总线传值时， $emit 和$ on方法是存在先后顺序的，必须是 $on事件监听的绑定要在$ emit事件发送之前建立，否则就是能监听到事件，但是传递的值也会丢失，谨记

8.vue项目中用v-for 循环本地图片，图片不显示，解决办法：使用require动态引入图片，或将图片放static文件夹里面。

<img v-bind:src="require(item.imgurl)">

9.合并多个对象并去重（es6）

    let objTwo = {b:2};
    let objThree = {b:4,c:5};
    let obj = Object.assign(objOne,objTwo,objThree);
    console.log(obj)    // {a:1,b:4,c:5}
    let obj1={...objOne,...objTwo,...objThree};
    console.log(obj1)   // {a:1,b:4,c:5}

10.vue计算属性里如何传参：需求是需要把数值转为三位数，类似1需要变为001，10变为010这样。下面是正确写法，页面中用{{convertToThree(num1)}}，{{convertToThree(num2)}}，{{convertToThree(num3)}}即可获得对应三位数的模样：

    el:'#app',
    data:{
        num1:0,
        num2:10,
        num3:100
    },
    computed:{
        convertToThree:function(){
            return function(num){
                  if(num>=0 && num <=9){
                    return '00' + num
                  }else if(num>=10 && num <=99){
                    return '0' + num
                  }
                    return num
                }  
        }
    }
})          ```
11.小程序中moveToLocation失效问题修复

```           uni.getLocation({ //需要先授权
    type:'gcj02',
    success(res) {
 
        setTimeout(() => { // 1、定时器 绑定经纬度 
            vm.longitude = lon
            vm.latitude = lat
            vm.scale = 16;
        }, 300)
                    
        vm.mapContext.moveToLocation({ // 2、移动到指定位置
           longitude: lon,
           latitude: lat
        });
    }
})    ```

******喜欢的可以点个关注点个赞，谢谢！

vue项目开发中遇到的几个问题？《闲着无聊总结了的—一个作为两年工作经验的程序员》

推荐阅读更多精彩内容