持续更新……
问题一: 关于右键浏览器的“检查”有哪些看点?
- 对于一些函数是自带参数的,例如一些绑定的事件,接收到的参数是
scope
应该是scope对象,此时在函数里操作scope的属性如何查看和调用呢?
例如 组件如下:
先写出函数和接收的参数scope
,然后console.log(scope);
将scope打印出来,如下:
handleUpClick(scope){
console.log(scope);
},
此时在浏览器上观察打印出来的数据,如下图:(...)
这个可以点开查看里面的参数值
可以看到 scope
对象的所有属性,调用时可以按照这个层级来写。例如:
scope.$index
| scope.row.id
| scope.row.dr
network部分:
有了接口后,可以查看到:
安装vue-devtools Github下载地址:https://github.com/vuejs/vue-devtools
安装成功后浏览器是这样的:
可以查看到项目中的组件属性和类型,很方便~
问题二: 怎么合并两个功能相似的方法(两个方法都需要接收参数)?
由于两个方法都需要接收参数,所以不能将这两个函数放在一个大函数里加判断。
针对上面的第一幅图的组件,分别写了两个对应的函数,一来是代码方便理解,二来在函数内部调用另一个整合好的函数handleChangeClick(scope,type)
,并传了
handleUpClick(scope){
this.handleChangeClick(scope,'up');
},
handleDownClick(scope){
this.handleChangeClick(scope,'down');
},
handleChangeClick(scope,type) {
console.log('==============',scope);
var submitData;
if(type === 'up'){
submitData = {
currentId: scope.row.id,
changedId: this.currentData[scope.$index - 1].id
};
} else {
submitData = {
currentId: scope.row.id,
changedId: this.currentData[scope.$index + 1].id
}
}
this.$http({
url: '/wbalone/wbarea/sort',
method: 'post',
dataType: 'json',
data: submitData
}).then((res) => {
if (res.data.success === true) {
if(type === 'up'){
this.$message({
message: '上调成功',
type: 'success'
});
} else {
this.$message({
message: "下调成功",
type: 'success'
});
}
this.request();
}
})
},
$nextTick 是什么鬼?
$set 怎么用?
$set是往里面塞属性的。
例如:往resData
对象数组的最后一个元素中加lastest
,并给lastest
赋值为true
this.$set(resData[resData.length - 1],'lastest',true);
console.log("resData=",resData);