vue大前端从入门到放弃前端之美-VueJs

使用vue-element-admin救火完成后总结

2019-08-13  本文已影响98人  Figo_OU

新公司用的vue-element-admin开发前端。因为项目急还没招到人,所以参与了这次的前端开发。下面总结一些我在开发过程中遇到的“蠢问题”问题。

前提说明:

我用的是脚手架搭建的项目。网上说脚手架不利于debug,但其实也不难。后面说到。当然,npm,cnpm那些东西这里就不阐述了,可以参考https://panjiachen.github.io/vue-element-admin-site/zh/

1.如何调整view的样式呢?

例如我们要修改左上图片的高度。我们可以打开开发者模式,从左边找出该控件对应的样式,从右边的样式表中查找到对应的类.card-panel.那么我们就可以在代码中修改样式就可以了

.card-panel{
  height:200px
}
image.png

2.返回的请求数据能否用linq表达式呢?

可以的
项目路径的终端运行npm install linqjs就好了

使用代码如下:

var length = response.data.where(function(t) {
          return t.currentFloorCode === '5'
        }).length

其他使用场景可以具体参考https://www.npmjs.com/package/linqjs

3.vue methods 互相调用

这里直接用的别人的代码展示了

methods: {
      test1:function(){
            alert(this.test)
        },
        test2:function(){
            alert("this is test2")
            alert(this.test) //test3调用时弹出undefined
        },
        test3:function(){
            this.$options.methods.test2();//在test3中调用test2的方法
        }
  }

--------------------- 
版权声明:本文为CSDN博主「zj张静」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zhangjing1019/article/details/77942923/

4.关于嵌套调用中this的问题

错误写法:

    func1() {
      this.currentRunQuery.robot_code = this.mainElevatorCode
      getrobotrunningtaskstatus(this.currentRunQuery).then(response => {
        var obj = JSON.parse(response.data); 
        var _self = this  
        // 请求后调用别的方法
        this.$options.methods.func2()
      })
    },
    func2() {
          this.main_task_code = this.main_task_code //这里会报,this里面没有main_task_code 定义
      })
    },

正确写法:

    func1() {
      this.currentRunQuery.robot_code = this.mainElevatorCode
      getrobotrunningtaskstatus(this.currentRunQuery).then(response => {
        var obj = JSON.parse(response.data); 
        var _self = this  
        // 请求后调用别的方法
        this.$options.methods.func2(_self)
      })
    },
    func2(_self) {
          _self.main_task_code = _self.main_task_code 
      })
    },

参考文档:
https://element.eleme.cn/#/
https://panjiachen.github.io/vue-element-admin-site/zh/

ok,为期1个星期的前端开发之旅就结束了。后面开始算法的学习咯。

上一篇下一篇

猜你喜欢

热点阅读