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

我是苏苏 2024-09-10 15:03:02 阅读 55

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

目录

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

 1.post和get请求基本框架

2.post-【携带入参】

3.get-【携带入参】

二、变量

1.声明

2.作用域

三、字符串的处理

四、数组(列表)的处理

1.数组中的Select语法(提取特定字段到新数组)

2.数组中的foreach语法

【字符串转化switch】

【数组中的for循环】

1.基础

2.map/forEach语法

A-整理字段名

B-整理字段内容

 C-添加字段和内容

 D-添加实体

3.数组的Length语法

4.数组的First语法

5.数组的Where语法

6.数组中的Contais语法

7.数组的Add语法

8.数组的Distinct方法

9.OrderBy方法

五、export default中的各个对象的作用

六、快捷键

1.批量格式化文档

附录一、Vue易犯错误:

1.变量声明和方法调用

2.静态页面运行和debug调试


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

 1.post和get请求基本框架

<code>data() {

return {

requestUrl:'/getdata'

}

}

axios.postData(this.requestUrl, {}).then((res) =>

{

//方法体

})

axios.get(this.requestUrl).then((res) =>

{

//方法体

var data = res.result //你获取的json不一定key是"result",灵活调整

})

2.post-【携带入参】

写法一

axios.post(this.requestUrl, {

id: 1,

name: 'Alice',

list: [1, 2, 3]

}).then((res) => {

// 处理响应数据

});

写法二

const params = {

id: 1,

name: 'Alice',

list: [1, 2, 3]

};

axios.post(this.requestUrl, params)

.then((res) => {

// 处理响应数据

});

3.get-【携带入参】

注意:get和post不一样,这里需要加上params:{ {   //这里写入参  }  }

axios.get(this.requestUrl,params: {

{

id: 1,

name: 'Alice'

}

}).then((res) =>

{

// 处理响应数据

});

 二、修改全局变量

【传入】DictData  【传出】data第1个元素 

当然也可以直接用同步方法处理:

<code>export default {

data() {

return {

dictData: [], // 1.定义变量

formItems: []

};

},

methods: {

initializeData() {

//3.数据注入表单

this.formItems = [

{ id: 1, data: this.dictData },

{ id: 2, data: [2, 3, 4] }

];

}

},

created() {

this.dictData = [ /* 2.获取数据,比如说get请求 */ ];

this.initializeData();

}

};

二、变量

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

var num = '123'

var snum = parseInt(num, 10) //字符串转为十进制的int

const Code = 'abc'

console.log(`我的Code是: ${Code}`)//字符串拼接

四、数组(列表)的处理

【情景须知】后端返回的结构如下:

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语法

【字符串转化switch】

调用一个方法,将上面获得的结果扔进去

var newArray = this.GetNew(nameArray)

代码如下:

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循环】

1.基础

 列表:

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] //访问数组里面的数据

}

2.map/forEach语法
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 newarray = tablesource.map(item => ({

...item, // 保留原始对象的其它字段

alarmTime: item.alarmTime.replace('T', ' ') // 替换 'T' 为空格

}))

 C-添加字段和内容

增加一个score字段,由原字段id决定其值

var newarry =list.map(item =>

({

...item,

score: item.id < 5 ? 90 : 100

})

);

【注意】以上的map方法可换成forEach,区别:(是forEach不是foreach

①forEach 修改原数组。

②map不修改原数组,返回新数组,因此要用var newarray来接修改后的新数组。 

 D-添加实体

//列表追加实体

var result = []

for (let i = 0; i < list.length; i++) {

  item = list[i]

  var entity = {} // 初始化 entity 为空对象

  entity.id = item.pid

  entity.name = item.label

  result.push(entity) //列表.add(实体)

}

console.log(result)//打印列表

3.数组的Length语法

//输出数组长度

const nameArrayLength = nameArray.length;

4.数组的First语法

【情景】后端传入一个数组,存入list(id name)中,如何获取id=30的name的值呢

【严重警告】前端没有FirstOrDefault方法,获取实体后必须判断其情况!不可直接对象.属性(空引用直接报错)

【正确的例子】

const entity = list.find(x => x.id === 30)

if (entity)

{

console.log(entity.name) // 输出:Charlie

}

else

{

console.log('未找到匹配的 id')

}

【错误的例子】

const name = list.find(x => x.id === 30).name

console.log(name) //空引用,不报错,直接不运行后面的代码!

5.数组的Where语法

//获取列表:details数组中的name字段包含xxx字符串的数组

var result = this.details.filter(item => item.name.includes('xxx'))

var result = this.details.filter(item => item.name==='John')

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包含两个字段

8.数组的Distinct方法

 list是一个数组(List<string>),去重方法:

var unique = [...new Set(list)]

//【备注】Set 自动去重,然后使用扩展运算符 ... 将其转换回数组

9.数组的OrderBy方法

【需求】newarray2有很多字段,对value字段进行排序

newarray2.sort((a, b) => a.value.localeCompare(b.value))  //升序

newarray2.sort((a, b) => b.value.localeCompare(a.value))  //降序 

五、 字典

const polluCodeMap = { 'CO2': 'CO₂(ppm)', 'N2O': 'N₂O(ppb)', 'CH4': 'CH₄(ppb)', 'CO': 'CO(ppm)', 'SF6': 'SF6(ppb)', 'H2': 'H2(ppb)' }

const title = polluCodeMap[this.polluCode] || '(ppb)'//假设this.polluCode是入参,匹配不到返回'(ppb)'

六、export default中的各个对象的作用

export default {

    name:"",

    components:{},

    data() { return{ } },

    watch:{},

    created(){},

  mounted(){},

    methods:{},

computed: {}

}

name 组件名称 (相当于class xxx)components 注册子组件(相当于using xxxx)data() 定义变量watch  变量的Changed事件created() 构造函数(严格来说是生命周期钩子函数,在组件实例被创建后但在挂载前调用)methods 定义函数方法计算属性(computed):data() 中的变量的值发生改变,都会触发一次computed方法

 【区别】

winform和vue对比

created() mounted() Form Form_Load
执行顺序 先 
区别 元素未加载前调用 元素加载后调用 控件未初始化前调用 控件已初始化后调用
相似情况 A B A B

七、其他语法

1.展开运算符(三个点)

<code>const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

八、快捷键

1.批量格式化文档

附录一、Vue易犯错误:

1.变量声明和方法调用

变量声明

① 使用全局变量不在data()声明

② const定义后不可以再覆盖该值,若想修改用var声明

方法调用

① 方法调用不加this.

② 不等于和等于:请使用双等三等     !==   ===

2.静态页面运行和debug调试

静态页面

① 使用全局变量不在data()声明

② 元素样式不生效:试试内联样式,优先级最高

debug

① 不命中断点:

        断点之前就报错

        更新代码后,新旧代码后行数不对应,要重新刷新

② 部分页面生效:

        修改了前端文件A和B,运行前端情况下,仅保存了文件A,B的修改不会生效(原因:保存只重新编译当前保存文件;解决方案:1.都保存一遍  2.停调前端重新yarn/npm run sever)

 



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。