art-template模板引擎使用运用
模板引擎概念，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面。
优势：减少了字符串的拼接操作、使代码结构更清晰、使代码更易于阅读与维护\
安装
1：浏览器访问 aui.github.io/art-templat…
2：找到 安装 导航栏，找到下载链接，右键下载即可\
基本使用
art-template使用步骤
1： 引入template模板引擎文件
2： 定义数据
3： 定义模板
4 ：定义模板
5：渲染html结构
<!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <!-- 1 引入template文件 -->
10 <script src="./lib/template-web.js"></script>
11 <script src="./lib/jquery.js"></script>
12 </head>
13
14 <body>
15 <div class="box"></div>
16 <!-- 3 定义模板 -->
17 <!-- 3.1 模板的html必须定义到script标签中，叫做teplate('模板id'，需要渲染的数据对象) -->
18 <!-- 3.2 给模板添加一个id -->
19 <!-- 3.3 模板里面如果需要使用到传入的数据，利用{{}}实现
20 例如：{{name}}，那么就会去找 我们调用 template() 函数 第二个参数里面对应的name属性的值 -->
21 <!--{{}} 占位符 -->
22 <script type="text/html" id="temp">
23 <h2>{{uname}}------{{age}}</h2>
31 </script>
32 <script>
33 // 2 定义数据 对象数据类型
34 var data = { uname: '张三', age: 20}
36 // 4 调用template函数 template('模板id',需要渲染的数据对象)
37 var templateStr = template('temp', data)
38 console.log(templateStr);
39 // 5 渲染html数据 最后我们需要把template返回的模板字符串设置到页面容器中
40 $('.box').html(templateStr)
41 </script>
42 </body>
43
44 </html>
标准语法
标准语法概念： 在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法
输出：在 {{}} 语法中，可以进行 变量 的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出
1： 原文输出 {{@ value}}
注意：输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
2：条件输出 在 {{}} 中使用 if...else if.../if 的方式，进行按需输出
3： 循环输出
在{{}} 内，通过 each 语法循环数组 当前循环的索引使用 $index 进行访问，当****前循环项使用 $value 进行访问
4:过滤器
过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入
定义过滤器的基本语法：
示列如下:（请看一、二、三、四标注的示列）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <!-- 1 引入template模板引擎文件 -->
10 <script src="../day02/lib/template-web.js"></script>
11 <script src="../day02/lib/jquery.js"></script>
12 </head>
13
14 <body>
15 <div id="container"></div>
16 <!-- 3 定义模板 -->
17 <!-- 3.1 模板的html结构，必须定义到sript中 -->
18 <script type="text/html" id="tpl_user">
19 <h1>{{name}}----{{age}}</h1>
20 <!-- 一、原文输出 -->
21 <div>{{@ test }}</div>
22 <!-- 三、选好输出 each -->
23 <ul>
24 {{each hobby}}
25 <li>索引是：{{$index }},当前循环项是：{{$value}}</li>
26 {{/each}}
27 </ul>
28 <!-- 二、if 条件输出 -->
29 <div>
30 {{if flag===0}}
31 flag的值是0
32 {{else if flag===1}}
33 flag的值是1
34 {{/if}}
35 </div>
36 <!-- 四、过滤器 -->
37 <!-- 四（3）管道操作符 在模板引擎中使用过滤器-->
38 <!-- newTiem 服务器返回的日期， filterName日期格式化 -->
39 <h3>{{newTime | filterName}}</h3>
40 </script>
41 <script>
42 // 四(2) 定义处理时间的过滤器
43 //形参date，由实参newTime 传递过来
44 template.defaults.imports.filterName = function (date) {
var dt=new Date(date)
45 // console.log(date);
46 // 年
47 var y = dt.getFullYear()
48 y = y < 10 ? '0' + y : y;
49 // 月
50 var m = dt.getMonth() + 1;
51 m = m < 10 ? '0' + m : m;
52 // 日
53 var d = dt.getDate()
54 d = d < 10 ? '0' + d : d;
55 // 时
56 var hh = dt.getHours()
57 hh = hh < 10 ? '0' + hh : hh;
58 // 分
59 var mm = dt.getMinutes()
60 mm = mm < 10 ? '0' + mm : mm
61 // 秒
62 var ss = dt.getSeconds()
63 ss = ss < 10 ? '0' + ss : ss
64 // 星期
65 var arr=['星期日', '星期一', '星期二','星期三', '星期四', '星期五', '星期六',]
66 var day = dt.getDay();
67
68 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ${arr[day]}`
69 }
70 // 2 定义数据
71 // 四(1) 定义数据newTime: new Date()
72 var data = {
73 name: 'zs', age: 30, test: '<h3>原文输出<h3>', hobby: ['吃饭', '睡觉', '打豆豆'],
74 flag: 1, newTime: new Date()
75 }
76 // 4 调用template函数
77 var htmlStr = template('tpl_user', data)
78 console.log(htmlStr);
79 // 5 渲染html结构
80 $('#container').html(htmlStr)
81
82 </script>
83 </body>
84
85 </html>
