-
$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); }
vue 常用
最新推荐文章于 2024-02-20 11:02:37 发布