art-lemplate是新一代高性能JavaScript模板引擎,它可以将数据与HTML模板更加友好地结合起来,省去烦琐的字符串拼接,使代码更易于维护。
art-template模板引擎既可以在服务器端使用,也可以在浏览器端使用。此处仅讲解art-template模板引擎在服务器端的使用。art-template模板引擎的下载和使用方法如下。
(1)模板引擎下载命令如下。
npm install artmplate
(2)使用模板引擎时应在j脚本中导入模板引擎,并编译模板。
//导入模板
const template · require('art-template');
//编译模板
const result = template('./views/index.html', (
msg: 'Hello, art-template'
});
上述代码中,rest用于存储拼接结果;template0中的第l个参数表示模板文件的位置,第2个参数向模板中传递要拼接的数据,对象类型或对象属性都可以直接在模板中使用。an-template模板引擎标准语法中引入了变量和输出量,并支持JavaSeript表达式,使模板更易于读写。下面讲解art-template模板引擎的标准语法。
1.变量
在“{{}}”符号中,使用set关键字来定义变量a和变量b.示例代码如下。
{{set a = 1}};
{{set b = 2}};
2.JavaScript表达式
在“{{}}”符号中,使用set关键字来定义变量a和变量b,示例代码如下。
//JavaScript表达式
{{a ? b:c}};
{{a‖b}}1:
{{la + b}};
3.条件渲染
art-template模板引擎使用{{f}}…{{/if}}或者 {{if}}…{{ else if}}…{{/if}}来实现条件的判断,通过判断来渲染不同结果,示例代码如下。
// if...语法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
// if...else if...语法
{{if userl}}
<h1>{{user1.name}}</h1>
{{else if user2}}
<h2>{{user2.name}}</h2>
{{/if}}
上述代码中,如果user用户对象存在,就将其name属性的值渲染到标签中。同理,使用[if]]…lelse if]]…[if]语法实现多个条件判断。如果userl用户对象存在,就将其name属性的值渲染到标签中;如果user2用户对象存在,就将其name属性的值渲染到标签中。
4.列表渲染
at-lemplate模板引擎中的列表渲染使用each实现对目标对象的循环遍历,示例代码如下。文章来源:https://www.toymoban.com/news/detail-483132.html
{{each target}}
{{$index}}{{$value}}
{{/each}}
上述代码中,target 目标对象支持Amay数组和Objecet对象类型数据的迭代,target 目标对象使用template(模板ID,data)函数的第2个参数来传递,使用“ d a t a [ ] ”中括号的形式来访问模板对象的属性。 data[]”中括号的形式来访问模板对象的属性。 data[]”中括号的形式来访问模板对象的属性。index表示当前索引值,$value表示当前索引对应的值。文章来源地址https://www.toymoban.com/news/detail-483132.html
到了这里,关于服务器端模板引擎art-template的下载和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!