详细模板引擎

2.1、回顾表单

2.1.1 组成

2.1.2 form标签属性

2.1.3 表单的同步提交及缺点

2.1.4 阻止表单默认提交行为

2.2、模板引擎

2.2.1 简单的模板引擎

2.2.2 art-template模板引擎

2.2.3 标准语法

2.2.4 过滤器

2.1、回顾表单

表单在网页中主要负责数据采集功能，并通过from标签的提交操作，把采集的信息提交到服务器端处理

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到action URL，默认为get
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定发送表单数据之前如何对其进行编码
target	_blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。	规定在何处打开action URL

2.1.4 阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转

2.2、模板引擎
之前在渲染UI结构的时候，拼接字符串是比较麻烦的，而且很容易会出现问题。模板引擎它可以根据程序员的指定的模板结构和数据，自动生成一个完整的HTML页面

好处：

减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

2.2.1 简单的模板引擎




    
    
    
    document

2.2.2 art-template模板引擎

步骤：

通过

输出类型	语法	说明
普通输出	{{ value }} {{ obj.key }} {{ obj['key'] }} {{ a ? b : c}} {{ a \|\| b }} {{ a + b }}	在 {{}} 语法中，可以进行变量的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出
原文输出	{{ @ value }}	如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
条件输出	{{ if value }} 按需输出的内容 {{/if}} {{ if v1 }} 按需输出的内容 {{ else if v2 }} 按需输出的内容 {{/if}}	如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出
循环输出	{{each arr}} {{$index}} {{$value}} {{/each}}	如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

2.2.4 过滤器

过滤器本质就是一个function函数

注册过滤器：

template.defaults.imports.函数名 = function（value）{return 返回的值}

标准语法：{{date | 函数名 | dateFormat ''}}




    
    
    
    document

表单域	内的区域
表单标签	包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
表单按钮	通过设置type属性为submit来触发form表单的提交