Ajax模板引擎template

最新推荐文章于 2021-10-16 12:43:41 发布

快乐的小青蛙。

最新推荐文章于 2021-10-16 12:43:41 发布

阅读量524

点赞数

文章标签： html js ajax

本文链接：https://blog.csdn.net/weixin_46002223/article/details/110492698

版权

Ajax模板引擎
作用：使用模板引擎提供的模板语法，可以将数据和html拼接起来
官网地址： https://aui.github.io/art-template/Zh-cn/index.html

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

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

2、准备art-template模板（script中写上text/html会有高亮提示）

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

 3、告诉模板引擎将哪一个模板和哪一个数据进行拼接
	1、模板id
	2、数据      数据类型
	第二个参数必须有一个属性
	template('模板id','模板中显示的数据')

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

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

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

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

   <script id="tpl" type="text/html">
	        <div class="box">{{username}}</div>
	    </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>
		    <!-- 客户端不具备读文件读取能力 -->
		    <!-- 将模板引擎库文件引入当前页面-->
		    <script src="/js/template-web.js"></script>
		</head>
		
		
		<body>
		    <div id="container"></div>
		    <!-- 准备art-template模板 -->
		    <script id="tpl" type="text/html">
		        <h1>{{username}} {{age}}</h1>
		    </script>
		    <script>
		        // 3、告诉模板引擎将哪个数据和哪个数据进行拼接
		        // 1、模板id
		        // 2、数据   数据类型
		        // 方法的返回值就是拼接好的字符串
		        var html = template('tpl', {
		            nausername: 'zhangsan',
		            age: '30'
		        });
		        // console.log(html);
		        document.getElementById('container').innerHTML = html;
		    </script>
		
		</body>
		
		</html>

快乐的小青蛙。

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax模板引擎template

Ajax模板引擎作用：使用模板引擎提供的模板语法，可以将数据和html拼接起来官网地址： https://aui.github.io/art-template/Zh-cn/index.html1、下载art-template模板引擎库文件并在HTML页面引入文件库文件 <script src="./js/template-web.js"></script>2、准备art-template模板（script中写上text/html会有高亮提示） <script
复制链接

扫一扫