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

最新推荐文章于 2020-09-15 17:15:34 发布

昵称2-20个字符

最新推荐文章于 2020-09-15 17:15:34 发布

阅读量368

点赞数

分类专栏： javascript 文章标签： art-template 模板引擎 javascript

本文链接：https://blog.csdn.net/weixin_39517183/article/details/107909021

版权

javascript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

art-template

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

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

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

准备art-template模板

<script id=‘tp1’ type='text/html'>
	<div class='box'></div>
</script>

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

var html=template('tp1',{username:'lisi',age:'20'})

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

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

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

<script id='tp1' type='text/html'>
	<div class='box'>{{username}}</div>
</script>

demo：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<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});
		console.log(html);
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>

昵称2-20个字符

关注

0
点赞
踩
2

收藏

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

art-template作用:使用模板引擎提供的模板语法，可以将数据和HTML拼接起来官方地址：https://aui.github.io/art-template/zh-cn/index.html使用步骤：下载art-template模板引擎文件并在HTML页面中引入库文件<script src='./js/template-web.js'></script>准备art-template模板<script id=‘tp1’ type='text/htm
复制链接

扫一扫

专栏目录