Web开发：用C#的逻辑理解VUE语法（VUE + Webapi小白开发笔记）
适用阅读对象：需要兼顾前端的C#后端开发人员（基础笔记）
目录
一、后端交互-获取实体数据
二、变量
1.声明
2.作用域
三、字符串的处理
四、数组(列表)的处理
1.数组中的SELECT语法（提取特定字段到新数组）
2.数组中的foreach语法
【字符串转化】
【数组中的for】
【数组字段的重命名整理】（map语法）
3.数组的Length语法
4.数组的First语法
5.数组的Where语法
6.数组的Add语法
百、VUE3易犯错误：
一、后端交互-获取实体数据
后端返回结构
{"msg": null,"result": {"operationSituation": {"stationName": "xxxx"}}
}【想法】获取到stationName,代码写法如下：
定义
//data中先定义列表loadData：
data() {
return {
loadData: null,
searchUrl1: '/xxx',//后端api}
赋值
Promise.all([request1])//等待1个接口响应
.then(
(res) => {this.loadData = res[0].result//获取result1（序号是0）返回的结果的result对象
this.loading = false}
渲染到前端（注意空判断）
<div class="report-item-title" v-if="loadData" >
站点名称是：{{ loadData.operationSituation.stationName }}
</div>
【如何获取更深的实体（例如直接获取OperationSituation）】
data中定义：
loadData: null,
operationSituation:nullPromise中写法（注意加this）：
this.loadData = res[0].result
this.operationSituation = this.loadData.operationSituationhtml写法：
<div class="report-item-title" >
{{ operationSituation.stationName }}
</div>
二、变量
1.声明
var str = '123'
var nums = 123
var array = [] //数组，例如 arr:[{ name:'susu',age:15},{ name:'linlin',age:18}]
var obejct =null //对象，例如 obj:{ name:'susu',age:15}
var bool = true2.作用域
Method() {const d = 0; // 声明的变量 `d` 在最近一层的花括号内部有效let a = 1; // 声明的变量 `a` 在最近一层的花括号内部有效var b = 2; // 声明的变量 `b` 整个方法有效，即在 `Method` 方法内部有效this.c = 3; // 使用 `this.c`，如果 `c` 已经在 `data` 对象中声明，它是全局对象的一个属性，因此在整个程序中都是有效的
}三、字符串的处理
var str = 'abcde'
var b = str.includes('de') //true
var c = str.split('c')[0] //'ab'
var sub = str.substring(1, 4); // 'bcd'
var trimmed = str.trim(); // 'abcde' 去除空格let num = 123 //数字转化为字符串
let str2 = num.toString() // 使用 toString() 方法，注意是大写S四、数组(列表)的处理
【情景须知】后端返回的结构如下：
details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]假设前端已经定义了一个数组this.details，并且将后端的数据赋值给它。
1.数组中的SELECT语法（提取特定字段到新数组）
【需求】提取所有 name 属性到一个新数组
const nameArray = this.details.map(item => item.name)2.数组中的foreach语法
【字符串转化】
调用一个方法，将上面获得的结果扔进去
var newArray = this.GetNew(nameArray)方法如下(if语句)：
GetNew(nameArray){ const newArray = [] // 创建一个空数组，用于存放处理后的结果 for (let i = 0; i < nameArray.length; i++) // 使用for循环遍历nameArray{var change =''//每次循环都创建一个变量存储if (nameArray[i]=='AAA'){change='A号站点'}else if (nameArray[i]=='BBB'){change='B号站点'}else{change=nameArray[i] //其余的直接返回}newArray.push(change)}return newArray
}也可以写成switch语法：
GetNew(nameArray){ const newArray = [] // 创建一个空数组，用于存放处理后的结果 for (let i = 0; i < nameArray.length; i++) // 使用for循环遍历nameArray{var change =''//每次循环都创建一个变量存储switch (nameArray[i]) {case 'AAA':change = 'A号站点'breakcase 'BBB':change = 'B号站点'breakdefault:change = nameArray[i] // 其余的直接返回}newArray.push(change)}return newArray
}【数组中的for】
列表：
for (let i = 0; i < list.length; i++) // 使用for循环遍历列表
{var item = list[i].name //访问列表中的name实体var jtem = list[i].value
}
普通数组;
for (let i = 0; i < array.length; i++) // 使用for循环遍历数组
{var item = array[i] //访问数组里面的数据
}【数组字段的重命名整理】（map语法）
【需求】后端返回的结构中，包含一个数组List<details> 包含：name value Time，我想提取name和value字段到前端中，提取成List<newdetails> 包含:Newname Newvalue，取值来自于后端的name value。
【后端返回】
details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]【实现代码】用map遍历并且创建数组（this.details是后端返回的）
const newarray = this.details.map(item =>
({ Newname: item.name,Newvalue: item.value})
)3.数组的Length语法
//输出数组长度
const nameArrayLength = nameArray.length; 4.数组的First语法
【情景】后端传入一个数组，存入list(id name)中，如何获取id=30的name的值呢
const entity = list.find(x => x.id === 30)
if (entity) {console.log(entity.name) // 输出：Charlie
} else {console.log('未找到匹配的 id')
}5.数组的Where语法
//获取列表：details数组中的name字段包含xxx字符串的数组
const filteredDetails = this.details.filter(item => item.name.includes('xxx'))6.数组的Add语法
//假设Data是一个有数据的数组
Data.push(30) //加入数字，相当于List<object>
Data.push({name: '123',value: 30]}) //加入实体，相当于List<Model> Model包含两个字段百、VUE3易犯错误：
1.一个方法调用另外一个方法，没用this
2.变量没在data()声明
3.代码修改保存后，忘记F5刷新页面（一般来讲，修改html css保存后不需要刷新网页，修改js保存后需要刷新网页 ）
4.如果进入不了debugger 就是在这之前报错了（F12调试一下吧）
5.const定义常量不可以再赋值，若想再次修改请用var或let声明。（以下写法是错的，应该改为var）
const name = '123'
if (flag==false)
{name = '456'
}6.如果你的父级元素设置了某些样式，你可以在子元素的 style 属性中直接覆盖这些样式，因为内联样式优先级更高
<div style="margin-left: 100px;" id="vdrBarChart" class="Barcharts"></div>