Web开发：用C#的逻辑理解VUE语法（VUE + Webapi小白开发笔记）

适用阅读对象：需要兼顾前端的C#后端开发人员（基础笔记）

一、后端交互-获取实体数据

后端返回结构

{
    "msg": null,
    "result": {
        "operationSituation": {
            "stationName": "xxxx"
        }
     }
}

【想法】获取到stationName,代码写法如下：

定义

//data中先定义列表loadData：
data() {
return {
loadData: null,
searchUrl1: '/xxx',//后端api

}

赋值

const request1 = axios.getData(this.searchUrl1, param)//请求接口

Promise.all([request1])//等待1个接口响应
.then(
(res) => {

          this.loadData = **res[0].result**//获取result1（序号是0）返回的结果的**result**对象
           this.loading = false

        }

渲染到前端（注意空判断）

站点名称是：{{ **loadData.operationSituation.stationName **}}

【如何获取更深的实体（例如直接获取OperationSituation）】

data中定义：
loadData: null,
operationSituation:null

Promise中写法（注意加this）：
this.loadData = res[0].result
this.operationSituation = this.loadData.operationSituation

html写法：

{{ operationSituation.stationName }}

二、变量

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 = true

this变量需要在data中声明，其余可以在方法中直接使用var等关键字声明

2.作用域

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号站点'
            break
        case 'BBB':
            change = 'B号站点'
            break
        default:
            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语法）

A-整理字段名

【需求】后端返回的结构中，包含一个数组List

details": [
                    {
                        "name": "AAA",
                        "value": 123,
                        "Time": null
                    },
                    {
                        "name": "BBB",
                        "value": 456,
                        "Time": null
                    }
]

const newarray = this.details.map(item => 
({ Newname: item.name,
    Newvalue: item.value
  })
)

var dataarray = tablesource.map(item => ({
...item, // 保留原始对象的其它字段
alarmTime: item.alarmTime.replace('T', ' ') // 替换 'T' 为空格
}))

//输出数组长度
const nameArrayLength = nameArray.length; 

const entity = list.find(x => x.id === 30)
if (entity) {
  console.log(entity.name) // 输出：Charlie
} else {
  console.log('未找到匹配的 id')
}

//获取列表：details数组中的name字段包含xxx字符串的数组
const filteredDetails = this.details.filter(item => item.name.includes('xxx'))

//包含字符A筛选
dataarray = dataarray.filter(item => newVal.includes('A'))

//includes方法支持数组筛选，注意是mainarray.inculudes(secondearray)
dataarray = dataarray.filter(item => newarray.includes(item.alarmType))

//假设Data是一个有数据的数组
Data.push(30)  //加入数字，相当于List<object>
Data.push({name: '123',value: 30]})  //加入实体，相当于List<Model> Model包含两个字段

const name = '123'
if (flag==false)
{
    name = '456'
}

<div style="margin-left: 100px;" id="vdrBarChart" class="Barcharts"></div>