认识 模板引擎 art-template

常用模板引擎 art-template

作用: 使用 模板引擎 提供的模板语法,可以将 数据 和 HTML 拼接起来

安装

npm install art-template --save

art-template 模板引擎的官网地址: https://aui.github.io/art-template/zh-cn/index.html

标准语法

art-template 提供了 {{}} 这种语法格式,在 {{}} 内可以进行 变量输出 或 循环数组 等操作,这种语法在 art-template 中被称为 标准语法

输出
{{ value }}
{{ obj.key }}
{{ obj['key'] }}
{{ a ? b : c }}
{{ a || b }}
{{ a + b }}
原文输出
{{ @ value }}
// 如果要输出的 value 值中,包含了 HTML 标签结构,则需要使用 原文输出 语法,才能保证 HTML 标签被正常渲染
条件输出
{{ if value }}	按需输出的内容	{{/if}}
{{ if value }}	按需输出的内容	{{ else if value2 }}	按需输出的内容	{{/if}}
循环输出

如果要实现 循环输出,则可以在 {{}} 内,通过 each 语法 循环数组,当前循环的索引 使用 $index 进行访问,当前的循环项 使用 $value 进行访问

{{ each arr }}
{{ $index }} {{ $value }}
{{ /each }}
过滤器
{{ value | filterName }}

过滤器 语法 类似 管道操作符,它的上一个输出作为下一个输入

定义 过滤器 的基本语法:

template.defaults.imports.filterName = function(value) { /* return 处理的结果 */ }

示例代码

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


<script id="tpl" type="text/html">
    <div>
        <h1>--{{name}}--{{age}}--</h1>
        {{@test}}
        -------------------------------------------------------- <br>
        {{if flag==0}}
        flag值为0
        {{else if flag==1}}
        flag值为1
        {{/if}}
    </div>
    <ul>
        {{each hobby}}
        <li>{{ $index + 1 }} : {{ $value }}</li>
        {{/each}}
    </ul>
    -------------------------------------------------------- <br>
    <h1>{{ regTime | dateFormat }}</h1>
script>
      
<script>
    var data = {
        name: 'tom',
        age: 20,
        test: "

原文输出

"
, flag: 1, hobby: ['吃饭', '睡觉', '终端'], regTime: new Date() } // 定义一个过滤器函数,用于格式化时间 template.defaults.imports.dateFormat = function (date) { let y = date.getFullYear() let m = date.getMonth() + 1 let d = date.getDate() let h = date.getHours() let mm = date.getMinutes() let s = date.getSeconds() return `${y}-${m}-${d} ${h}:${mm}:${s}` } var html = template("tpl", data) document.write(html)
script>

认识 模板引擎 art-template_第1张图片

使用步骤

  1. 下载 art-template 模板引擎库 文件 并在 HTML 页面中引入 库文件
<script src="./template-web.js">script>
  1. 准备 art-template 模板
<script id="tpl" type="text/html">
	<div class="box"></div>
script>
  1. 告诉模板引擎将哪一个模板和哪个数据进行拼接
let html = template('tpl', (username: 'zhangsan', age: '20'))
  1. 将拼接好的 html 字符串添加到页面中
document.querySelector('#container').innerHTML = html
  1. 通过 模板语法 告诉 模板引擎,数据 和 html 字符串 要如何拼接
<script id="tpl" type="text/html">
	<div class="box"> {{ username }} {{ age }} </div>
script>

简单使用

// 1 引入文件
<script src="./template-web.js"></script>

<body>
    <div id="container"></div>
</body>

<!-- 准备 art-template 模板 -->
<script type="text/html" id="tpl">
    <h1> {{ username }} {{ age }} </h1>
</script>

<script type="text/javascript">
    // 告诉模板引擎将哪些数据和哪个模板进行拼接
    // 方法的返回值 就是拼接好的 html 字符串
    let html = template('tpl', { username: 'tom', age: 20 })
	document.querySelector("#container").innerHTML = html
</script>

你可能感兴趣的:(javascript,前端,html)