您的位置:首页 > 文旅 > 美景 > Web开发:用C#的逻辑理解VUE语法(VUE + Webapi小白开发笔记)

Web开发:用C#的逻辑理解VUE语法(VUE + Webapi小白开发笔记)

2024/12/23 10:49:00 来源:https://blog.csdn.net/m0_67412019/article/details/140804200  浏览:    关键词: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

    }

赋值

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

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:null

Promise中写法(注意加this):
        this.loadData = res[0].result
        this.operationSituation = this.loadData.operationSituation

html写法:
<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 = 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号站点'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语法)

A-整理字段名

【需求】后端返回的结构中,包含一个数组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})
)

B-整理字段内容

本例遍历alarmtime字段并且做一个字符串替换

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

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.数组中的Contais语法

//包含字符A筛选
dataarray = dataarray.filter(item => newVal.includes('A'))//includes方法支持数组筛选,注意是mainarray.inculudes(secondearray)
dataarray = dataarray.filter(item => newarray.includes(item.alarmType))

7.数组的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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com