前端学习——工具的使用

1. 引入一个组件需要什么步骤

引入一个组件，一定不要加{}

（对）import editForm from “./component/editForm”;
（错）import { editForm } from “./component/editForm”;

<template><div style="height: 100%" class="pol-index fence-page"><edit-form							// 步骤2ref="newForm":show.sync="showNewForm":loading="newFormLoading":mode.sync="formType":bureauId="bureauId"@submit="newFormSubmit"/></div>
</template>import editForm from "./component/editForm";			// 步骤1

2. 监听变量的修改

data() {return {tipShow: false;}
},watch:{tipShow(newVal, oldVal){console.log("原始数值为", oldVal);console.log("修改数值为", newVal);}
},

3. async与await实现异步调用

// 获取待处理事件总数async getTotalCount() {let taskCount = await this.getTaskList();let maintenanceCount = await this.getMaintenanceList();let insuranceCount = await this.getInsuranceList();this.totalCount = taskCount + maintenanceCount + insuranceCount;},// 获取待审批任务列表async getTaskList() {// 构造参数let obj = {state: 0,};let data = {...this.page,...obj,};// 访问后端，获取待审批任务列表return new Promise((resolve, reject) => {taskList(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},// 获取保养设备列表async getMaintenanceList() {let data = {...this.page,};return new Promise((resolve, reject) => {searchMaintenance(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},// 获取过期设备列表async getInsuranceList() {let data = {...this.page,};return new Promise((resolve, reject) => {searchInsurance(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},

4. position: relative

position: relative;: 这意味着该元素的定位是相对于其正常位置。
当您为这个元素添加top、right、bottom或left属性时，这些值会相对于其正常位置进行调整。

5. 定时执行方法

// 定义timer对象
data(){return {timer: null,}
}// 初始化timer对象，5秒执行一次getTotalCount()
initTotal() {this.getTotalCount();this.timer = window.setInterval(() => {this.getTotalCount();}, 5000);
},// 销毁timer对象
beforeDestroy() {window.clearInterval(this.timer);
},