1. 模板引擎的基础概念
模板引擎是第三方模块。
让开发者以更加友好的方式去拼接字符串,使项目代码更加清晰,更加易于维护。
1.2 art-template 模板引擎
由腾讯公司出品的,文档也是中文的。是目前运行最快的模板引擎。在企业当中使用的频率非常高。
art-template 是nodejs的第三方模块,使用之前需要先下载
- 在命令行工具中使用
npm install art-template
命令进行下载 - 使用
const template = require(‘art-template’)
引入模板引擎,require()方法的返回值是一个方法 template(),这个方法就是用来拼接字符串的 - 告诉模板引擎要拼接的数据和模板在哪
const html = template(‘模板路径’,数据)
,这个数据是对象类型
1.3 art-template 代码实例
// 导入模板引擎模块,
const template = require(‘art-template’)
// 将特定模板与特定数据进行拼接
const html = template(‘./views/index.art’,{
data: {
name: ‘张三’,
age:20
}
})
模板当中的代码:
<div>
<span>{{ data.name }}<span>
<span>{{ data.age }}<span>
</div>
2. 模板引擎语法
2.1 模板语法
- art-template 同时支持两种模板语法:标准语法 和 原始语法
- 标准语法可以让模板更加容易读写,原始语法具有强大的逻辑处理能力。
标准语法: {{ 数据 }}
原始语法: <%= 数据%>
2.2 输出
将某项数据输出在模板中,标准语法和原始语法如下:
2.3 原文输出
如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出
如何让模板引擎解析标签呢?方法如下:
- 标准语法:{{@ 数据 }}
- 原始语法:<%- 数据%>
2.4 条件判断
在模板中可以根据条件来决定显示哪块HTML代码
标准语法:
{{ if age > 18 }}
年龄大于18
{{ else if age< 15}}
年龄小于15
{{else}}
年龄不符合要求
{{ /if}}
原始语法:
<% if(age > 18) {%>
年龄大于18
<% } else if (age < 15) {%>
年龄小于15
<% } else {%> 年龄不符合要求
<%} %>
2.5 循环
- 标准语法 : {{ each 数据}} {{/each}}
- 原始语法 : <% for() {%< <%} %>
// 标准语法
{{each target}}
{{$index}} {{%value}}
{{/each}}
应用: