Ale.js

组件基础

写在前面

在介绍章节中,你已经学习了一些基础的定义和渲染组件的函数。这些基础将不会在本章中出现,如果你还没有学习过部分内容,请访问 介绍 页面。

开始

在介绍页面,我们已经了解了关于 template 属性的一些知识:

1
2
3
4
//定义一个名为 com1 的组件
Ale("com1", {
template: "HelloWorld"
});

其实,template 属性还支持接收一个函数,但是具体的模板需要使用return返回:

1
2
3
4
5
6
7
8
9
10
11
12
13
//定义一个名为 com1 的组件
Ale("com1", {
template: function(){
return "HelloWorld";
}
});

//当然,你也可以使用 ES6 语法来定义模板
Ale("com1", {
template(){
return "HelloWorld";
}
});

之后我们需要去渲染这个组件:

1
2
3
Ale.render("com1", {
el: "#app" /* 目标元素选择器 */
})

那么,将 template 属性设置为函数有什么好处呢?其实,它可以自动绑定一个叫 data 的属性。

例如我们在 data 属性里定义一个名为name的值,然后渲染它:
【在1.0.0版本之前,使用this代指的实际是this.data,而1.0.0版本将this改为代指渲染完成后的 ale组件对象】(如果你不知道这句话是什么意思,请先不用管它)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ale("com1", {
template: function(){
return "Hello " + this.data.name;
},
data: {
name: "World"
}
});

/* 切记一定不可使用 ES6 的箭头函数,因为箭头函数不会绑定 this
Ale("com1", {
template: () => {
return "Hello " + this.data.name; //错误!
},
data: {
name: "World"
}
});
*/

高级操作

Data

你也可以在组件被渲染时动态设置 data。其中,重名的属性将会被重新赋值:

1
2
3
4
5
6
Ale.render("com1", {
el: "#app",
data: {
name: "Ale.js" /* 会被重新赋值为 Ale.js */
}
})

当然,同一个组件也可以被渲染多次:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Ale.render("com1", {
el: "#app"
})

Ale.render("com1", {
el: "#app2"
})

Ale.render("com1", {
el: "#app3",
data: {
name: "Ale.js" /* 也可以拥有不同的属性 */
}
})

局部组件

如果你在定义组件时未添加名称,那么 Ale() 函数将会返回给你一个 Ale局部组件生成对象

1
2
3
4
5
6
/* 定义一个变量来接收 Ale局部组件生成对象 */
var com = Ale({
template: function(){
return "HelloWorld";
}
})

你可以使用 Ale局部组件生成对象render 函数来渲染这个组件:

1
2
3
com.render({
el: "#app"
})

找到了一些错误?在Github上编辑!