Vue整理
Vue安装
https://www.cnblogs.com/javalinux/p/14691241.html
1. 下载:https://nodejs.org/en/
2. 安装文件:
检测是否成功? node -v
3. 使用taobao镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
检测是否成功? cnpm -v
4. 安装全局vue-cli
npm install --global vue-cli
5. “:” 是指令 “v-bind”的缩写,“@”是指令“v-on”的缩写
6. 引用一个vue文件:
a. import EditDataSet from "@/views/report/resultset/components/EditDataSet"
b. components: {DesignDataSet: DesignDataSet}
c. 在插槽中使用,替换anji-crud.vue文件中的
...
ref="DesignDataSet"
:dataSet="dataSet"
:visib="dialogVisibleSetDataSet2"
@handleClose="dialogVisibleSetDataSet2 = false"
@refreshList="refreshList"
/>
....
...
d. 使用该引用:this.$refs.DesignDataSet.addDataSet(this.dataSet, type);
7. 打印日志:
console.log('hello parent: ' + this.dialogVisibleSetDataSet);
打开firefox,点击F12,查看控制台信息
console.log(dataSet);
也可以打印对象,这样可以看对象中的属性内容。
8. 嵌套el-dialog被遮罩层挡住
https://blog.csdn.net/weixin_43823766/article/details/94027841
modal-append-to-body='false' append-to-body>
append-to-body>
删除一条记录:splice(index,length)
10. 调用后台,提交数据:
return request({
url: 'dataSet/custDataSet',
method: 'post',
params: '',
data,
headers:{
'Content-Type': 'application/json;charset=UTF-8'
}
})
11. $emit:触发当前实例上的事件
12. 等待异步方法返回:
async loadDataSet() {
...
return data;
},
queryAllDataSet() {
this.loadDataSet().then(data => {
...
});
}
13. el-table默认选中行:
:data="dataColumnsData"
>
...
this.$nextTick(() => {
this.dataColumnsData.forEach(dataCol => {
if(...) {
this.$refs.dataColumnTable.toggleRowSelection(dataCol, true);
}
});
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
14. let和const
let:类似var,但是只在命令所在的代码块有效。可在for循环中使用
const:定义只读变量
15. await同步,await 关键字只能放到async 函数里面
async submit(formName) {
const { code } = await editDataSet(this.formData);
}