ye_mian_yuan_su.md

页面元素

页面元素 最重要的作用就是完成对页面外观的描述。

基本格式 —— XML标签

页面元素 最普通的形式就是一个 XML标签，在使用他们时，需要注意的是：

1. 区分大小写；
2. 必须闭合；
3. 所有元素必须形成一个树形结构，且必须包含一个 根元素，其他元素都是 根元素 的直接或间接子节点。

内置元素 —— HTML标签

在 页面主文件 中，我们可以使用合法的 HTML标签，比如：<div/>、<ul/> 等，他们的行为和 HTML 中是一致的，比如：点击 <a/> 元素会导致URL发生改变等。

所有的 HTML 标签都必须是全小写格式。

我们也可以为 HTML标签 添加 attribute，且这些 attribute 的含义和在 HTML 中的含义是一致的。

比如，可以为元素定义 class：

<div class="my-div"></div>

也可以为元素指定 inline style：

<div style="background: red; width: 100px; height: 100px;"></div>

和标准 HTML 不同的地方在于：要想为 内置HTML元素 添加自定义的 attribute， 我们需要使用 data- 作为其名称的前缀。

比如，以下就是一种合法的自定义 attribute：

<div data-index="xxx"></div>

而以下的自定义 attribute 定义方式将是无效的：

<div index="xxx"></div>

注意：对于为 自定义attribute 添加 data- 前缀的限制只针对内置的 HTML 元素，对于以后我们会讲到的 自定义元素 来说，不存在该限制。

内置HTML元素的事件绑定

对于所有的内置HTML元素，我们可以通过 inline 的方式为其支持的 标准事件 添加监听器：

<!-- 为 <div/> 添加 click 事件的监听器 -->
<!--
  handlerFunction 是 <div/> 元素的 click事件处理器，
  其类型是 JavaScript Function 对象，
-->
<div onclick={handlerFunction}></div>

动态计算

在 页面主文件 中，我们可以为 页面元素 添加一些 动态计算 的内容，以帮助我们可以在 运行时 来决定页面的外观，而非在编写源码时。

动态计算的内容是一个以 { 开头，以 } 结尾的一个 JavaScript表达式，该表达式的执行结果就是动态计算后的内容。

根据插入动态计算的位置的不同，我们把动态计算分为两种类型：动态计算 attribute 和 动态计算 content text 。

警告：在实际的开发过程中，对于使用动态计算的JavaScript表达式上，我们不应该使用过于复杂的表达式，因为这可能会导致代表变得过于复杂。同时，在未来的版本中，我们也有可能会增加一些 强制性 的措施，禁止在动态计算中使用复杂的表达式。

动态计算 attribute

我们可以为 页面元素 动态计算 attribute 值：

html

```

动态计算 content text

我们还可以在运行时为 页面元素 动态生成一段 文本内容：

<!-- 为<div/>设置动态文案 -->
<!--
  userName是一个 String 类型的对象，也可以是可以转化为 String 的 JavaScript 简单数据类型。
-->
<div>
Hello {userName}
</div>

自定义页面元素

内置的HTML元素只能满足一部分简单的场景，为了增强页面的表现力，我们可以自定义 页面元素 来完成对某一复杂场景的描述。

关于添加自定义元素的细节，可以查看：扩展页面元素。

对于所有的自定义元素，需要注意的是：

1. 元素名称首字母必须大写；
2. 环境本身不能为其添加任何默认行为；
3. 对 attribute 的命名也不再有限制；
4. 不能添加事件监听器（其实现已经处理了事件的情况下除外）；
5. 仍然可以使用 动态计算。