模板引擎的基本概念、art-template模板引擎

渲染UI结构时遇到的问题

 

 上述代码是通过字符串拼接的形式，来渲染UI结构

如果UI结构比较复杂、则拼接字符串的时候需要格外注意引号之前的嵌套、且一旦需求发生变化，修改起来也非常麻烦

 

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

 

 模板引擎的好处

1.减少了字符串的拼接操作

2.使代码结构更清晰

3.使代码更易于阅读与维护

 

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

art-template的使用步骤

1.导入art-template

2.定义数据

3.定义模板

4.调用template函数

5.渲染HTML结构

art-template标准语法

什么是标准语法

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

 

标准语法-输出

 

在{{}}语法中、可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出

 

标准语法-原文输出

{{@ value}}

如果要输出的 value 值中、包含了HTML标签结构、则需要使用原文输出语法、才能保证HTML标签被正常渲染

 

标准语法-条件输出

如果要实现条件输出、则可以在{{}}中使用if....else if.../if的方式、进行按需输出

 

 

art-template标准语法

标准语法-循环输出

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

 

标准语法-过滤器

 

 过滤的本质、就是一个function处理函数

 

 

 左边是值、右边是处理函数

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

定义过滤器的基本语法如下: