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>

 

 

 

9. 数组常用方法：https://www.cnblogs.com/ifieer/p/9926533.html

删除一条记录：splice(index,length)

 

10. 调用后台，提交数据：

return request({

url: 'dataSet/custDataSet',

method: 'post',

params: '',

data,

headers:{

'Content-Type': 'application/json;charset=UTF-8'

}

})

 

11. $emit：触发当前实例上的事件

https://www.cnblogs.com/ctztake/p/9204365.html

 

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

}