VUE知识点整理

一、安装less及less-loader依赖

　npm install less less-loader --save-dev

scoped的作用：样式只在当前组件或者视图中起作用的。

二、移动端px自动转rem
参考这篇文章
https://cloud.tencent.com/developer/article/1492497
另一种方式
在index.html里加入

三、更新本机局域网以连接手机
1.找到config文件夹里面的index.js

2.
获得本机的IP ->运行cmd-> ipconfig

把本机的IPv4 地址填写至host处

3.重新运行服务即可
四、分页的写法
1.微信小程序写法

 let collectionList = that.data.page == 1 ? [] : that.data.collectionList;
 let page = res.data.result.length <= 0 ? that.data.page : ++that.data.page;
collectionList.push(...res.data.result);

2 VUE写法、
vue里引入ElementUI框架的分页写法：直接使用Pagination 分页组件

  handlePageChange(e) {
     document.getElementsByClassName('el-main'[0].scrollTop = 0;
      this.page = e;
      this.getPersonList();
      },
  handlePageSizeChange(e) {
      document.getElementsByClassName('el-main')[0].scrollTop = 0;
      this.page = 1;
      this.pageSize = e;
      this.getPersonList();
      },

六、时间戳转换成正常时间的过滤器

  filters: {
    formatTime: function(value) {
      let time = new Date(value * 1000);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
      let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
      let minute = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      let second =time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }
  },

七、路由跳转
不传参

  
  
   todetail() {
      this.$router.push({ path: "/clientDetail"});
     }

传递、

   todetail(user_id) {
      this.$router.push({
        path: "/clientDetail",
        query: {user_id}
      });
  }
接收参数、
 this.user_id = this.$route.query.user_id ? this.$route.query.user_id : "";

八、上拖加载更多数据（使用的NutUI里的InfiniteLoading 无限加载）
参考官网：http://nutui.jd.com/#/InfiniteLoading
引用组件

 

     
{{item.formatDate}}
        

          

          
          
{{item.remark}}
         
         
{{item.update_time | formatTime}}
      
  

思路：接口判断上一页是否有数据，有则pash进上一页的数据组成新数组；同时定义一个变量判断有没有下一页的数据用于上拖加载

let newsList = that.page == 1 ? [] : that.newsList;
that.noMore = res.data.result.ardar.length == 0 ? true : false;
newsList.push(...res.data.result.ardar);

  //下拉加载分页
  onInfinite() {
      var that = this;
      let page = that.page;
      if (!that.noMore) {
        page = ++page;
        that.page = page;
        that.loadData();
      } else {
        that.isHasMore = false;
      }
    },

九、筛选同一天的时间组成新数组

  //筛选同一天的时间并重组成新数组
       let arr = newsList;
       let i;

        for (let x in arr) {
             if (i != request.formatDate(arr[x].update_time, 2)) {
                  i = request.formatDate(arr[x].update_time, 2);
                  arr[x].formatDate = request.formatDate(arr[x].update_time, 2);
                }
         }
         
       that.newsList = arr;

未完待续0.0