认识 模板引擎 art-template

常用模板引擎 art-template

作用： 使用 模板引擎 提供的模板语法，可以将 数据 和 HTML 拼接起来

安装

npm install art-template --save

art-template 模板引擎的官网地址： https://aui.github.io/art-template/zh-cn/index.html

标准语法

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

输出

{
   {
    value }}
{
   {
    obj.key }}
{
   {
    obj['key'] }}
{
   {
    a ? b : c }}
{
   {
    a || b }}
{
   {
    a + b }}

原文输出

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

条件输出

{
   {
    if value }}	按需输出的内容	{
   {
   /if}}
{
   {
    if value }}	按需输出的内容	{
   {
    else if value2 }}	按需输出的内容	{
   {
   /if}}

循环输出

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

{
   {
    each arr }}
{
   {
    $index }} {
   {
    $value }}
{
   {
    /each }}

过滤器

{
   {
    value | filterName }}

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

定义 过滤器 的基本语法：

template.defaults.imports.filterName = function(value) {