new Promise((resolve) => {
console.log("执行操作1");
resolve();
}).then(() => {
console.log("执行操作1");
});
async 修饰一个函数,表示该函数是一个会返回Promise对象的的异步函数。(执行异步函数时,不会阻塞异步函数外层的代码执行)
await修饰一个Promise对象,在async 修饰的函数内部使用,表示要等到该Promise对象resolve或reject后才执行后面的代码
async fun(){
await new Promise((resolve)=>{
op2();
resolve();
})
op2();
}
如果失效,可以手动设置延时来进行顺序控制
setTimeout(() => {被延时的操作}, 300);
截取:substr(start,length)
拼接:str1+str2
切割:split(“-”) 把字符串按照-作为分割符切割,返回切割后各部分组成的数组
push:向数组的末尾添加一个或多个元素,并返回新的长度
pop:删除并返回数组的最后一个元素
shift:删除并返回数组的第一个元素
unshift:向数组的开头添加一个或更多元素,并返回新的长度
splice:
1、删除,当参数形式为splice(index,1)时表示删除下标为index的内容
2、更新,当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值
3、增加,当参数形式为splice(index,0,item)时表示在下标为index的位置增加一项值为item
sort:对数组的元素进行排序
reverse: 反转数组中元素的顺序
安装
cnpm install vuex@3 --save
创建 store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//对外暴露store类的一个实例
export default new Vuex.Store({
state: {
userInfo: {}
},
mutations: {
userInfo(state, userInfo) {
state.userInfo = userInfo
}
},
actions: {},
getters: {}
})
项目main.js导入
import store from './store';
new Vue({
store,
render: h => h(App)
}).$mount('#app')
A组件保存得到的数据
import { mapMutations } from "vuex";
methods: {
...mapMutations(["userInfo"]) //把vuex中的userInfo方法映射挂载到组件实例上
}
this.userInfo(userInfo);//把info保存到vuex中
B组件获取vuex中的值,并使用
computed: {
userInfo() {
return this.$store.state.userInfo;
},
},
<div>{{ userInfo }}div>
通过vuex,我们获取到了Home在mounted时期从后台获得的数据
好!现在就是把它们以好看的形式渲染出来就行了
选择表格组件渲染如下:
表格的发布时间项和状态项不太方便用户阅读和理解,我们应当先对其处理一下再进行渲染
阅读官方文档,发现el-table-column有一个formatter属性可以绑定一个函数来格式化单元格的内容
实现删除按钮:
后端删除需要实现一个接口,明天再写
参考文章:
vue【插件】uuid —— 生成 uuid
Vue使用uuid-npm快速生成uuid,适用于多种场景