art-template 的语法

最新推荐文章于 2023-03-22 23:18:10 发布

小豪boy

最新推荐文章于 2023-03-22 23:18:10 发布

阅读量287

点赞数

分类专栏： art-template 前端学习笔记 Webpack的应用文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120658155

版权

前端学习笔记同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

Webpack的应用

9 篇文章 0 订阅

订阅专栏

art-template

2 篇文章 0 订阅

订阅专栏

一、官方文档：介绍 - 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 lang="en">

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

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

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/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>

2. 原文输出

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。
标准语法：
{{@ value }}
原始语法：
<%- value %>

示例：

<!DOCTYPE html>
<html lang="en">

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

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

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/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>

三、条件

标准语法：

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

原始语法：

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } else { %> ... <% } %>

示例：

<!DOCTYPE html>
<html lang="en">

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

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

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/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>

四、循环

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 lang="en">

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

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

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/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>

五、子模版

data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量（字符串），而原始语法不受限制。
art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。
标准语法：

{{include './header.art'}}
{{include './header.art' data}}

{{include 'header'}}
{{include 'header' data}}
原始语法：

<% include('./header.art') %>
<% include('./header.art', data) %>

<% include('header') %>
<% include('header', data) %>

示例：

<!DOCTYPE html>
<html lang="en">

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

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

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/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>

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 .
复制链接

扫一扫