模板引擎art-template的基本使用方法

• 因为art-template是第三方模块，因此我们需要在命令行工具使用npm i art-template 命令进行下载第三方包

• 接着我们需要通过require方法来引用这个模块

使用const template = require (‘art-template’) 引入模板引擎

代码如下（示例）：

// 下载第三方包

npm i art-template

// 引入第三方模块

const template = require(‘art-template’)

2.调用模块的方法

---

• 上一步我们引入了第三方模块，require引入模板引擎后会返回一个方法，这个方法我们可以把它命名为template，接下来我们调用这个template方法

• 模板引擎的主要功能是将html模板和数据进行拼接，所以我们需要告诉模板引擎，我们需要拼接哪一个模板，以及将什么数据拼接。因此这个函数的第一个参数是html模板的路径(数据类型：字符串)，告诉模板引擎我们需要拼接哪一个html模板；第二个参数需要拼接的数据（数据类型：对象），告诉模板需要拼接的数据。

代码如下（示例）：

let html = template(‘C:/Users/26967/Desktop/Node/art-template模板引擎/view/index.html’,{

name:‘豆小冰’,

age:23,

sex:1 // 返回值为拼接好的字符串

})

console.log(html);

//html模板部分

{{name}}

{{age}}

{{sex}}

console.log(html)的最终结果为：

返回值为拼接好的字符串

"

{{name}}

{{age}}

{{sex}}

"

---

三、常用语法

=========================================================================

template同时支持两种语法，分别是标准语法和原始语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

下面我们都会围绕标准语法展开

1.模块输出

---

将某项数据输出在模板中，它的标准语法如下：

{{ 数据 }}

无论是标准语法还是原始语法，在其内部写数据变量，会将数据变量的值显示在模板当中；语法中还能进行简单的加减乘除，最终显示在模板中的会是运算结果；不仅如此，语法还能进行三目运算。

代码展示如下：

{{value}}

{{a + b}}

{{a ? b :c}}

// 如果a条件成立，模板会显示b，否则显示c

原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。

标准语法如下：

{{ @数据 }}

2.条件判断

---

在模板中可以根据条件来决定显示哪块HTML代码。

如果满足花括号里的条件，就在模板上输出括号与括号之间的结果

// 标准语法

{{ if条件 }} … {{ /if }} // 单个条件判断

{{ if v1 }} … {{else if v2 }} … {{/if}} // 多条件判断

3.循环

---

• 对于从数据库里拿到数组包含多个对象的这种数据，我们就需要通过循环来拿到数据。

• 对于循环的标准语法中，它有两个each，分别表示循环的开始与结束。第一个each 后面写要循环的数组。

• 在两个each中间有两个固定的写法：{{ $index}} 和 {{ $value }}

{{ $index }} ：当前循环的索引

{{ $value }}:：当前循环的这个数据

循环的标准语法为：

{{ each 数据}} {{/each}}

代码示例如下：

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

前端视频资料：
标准语法为：

{{ each 数据}} {{/each}}

代码示例如下：

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

[外链图片转存中…(img-xBhLXdPB-1726046686916)]

前端视频资料：