art-template

chonger_feifei

已于 2022-03-20 21:06:37 修改

阅读量117

点赞数

文章标签： javascript 前端

于 2022-02-17 17:53:38 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/122986727

版权

是模板引擎

作用-分开JS和HTML

<body>
  <p>学生信息表</p>
  <ul id="list"></ul>
  <script>
    const students = [
      {
        name: "Alex",
        age: 18,
        sex: "male",
      },
      { name: "张三", age: 19, sex: "female" },
      { name: "李四", age: 20, sex: "male" },
    ]; 
  </script>
</body>

语法

输出

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

原文输出-不转义HTML

{{@ value }}

演示

<div id="content"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<script id="tpl-1" type="text/html">
   {{value}}<br />
   {{data.key}}<br />
   {{data['key']}} <br />
   {{a + b}}<br />
   {{$data.value}}<br />
   {{text}} <br />
   {{@text}}
</script>
<script>
  const content = document.getElementById("content");
  content.innerHTML = template("tpl-1", {
    value: 1,
    data: {
      key: 2,
    },
    a: 3,
    b: 4,
    text: "<strong>重点内容</strong>",
  });
</script>

条件

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

<script id="tpl-2" type="text/html">
  {{if sex==='male'}} 男 {{else if sex==='female'}} 女 {{else}} 其他{{/if}}
</script>
<script>
  const content = document.getElementById("content");
  content.innerHTML = template("tpl-2", {
    sex: "male",
    // sex: "female",
    // sex: "other",
  });
</script>

在这里插入图片描述

循环

{{each target}}
    {{$index}} {{$value}}
{{/each}}

<script>
  const students = [
    {
      name: "Alex",
      age: 18,
      sex: "male",
    },
    { name: "张三", age: 19, sex: "female" },
    { name: "李四", age: 20, sex: "male" },
  ]; 
</script>
<script id="tpl-3" type="text/html">
  {{each students}}
  <li>{{$value.name}}{{$value.age}}{{$value.sex}}{{$index}}{{$data}}</li>
  {{/each}}
</script>
<script>
  const content = document.getElementById("content"); 
  content.innerHTML = template("tpl-3", { students });
</script>

在这里插入图片描述

子模版引入

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

<script id="tpl-4-1" type="text/html">
   {{include 'tpl-4-1-header'}}
   <p>首页</p>
   {{include 'tpl-4-1-footer'}}
 </script>
 <script id="tpl-4-1-header" type="text/html">
   <header>我是公共头部</header>
 </script>
 <script id="tpl-4-1-footer" type="text/html">
   <footer>我是公共底部</footer>
 </script>
 <script>
   const content = document.getElementById("content"); 
   content.innerHTML = template("tpl-4-1", { });
 </script>

子模版传参-必须使用原始语法

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

<div id="contentIndex"></div>
<div id="contentList"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js">
</script> 
<script id="tpl-4-2-header" type="text/html">
  <header>我是{{page}}公共头部</header>
</script>
<script id="tpl-4-2-footer" type="text/html">
  <footer>我是{{page}}公共底部</footer>
</script>
<script id="tpl-4-2-index" type="text/html">
  {{include 'tpl-4-2-header'}}
  <% include('tpl-4-2-header',{page:'首页'}) %>
  <p>首页</p>
  {{include 'tpl-4-2-footer'}}
  <% include('tpl-4-2-footer',{page:'首页'}) %>
</script>
<script id="tpl-4-2-list" type="text/html">
  {{include 'tpl-4-2-header'}}
  <%include('tpl-4-2-header',{page:'列表页'})%>
  <p>列表页</p>
  {{include 'tpl-4-2-footer'}}
  <%include('tpl-4-2-footer',{page:'列表页'})%>
</script>
<script>
  const contentIndex = document.getElementById("contentIndex"); 
  contentIndex.innerHTML = template("tpl-4-2-index", { });
  const contentList = document.getElementById("contentList"); 
  contentList.innerHTML = template("tpl-4-2-list", { });
</script>

在这里插入图片描述

用法

三步：
1）引入
2）准备模板
3）获取模板

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js">
</script> 
<script id="tpl-students" type="text/html">
  {{each students}}
  <li>{{$value.name}}{{$value.age}}{{$value.sex}}</li>
  {{/each}}
</script>
<script>
  const list = document.getElementById("list"); 
  list.innerHTML = template("tpl-students", { students });
</script>

对比模板字符串

<script>
  const list = document.getElementById("list");
  let html = "";
  for (const student of students) {
    html += `
  <li>${student.name}${student.sex}${student.age}</li>
  `;
  }
  list.innerHTML = html;
</script>

art-template替代方法：
.art文件中

 {{page}}

.js文件中

import render from "./index.art";
console.log(render({ page: "首页" }));

官方文档https://aui.github.io/art-template/zh-cn/docs/

chonger_feifei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
art-template

art-template
复制链接

扫一扫

art-template

作用-分开JS和HTML

语法

输出

原文输出-不转义HTML

条件

循环

子模版引入

子模版传参-必须使用原始语法

用法

“相关推荐”对你有帮助么？