vue 常用

1. $refs
   (1).普通元素获取dom值

   <div ref="vue">q</div>
   console.log(this.$refs.vue.innerText);
   

   (2).子组件上获取取组件实例，可以使用组件的所有方法

   <Action ref="comment" :flag="1"></Action>
   this.$nextTick(() => {
       this.$refs.comment.open();
   });
   

2. vue3 关闭eslint

   //vue.config.js
   module.exports = {
      lintOnSave: false
   }
   

3. 路由重定向

   routes: [
       {
         path: '/',
         name: 'login',
         redirect:'/index',
         component: login,
       }
    ]
   

4. filters 过滤器

   <span>{{ item.time | formatDate }}</span>
   filters: {
       formatDate: function (value) {
         let date = new Date(value);
         let y = date.getFullYear();
         let MM = date.getMonth() + 1;
         MM = MM < 10 ? "0" + MM : MM;
         let d = date.getDate();
         d = d < 10 ? "0" + d : d;
         let h = date.getHours();
         h = h < 10 ? "0" + h : h;
         let m = date.getMinutes();
         m = m < 10 ? "0" + m : m;
         let s = date.getSeconds();
         s = s < 10 ? "0" + s : s;
         return y + "-" + MM + "-" + d + "" + h + ":" + m + ":" + s;
       },
   },
   

5. element-ui 表格悬停背景色

   .el-table--enable-row-hover .el-table__body tr:hover>td{
       background-color: #516b91 !important;
   }
   

6. formatter 表格格式化，动态判断改变表格值

    <el-table-column prop="status" label="状态" :formatter="changeStatus"></el-table-column>
    <script>
    changeStatus(row) {
         if (row.status == 0) {
           return "待启动";
         } else if (row.status == 1) {
           return "进行中";
         } else if (row.status == 2) {
           return "排队中";
         }
       }
    </script>
   

7. axios请求

   this.axios.get('/xxxx',{params:{keyword:data}}).then((res)=>{})
   this.axios.get('/xxxx').then((res) => {})
   var data = {
       data1: this.text,
       action: "",
    };
   var formdata=new FormData();
   formdata.append('data1',this.text)
   formdata.append('action','add')
   this.axios.post("/xxxx", data).then((res) => {})
   this.axios.post("/xxxx", {user:this.text}).then((res) => {})
   this.axios.put("/xxxx" + id).then((res) => {})
   

8. vue3反向代理

   //vue.config.js
   module.exports = {
    devServer: {
       port: 8080,
       proxy: {
         '/api': {
           target:'http://localhost:8001',
           changeOrigin: true
         }
       }
     }
   }
   

9. 引入echarts

   npm install echarts --save
   
   import * as echarts from 'echarts';  //main.js
   Vue.prototype.$echarts = echarts
   
   mounted(){this.drawline();},
   methods:{
   	drawLine() {
         let myChart = this.$echarts.init(document.getElementById("echart1"));
         myChart.setOption({图表})
   }
   

10. 手动上传文件及其他信息

    <el-upload
       class="upload-demo"
        ref="upload"
        :auto-upload="false"  
        :on-change="handleChange"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="1"
        :file-list="fileList"
      >
      <el-button size="small" type="primary" class="el-icon-upload">点击上传</el-button>
    </el-upload>
    <script>
    handleChange(file, fileList) {
      this.fileList = file.raw;
    },
    videosubmit() {
       const videodata = new FormData();
       videodata.append("video_auth_id", this.selectid);
       videodata.append("video_title", this.videoForm.title);
       videodata.append("video_topic", this.videoForm.topic);
       videodata.append("video", this.fileList);
       this.axios.post("/api/xxxx", videodata).then((res) => {
         this.$message.success(res.message);
       });
    },
    </script>
    

11. element-ui 表格多余线条
    

    .el-table::before {
      z-index: inherit;
    }
    

12. class，css 三元选择

    <div :style="{ overflow: loading ? 'hidden' : 'auto' }">
    <div :class="[loading ? 'report_load' :'report_load_none' ]" >
    

13. watch和computed
    都是观察页面数据变化
    (1)watch：属性监听
    监听属性的变化，数据变化时执行异步

    watch:{
    	currentuid: function (data) {
    	      if (data) {
    	        this.showUserInfo(data);
    	      }
    	    },
     }
    

    (2)computed:计算属性
    通过属性计算而得来的属性，只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存

14. 栈， 队列

    var arr=[]
    if(this.socketData.lengh == 100){
    	this.socketData.pop();
    }else{
    	this.socketData.push(arr);
    }
    
    if (this.socketData.lengh == 100) {
        this.socketData.shift()
        this.socketData.push(arr);
      } else {
        this.socketData.push(arr);
      }