模板引擎

模板引擎
+ 什么时模板引擎 ?
=> 帮助我们快速渲染页面
=> 三体分离(结构 样式 行为 分开)
=> 一般都是第三方文件引入使用
+ 常见的模板引擎 ?
=> art-template, 前后端都可以用
=> underscroll, 后端 JS 不能用
=> e.js, 后端 JS 不能用
=> template, 后端 JS 不能用
+ art-template 模板引擎的特点
=> html 结构和 JS 代码分离
=> 有自己独立的语法, 但是也可以使用原生 JS 的语法
=> 有自己独立的渲染机制
+ 使用:
1. 官网下载一个第三方文件
2. 引入第三方文件
3. 按照官方规则来使用

语法:
1. 自己书写一个模板
=> script 标签来定义模板
-> 从来不会给 script 标签添加样式
-> script 标签里面书写的内容本身在页面上就不显示
=> 需要加一个 type 属性, 值时 text/html 或者 text/templte
-> 只要不写成 type/javascript, script 里面的内容不会当作 js 代码来执行
-> 写成 text/html 或者 text/template 是为了有 html 代码提示
=> 在这个 script 标签里面书写你的 html 模板了
2. 在 JS 里面使用模板
=> 导入第三方文件
=> 使用一个叫做 template 的方法
-> 语法: template(模板标签的 id 名, 数据)
+ id 名: 必须是 id 名
+ 数据: 对象数据类型, 在模板里面使用的数据
-> 返回值:
+ 模板标签里面的 html 结构, 是一个字符串
+ 是已经渲染好的 html 结构
3. 在模板里面使用的语法
3-1. 输出内容的语法
=> 原生 JS 输出
-> <%= 你要输出的变量 %>, 不会解析 html 结构字符串
-> <%- 你要输出的变量 %>, 会解析 html 结构字符串
=> 模板引擎语法输出
-> {{ 你要输出的变量 }}, 不会解析 html 结构字符串
-> {{@ 你要输出的变量 }}, 会解析 html 结构字符串
=> 输出的时候可以书写一个简答的表达式
3-2. 条件判断
=> 原生 JS 语法
<% if () { %>
html 结构
<% } %>
=> 模板引擎语法
{{ if 条件 }}
html 结构
{{ /if }}
3-3. 循环
=> 原生 JS 语法
<% for () { %>
html 结构(循环多少次, 这段 html 结构就有多少个)
<% } %>
=> 模板引擎语法
{{ each 数组 }}
html 结构
ps: $value 表示数组的每一项, $index 表示数组的索引
{{ /each }}

{{ each 数组 v, i }}
html 结构
ps: 自己定义两个变量, 当你定义好变量以后
第一个变量表示数组的每一项
第二个变量表示数组的索引
$value 和 $index 就不能用了
{{ /each }}