art-templat模板引擎——Ajax模板引擎使用

最新推荐文章于 2022-07-30 22:54:27 发布

云兮书嗣

最新推荐文章于 2022-07-30 22:54:27 发布

阅读量227

点赞数

分类专栏： Ajax 文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_37985967/article/details/115606939

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

模板引擎

1.模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和HTML拼接起来
在这里插入图片描述
使用步骤：
1.下载art-template模板引擎库文件并在HTM页面中引入库文件

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

2.准备art-template模板

<script id="tpl" type="text/html">
    <div class="box"></div>
</script>

3.告诉模板引擎讲哪一个模板和哪个数据进行拼接

var html= template('tpl', {username:'zhangsan', age:'20'});

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

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

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

<script id="tpl" type="text/html">
    <div class="box">{{username}}</div>
</script>

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 type="text/html" id="tpl">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script type="text/javascript">
        //3.告诉模板引擎将哪个数据和哪个模板进行拼接
        //1. 模板id 2.数据对象类型
        //方法的返回值就是拼接好的html字符串
        var html = template('tpl', {username: 'zhangsan', age: 30});
        document.getElementById('container').innerHTML = html;
        
    </script>
</body>
</html>