vue开发总结

前言

最近在公司里面一直负责写前端vue项目，之前完全没有vue开发经验，所以把开发过程中的一些问题总结下来，方便自己参考；

正文

1、路由传参取值方法：this.$route.params；

2、获取cookies的uesrname的方法：

import Cookies from 'js-cookie'

Cookies.get('username',50);

3、当重新登陆改变cookies的username的方法：（src/view/login/login.vue）

import Cookies from 'js-cookie'

Cookies.set(‘username’,username);

4、获取localStorage中username的方法：

username:localStorage.getItem('userName’);

5、提示信息方式：

（1）alert(“成功”)；

（2）this.$Message.success("成功")

6、四种路由传参数：

（1）this.$axios.post('/syncJob/addAllInfo', {

  taskInfo: this.taskInfo,

  saInfo: this.sascheduleInfo,

  sdaInfo: this.sdascheduleInfo,

  requestId: this.requestId

}).then(res => {

  //this.getSDA()

});

（2）this.$axios.post(`/syncJob/rejectTable/${this.requestId}/${this.tableId}`,params).then(res=>{

  this.$Message.success("成功")

  this.handleSearch()

});

（3）this.$axios.post(`/business_lines/`, {

     businessLineName: this.BusinAdd.businessLineName,

}).then(res => {

  this.hisData.list = res.data;

  this.listBusinessLineAll();

})；

（4）this.$axios.get('/syncJob/list', {

  params: {

    pageSize: this.search.pageSize,

    pageNum: this.search.pageNum,

  }

}).then(res => {

  this.hisData.list = res.data.list;

})

7、跳转指定页面：

（1）window.location = 'http://www.baidu.com';

8、if(confirm('确定要删除吗')==true) {}

9、钩子函数created()

10、this.$router.go(0)刷新当前页面、this.$router.go(-1)返回上页面;

11、每次axios请求一次进行拦截，在src/libs/axios-config.js配置；

12、修改src/components/main/main.vue

（1）导航栏菜单控制是否显示；

（2）控制菜单栏大小；

13、右上角显示登陆人名字：src/components/main/components/user/user.vue;

14、默认输入错误参数跳转到指定页面：router/index；

17、表格固定：fixed: 'right’,控制固定右列；fixed: ‘left’,控制固定左列；

18、左侧导航栏菜单修改：main.vue修改

19、修改ico图标：public文件修改图片名字；或者public的index.html修改图标名字

20、table表格属性：

（1）//加属性判断是否可以选中该数值

v._disabled = v.syncStatus != 0;

（2）// 跳回页面选中id不取消

v._checked = multipleSelectionAll.id;

22、修复所有的eslint --fix形式：

在package.json中添加：”lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ test/unit test/e2e/specs"

23、前端table中render函数转换数据：

render:(h,params)=> {

  let dataType=params.row.datasourceType;//1.mysql, 2.oracle, 3.mongo

  if (dataType==1){return h('div','mysql')};

  if (dataType==2){return h('div','oracle')};

  if (dataType==3){return h('div','mongo')};

},

24、函数生命周期：

created()、handlesearch()、mounted()函数;

created(){}函数创建一次，就不再创建;

handlesearch()

mounted()挂载函数;

25、设置input框不可修改：disabled；

26、this.$forceUpdate();设置强制刷新；如果数据编辑以后，没有实时渲染到table页面，看看返回值hisdata||hisdata.list;

27、this.DataEdit.datasourceType=row.datasourceType+'', //后面传空字符，将整型转换为字符串类型

28、vue遍历获取数据：

  this.$axios.get('/getsyncrequest', {}).then(res => {

    res.data.forEach((index)=>{

      if(index.isOperator==true && index.status==3){

        nCount=nCount+1;

      }

    });

    console.log("待操作数量",nCount);

  });

},

29、下拉框既可以输入也可以选择，加filterable属性；

<Select v-model="search.productLineName" @on-change="loadDatabase" style="width:180px" filterable>

  <Option v-for="item,index in productLineVOList"

          :value="item.productLineName"

          :label="item.productLineName"

          :key="index">

  </Option>

</Select>

30、菜单路由导航，定义路由，但是不想导航中出现：hideInMenu: true

31、前后端交互，前端只需传给后端page-当前页，pagesize-当前页数据条数；

32、显示可清空按钮：开启属性 clearable 可显示清空按钮；

33、vue中scoped只作用于当前页面，去掉之后作用于全局；使用deep影响到子组件；

34、css调整组建位置：

（1）float:right调整整行button等组件大体位置；

（2）margin-right、margin-left、maring-bottom,调整组件分别距离左边、右边、上边多少；

（3）text-align：center；调整组件当中文字位置；

35、vue遍历数组、对象的写法：

（1）filter写法：this.hisData.list = res.data.filter(v => !v.delFlag);

（2）map写法：this.selectIndexId = val.map(v => v.id);

（3）js遍历json数组对象，并且去除content的值：

var typeArr = new Array();

for(var i = 0;i<infoList.length;i++)

{

    typeArr.push(infoList[i].type)   //获取到type的值

    for(var j = 0;j<infoList[i].typeList.length;j++)

    {

        var info = infoList[i].typeList[j];

        alert(info.ID);

        alert(info.startDate);

        alert(info.endDate);

        alert(info.adultNum);

        alert(info.childrenNUm);

    }

};

36、表格缩小 :<table size=“small”>

37、禁用按钮能够选中：disabled：true;

38、友情链接+文字提示+新标签窗口打开链接(target="_blank”):

<Tooltip content="元数据系统" style="margin-top: 8px">

  <a style="margin-top: 8px;margin-right: 10px" href="http://meta.finupgroup.com" target="_blank"><img

    src="../../../src/assets/images/元数据系统.png"></a>

</Tooltip>

39、获取cookies用户信息：

import Cookies from 'js-cookie'

Cookies.get('userName');

40、每两秒调用一次函数：

mounted(){

  this.getData();

   setInterval(this.getData, 2000); 

},

41、解决图片溢出：

series: [

  {

    type: 'pie',

    radius: '50%',  // 控制图片大小

    center: ['44%', '60%'],  // x轴 、y轴

    boundaryGap: true, // 坐标轴两边是否留白(解决图片溢出)

}

]

 

参考资料