天天看點
傳回

art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版

一、 官方文檔：介紹 - art-template 。

二、輸出

1. 轉義輸出

  • 标準文法： 
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
  • 原始文法： 
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
  • 模闆一級特殊變量可以使用 

    $data

      加下标的方式通路： 
{{$data['user list']}}
  • 示例： 
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <title>art-template 的文法</title>
</head>

<body>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

  <!-- 2.準備好模闆 -->
  <script id="test" type="text/html">
    <li>{{value}}--{{data.key}}--{{data['key']}}</li>
    <li>{{a ? b : c}}--{{a || b}}--{{a + b}}</li>
    <li><%= value %>--<%= data.key %>--<%= data['key'] %></li>
    <li><%= a ? b : c %>--<%= a || b %>--<%= a + b %></li>
    <li>{{$data}}</li>
    <li>{{$data['user list']}}</li>
  </script>

  <script>
    // 3.擷取模闆
    const tplData = template('test', {
      value: 666,
      data: { key: 18 },
      a: true,
      b: false,
      c: 'hello',
      'user list': '特殊變量'
    });

    // 4.将模闆引擎輸出的字元串，傳遞給DOM元素的innerHTML屬性
    const list = document.getElementById('list');
    list.innerHTML = tplData;

  </script>
</body>

</html>
art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版

2. 原文輸出

  • 原文輸出語句不會對 

    HTML

      内容進行轉義處理，可能存在安全風險，請謹慎使用。
  •  标準文法： 
  • {{@ value }}
  • 原始文法： 
  • <%- value %>
  • 示例： 
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <title>art-template 的文法</title>
</head>

<body>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

  <!-- 2.準備好模闆 -->
  <script id="test" type="text/html">
    <li>原文輸出：{{@value}} <%- value %></li>
    <li>轉義輸出：{{value}}</li>
  </script>

  <script>
    const list = document.getElementById('list');
    const tplData = template('test', {
      value: '<div>666</div>',
    });
    list.innerHTML = tplData;
    console.log(tplData);
  </script>
</body>

</html>
art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版

三、條件

  • 标準文法： 
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{else}} ... {{/if}}
  • 原始文法： 
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } else { %> ... <% } %>
  • 示例： 
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <title>art-template 的文法</title>
</head>

<body>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

  <!-- 2.準備好模闆 -->
  <script id="test" type="text/html">
    <li>标準文法：
      {{if sex === 'male'}}
      男
      {{else if sex === 'female'}}
      女
      {{else}}
      其他
      {{/if}}
    </li>
    <li>原始文法：
      <%if (sex1 === 'male') { %>
      男
      <% } else if (sex1 === 'female') { %>
      女
      <% } else { %>
      其他
      <% } %>
    </li>
  </script>

  <script>
    const list = document.getElementById('list');
    const tplData = template('test', {
      sex: 'female',
      sex1: '666'
    });
    list.innerHTML = tplData;
  </script>
</body>

</html>
art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版

四、循環

  • target

      支援 

    array

      與 

    object

      的疊代，其預設值為 

    $data

     。

  • $value

      與 

    $index

      可以自定義：

    {{each target val key}}

     。
  • 标準文法： 
{{each target}}
    {{$index}} {{$value}}
{{/each}}
  • 原始文法： 
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>
  • 示例： 
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <title>art-template 的文法</title>
</head>

<body>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

  <!-- 2.準備好模闆 -->
  <script id="test" type="text/html">
    <li>标準文法：
      {{each students}}
        {{$index}}--{{$value.name}}--{{$value.age}}--{{$value.sex}}
      {{/each}}
    </li>
    <li>原始文法：
      <% for(var i = 0; i < students.length; i++){ %>
        <%= i %>--<%= students[i].name %>--<%= students[i].age %>--<%= students[i].sex %>
      <% } %>
    </li>
  </script>

  <script>
    const students = [
      { name: 'Alex', age: 18, sex: 'male' },
      { name: '張三', age: 28, sex: 'male' },
      { name: '李四', age: 20, sex: 'female' }
    ];
    const list = document.getElementById('list');
    const tplData = template('test', {students});
    list.innerHTML = tplData;
  </script>
</body>

</html>
art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版

五、子模版

  • data

      數預設值為 

    $data

     ；标準文法不支援聲明 

    object

      與 

    array

     ，隻支援引用變量（字元串），而原始文法不受限制。
  • art-template 内建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模闆，否則開啟壓縮後标簽可能會被意外“優化。
  • 标準文法： 
<!-- 外部導入，填寫子模闆路徑 -->
{{include './header.art'}}
{{include './header.art' data}}
           
<!-- 内部導入，填寫子模版id -->
{{include 'header'}}
{{include 'header' data}}
  • 原始文法： 
<!-- 外部導入，填寫子模闆路徑 -->
<% include('./header.art') %>
<% include('./header.art', data) %>
           
<!-- 内部導入，填寫子模版id -->
<% include('header') %>
<% include('header', data) %>
  • 示例： 
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <title>art-template 的文法</title>
</head>

<body>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

  <!-- 2.準備好模闆 -->
  <script id="test" type="text/html">
    <!-- 内部導入 -->
    <li>标準文法：{{include 'test-strong1' '666'}}</li>
    <li>标準文法：<% include('test-strong2', {value:666}) %></li>
  </script>

  <script id="test-strong1" type="text/html">
    <strong>子模版1--{{$data}}</strong>
  </script>

  <script id="test-strong2" type="text/html">
    <strong>子模版2--{{$data.value}}</strong>
  </script>

  <script>
    const list = document.getElementById('list');
    const tplData = template('test', {});
    list.innerHTML = tplData;
  </script>
</body>

</html>
art-template 的文法一、 官方文檔：介紹 - art-template 。二、輸出三、條件四、循環五、子模版
art-template 前端學習筆記 Webpack的應用 html html5 css
上一篇: JVM的"發家"史
下一篇: Android 關于ApplicationInfo flags快速了解

繼續閱讀