vue 常用

最新推荐文章于 2024-02-20 11:02:37 发布

止语之语

最新推荐文章于 2024-02-20 11:02:37 发布

阅读量104

点赞数

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_36685539/article/details/115088066

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

$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();
});

vue3 关闭eslint

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

路由重定向

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

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;
    },
},

element-ui 表格悬停背景色

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

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>

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) => {})

vue3反向代理

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

引入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({图表})
}

手动上传文件及其他信息

<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>

element-ui 表格多余线条
在这里插入图片描述

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

class，css 三元选择

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

watch和computed
都是观察页面数据变化
(1)watch：属性监听
监听属性的变化，数据变化时执行异步
```
watch:{
	currentuid: function (data) {
	      if (data) {
	        this.showUserInfo(data);
	      }
	    },
 }
```
(2)computed:计算属性
通过属性计算而得来的属性，只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存

栈，队列

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);
  }