模板引擎--art-template(客户端)

最新推荐文章于 2022-03-23 12:11:23 发布

MichstaBe Stars

最新推荐文章于 2022-03-23 12:11:23 发布

阅读量314

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_47085255/article/details/107764901

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 模板引擎概述

作用: 使用模板引擎提高模板语法, 可以将数据和 HTML 拼接起来
官方网址: https://aui.github.io/art-template/zh-cn/index.html

2. 使用步骤

下载art-template模板引擎库文件并在HTML页面中引入库文件

这里下载的是文件

<script src="/js/template-web.js"></script>

准备 art-template 模板

<script id="tpl" type="text/html">
    
  </script>

告诉模板引擎将哪个模板和哪个数据进行拼接

<script>
    // 3. 告诉模板引擎将哪个数据和哪个模板进行拼接
    // 1) 模板id 2) 数据 对象类型
    // 方法的返回值就是拼接好的html字符串
    var html = template('tpl', {username: 'zhangsan', age: 30})    
  </script>

将拼接好的 html 字符串添加到页面中

document.getElementById('container').innerHTML = html

通过模板语法告诉模板引擎, 数据和html字符串要如何拼接

<script id="tpl" type="text/html">
    <h1>{{ username }} {{ age }}</h1>
  </script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1. 将模板引擎的库文件引入到当前页面 -->
  <script src="/js/template-web.js"></script>
</head>
<body>
  <div id="container"></div>
  <!-- 2. 准备art-template模板 -->
  <script id="tpl" type="text/html">
    <h1>{{ username }} {{ age }}</h1>
  </script>
  <script>
    // 3. 告诉模板引擎将哪个数据和哪个模板进行拼接
    // 1) 模板id 2) 数据 对象类型
    // 方法的返回值就是拼接好的html字符串
    var html = template('tpl', {username: 'zhangsan', age: 30})
    document.getElementById('container').innerHTML = html
  </script>
</body>
</html>

MichstaBe Stars

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
模板引擎--art-template(客户端)

1. 模板引擎概述作用: 使用模板引擎提高模板语法, 可以将数据和 HTML 拼接起来官方网址: https://aui.github.io/art-template/zh-cn/index.html2. 使用步骤下载art-template模板引擎库文件并在HTML页面中引入库文件这里下载的是文件<script src="/js/template-web.js"></script>准备 art-template 模板<script id="
复制链接

扫一扫

专栏目录