art-template模板引擎

art-template模板引擎

1、什么是HTML模板
HTML模板就是一段特定格式的HTML、CSS、JS代码，
程序根据这段代码可以重复生成相同风格的页面元素。

2、什么是模板引擎（特指web开发）
模板引擎是解析模板与数据最终生成标准的HTML文档的一种机制

3、前端模板引擎art-template
art-template 是一个简约、超快的模板引擎。浏览器版本仅 6KB 大小

1.art-template 使用步骤

定义模板：

<script id="art" type="text/html">
      {{if user}}
        <h2>{{user.name}}</h2>
      {{/if}}
</script>

模板配套数据：

{
   user : { name : 'my name is art' }
}

模板引擎解析模板与数据核心代码：

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
let resHtml = template('art', { user : { name : 'my name is art' } });

模板引擎解析以后输出的结果：console.log(resHtml)

 <h2>my name is art</h2>

2.art-template模板语法

art-template 同时支持两种模板语法。
标准语法可以让模板更容易读写；原始语法了解即可。

标准语法：

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

原始语法：

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

3.art-template常见语法 - 标准语法和条件判断

1、输出标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

2、条件判断标准语法

{{if value}} ... {{/if}}
{{if value}} ... {{else}}...{{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
{{if v1}} ... {{else if v2}} ...{{else}}... {{/if}}

4. art-template常见语法 - 循环输出

1、循环输出

{{each target}}
    {{$index}}   <!-- 输出每次遍历的 数组是下标，对象是属性名称  -->
    {{$value}}    <!-- 输出每次遍历的 数组是下标对应的值，对象是属性对应的值 -->
{{/each}}

说明：
1、target 支持 array 与 object 的迭代(遍历)
2、$value 与 $index 可以自定义：{{each target val key}}

5.art-template常见语法 - HTML 原文输出

1、HTML 原文输出

{{@ value }}

2、配套的数据通常是html字符串

 { value : '<h2>这是art的值</h2>' }

小结art-template的常见语法

1. 条件输出
   {{ if 条件 }} {{ /if }}

2. 循环输出
   {{ each 数组 }} {{ /each }}

3. HTML原文输出
   {{@ 数据 }}