最近看art-template模板引擎的知识分享给大家
文章目录
前言
使用传统方式渲染UI结构需要手动操作大量的DOM，模板引擎可以减少我们的DOM操作，提供数据和空白模板，模板引擎就会自动生成新页面。
一、模板引擎是什么？
模板引擎，可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
二、使用模板引擎的好处
1. 减少了字符串的拼接操作
2. 使代码结构更清晰
3. 使代码更易于阅读与维护
三、art-template模板引擎的使用
1. 导入 art-template
在浏览器中访问地址找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地。
然后放到项目的js文件夹下
在页面中导入模板引擎
2. 定义数据
将需要渲染的数据定义好
3. 定义模板
模板的HTML结构一定要定义在script标签中，如果没有修改script标签默认的type属性则默认是text/javascript即标签中代码当做Js解析执行，但是模板是写HTML的所以应该修改为text/html
4. 调用 template 函数
控制台中可以看到打印出字符串说明是没问题的，这里数据显示不是username、age、grade而是实际的数据说明调用没问题。
5. 渲染HTML结构
进行相应的dom操作
发现已经渲染到页面中
6. 完整代码
<!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>
<script src="js/template-web.js"></script>
</head>
<body>
<!-- 定义一个盒子用来渲染数据 -->
<div id="test_box"></div>
<script type="text/html" id="user_test">
<!-- 模板引擎语法{{}}代表占位符是用来填充数据的 -->
<h1>{{username}}</h1>
<h1>{{age}}</h1>
<h1>{{grade}}</h1>
</script>
<script>
var data = {
username: 'vegetable-WEN',
age: '21',
grade: '大学'
}
// 模板引擎template函数语法 template('模板id','渲染的数据')
var str = template('user_test', data);
console.log(str);
// 获取testbox盒子
var testbox = document.getElementById('test_box');
// 将数据渲染到盒子中
testbox.innerHTML = str;
</script>
</body>
</html>
总结
以上就是今天要讲的art-template模板引擎的知识
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
