前端小组第二次培训2023/10/7

JavaScript为弱类型语言，包含以下基本数据类型

Number（数字类型）

表示数字，可以是整数或浮点数。

String（字符串类型）

表示文本数据，可以使用单引号' '或双引号" "括起来。

let str1 = "Hello!";
var str2 = "Hola!";

Boolean（布尔类型）

表示真或假的值。

Null（空类型）

表示一个空值。

Undefined（未定义类型）

表示一个未定义的值。

Array（数组）

表示数据集合，可以由相同数据类型或不同数据类型组成，声名时用[]。

let arr1 = [1, 3.14, true, "STRING"];	//number, number, boolean, string
var arr2 = [2.7, false, "string", 6, {name: "John", age: 19, married: false}];	//number, boolean, string, number, object

Object（对象）

表示由若干数据与函数/方法组成的完整个体，声名时用{}。

let person1 = {
    name: "Lily",		//string
    age: 19,		//number
    sex: "female",		//string
    married: false,		//boolean
    grow: function() {	//function/method
        this.age++;
    },
    marry: function() {	//function/method
        this.married = true;
    }
}

var person2 = {
    name: "Michael",	//string
    age: 20,		//number
    sex: "male",		//string
    married: false,		//boolean
    grow: function() {	//function/method
        this.age++;
    },
    marry: function() {	//function/method
        this.married = true;
    }
}

Object Array（对象数组）

数组内的数据为对象。

let object_array1 = [
    {ID: "1", name: "高等数学", grade: 90},
    {ID: "2", name: "线性代数", grade: 87},
    {ID: "3", name: "程序设计", grade: 93}
];
var object_array2 = [
    {ID: "1", name: "离散数学", grade: 80},
    {ID: "2", name: "计算机组成原理", grade: 83},
    {ID: "3", name: "数据结构", grade: 96}
];

以上为局部变量声明方法↑

以下为全局变量声明方法↓

Page({	//Page()为内置的页面函数{}以及其中的内容为传入其中的参数，为一个对象，内包含data全局变量对象和其他函数，共同构成一个对象，所以data与其他函数需用逗号(,)分割，Page({})基本是死写法
    data: {	//data本质上也是一个对象
        str: "This is a string.",	//string
        num: 60,			//number
        bool: true,		//boolean
        arr: [1,"?!",false],	//array
        obj: {			//object
            id: 1032,
            value: "芝士雪豹",
            accessible: true
        }
    }
})

局部变量用=，全局变量用:。

函数声明

示例代码

func1: function() {	//方式1，推荐，函数名为func1
    console.log("func1 called");	//控制台输出，()内为要在控制台输出的内容
},
func2() {			//方式2，函数名为func2
    console.log("func2 called");
}

插值表达式

插值表达式是将逻辑层的数据在渲染层上渲染出的一种形式。

{{}}即为插值表达式，两个大括号中间加入你要渲染的data对象中的数据。

示例代码

<text>{{str}}</text>
<view>{{num}}</view>
Page({
    data: {
        str: "Hello world!",
        num: 123456
    }
})

函数绑定

bind:tap=""

bind:tap意为点击触发，=“”双引号内写入你想要执行的函数名。

示例代码

<view bind:tap="func">点击触发名为func的函数</view>
<button bind:tap="press">点击触发名为press的函数</button>
func: function() {
    console.log("名为func的函数已执行");
},
press: function() {
    console.log("名为press的函数已执行");
}

数据绑定

要访问data对象中的数据，需要以this.data.变量名的形式进行访问。

仅逻辑层修改

如果目标变量并没有渲染到渲染层中，可以直接用this.data.变量名进行修改。

this.data.变量名 = 值;	//this即Page({})内的{}对象，其又有data对象，我们需要的是data对象中的某个变量

逻辑层+渲染层修改

逻辑层+渲染层修改需要用到setData()方法，以告知渲染层逻辑层数据发生更改，渲染层作出相应的更改。

this.setData({	//{}内是对象
    变量1: 值,
    变量2: 值,
    变量3: 值
});

示例代码

<view>{{num1}}</view>
<view>{{num2}}</view>
<button bind:tap="changeNum">点击将num1修改为20,num2修改为30</button>
<button bind:tap="changeData">点击将逻辑层字符串str修改为hola</button>
Page({
    data: {
        num1: 10,
        num2: 0,
        str: "hello"
    },
    changeNum: function() {
        //num1与num2以插值表达式引入到了HTML中进行渲染，所以必须使用setData()函数才能使页面上展示的数据也一起变化
        this.setData({
            num1: 20,
            num2: 30
        });
        console.log(this.data.num1);	//控制台输出当前num1
        console.log(this.data.num2);	//控制台输出当前num2
    },
    changeData: function() {
        this.data.str = "hola";		//由于str并没有在渲染层HTML中展示，所以可以直接修改
        console.log(this.data.str);	//控制台输出当前str
    }
})

👉(戳我下载资料)👈

可配合百度网盘不限速帖子食用👉百度网盘不限速 | whaleghostの小窝