node下的模板引擎-art-template

art-template是模板引擎，是一个专门用来帮助渲染页面的第三方。
前端使用模板引擎

 下载  装好node以后，在终端输入就可以直接下载使用。

 npm i art-template

引入 template-web.js 文件
文件引入以后会向外暴露一个 template 方法

<script src="../node_modules/art-template/lib/template-web.js"></script>

准备一个 script 标签, 书写模板
因为 script 标签里面书写的内容不会显示在页面上，script 因为有一个属性叫做 type=“text/javascript”，所有只要我们把 type 属性随便换成别的内容, 就不会当作 js 代码执行， 推荐写成 text/html 

<script type="text/html" >

</script>

    template 方法 ----使用模板渲染页面
    语法: template(模板id, {})
    {}: 在模板里面使用的数据, 没有传递一个空对象

模板语法

<script type="text/html" id="tmp">
    <h1><%= title %></h1>
    <%= str %>
    <br>
    <%- str %>
    <br>
    {{ str }}
    <br>
    {{@ str }}
</script>

    条件判断

<script type="text/html" id="tmp">
    <% if (boo1) { %>
    <div>我是不是显示呢 ? </div>
    <% } %>

    <% if (boo2) { %>
    <div>我为什么不显示呢 ? </div>
    <% } %>

    {{ if boo1 }}
    <div>我是模板语法显示 </div>
    {{ /if }}

    {{ if boo2 }}
    <div>我是模板语法不显示</div>
    {{ /if }}

  </script>

    循环渲染

<!-- 循环渲染 -->
  <script type="text/html" id="tmp">
        <% for (let i = 0; i < hobby.length; i++) { %>
            <li><%= hobby[i] %></li>
        <% } %>
        <br>
    {{ each hobby }}
    <li class="{{ $index === 0 ? 'active' : '' }}">{{ $value }} ----- {{ $index }}</li>
    {{ /each }}
  </script>