art-template模板语法支持两种模板语法,分别是标准语法和原始语法。
标准语法:
标准语法可以让模板更容易读写,例如:{{ 数据 }}
原始语法:
原始语法具有强大的逻辑处理能力,例如:
纯文本输出语法:
输出语法表示将数据输出到模板中。 (ps:类似于Vue 中的 v-text 指令)
标准语法示例:
Title原始语法示例:
TitleHTML标签解析输出语法:
如果想将数据中的html 输出,那么可以通过该语法。(ps:类似于Vue 中的 v-html 指令)
数据:
/*
引入art-template
该模块返回一个函数
*/
const artTemplate= require('art-template');
/*
引入系统模块path主要是为了拼接路径
*/
const path = require('path');
// 拼接模板路径
const templatePath = path.join(__dirname,'index.art');
/*
* 通过artTemplate 来拼接
* 参数一:模板路径
* 参数二:要在模板中展示的数据
* 该函数返回以拼接完成的模板字符串
* */
const html = artTemplate(templatePath,{
content:'
我是h1标签
'});
标准语法示例:
只需在数据前加上@符号即可
Title原始语法示例:
只需将
Title结果:
Title我是h1标签
条件判断语法:
在模板中,可以根据条件来决定显示哪块HTML代码
标准语法示例:
Title{{ if age>16 }}
{{ else if age>10 }}
{{ else }}
{{ /if }}
原始语法示例:
16) { %>
10) { %>
结果:
Title循环语法:
通过循环语法可以对数组数据进行循环展示(ps:类似于Vue 中的 v-for 指令)
数据:
引入art-template
该模块返回一个函数
*/
const artTemplate= require('art-template');
/*
引入系统模块path主要是为了拼接路径
*/
const path = require('path');
// 拼接模板路径
const templatePath = path.join(__dirname,'index.art');
/*
* 通过artTemplate 来拼接
* 参数一:模板路径
* 参数二:要在模板中展示的数据
* 该函数返回以拼接完成的模板字符串
* */
const html = artTemplate(templatePath,{
datas:[{name:'张三'},{name:'李四'}],
});
console.log(html);
标准语法示例:
{{ each datas }}
{{ /each }}
原始语法示例:
效果图:
Title子模板语法:
通过子模板可以将网站中的公共区域(头部、底部)抽离到单独的文件中。(ps:类似于Vue中的公共组件、Android中的include标签 )
子模板数据:
我是网页底部
子模板路径:
标准语法示例:
Title{{ include './footer.art' }}
原始语法示例:
Title效果图:
Title模板继承语法: