正文
在浏览器中使用art-template模板引擎
模板引擎分很多种，art-template是其中一种模板引擎。
安装教程:
1.新建一个空白文件夹，cd进入
2.首先执行初始化操作：npm init
3.然后安装art-template模板引擎： npm i art-template --save
在node_modules文集夹中找到template-web.js文件。
新建一个index.js文件。
使用模板引擎.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
{{ name }}
</script>
<script>
const app = template('tpl', {
name: '小明'
})
console.log(app)
</script>
</body>
</html>
使用模板引擎的注意事项：
小结：模板引擎不关心内容,只关心模板标记语法，语法类似vue的双大括{{}}八字胡号的学习。
demo：
为什么说模板引擎不关心内容呢？
看下下面这个demo就知道了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我叫{{ name }}
来自{{ province }}
今年{{ age }}
爱好{{ each hobbies }} {{ $value }} {{ /each }}
</body>
</html>
</script>
<script>
const app = template('tpl', {
name: '小明',
province: '广东省江门市',
age: 21,
hobbies: [
'羽毛球',
'追剧',
'听音乐'
]
})
console.log(app)
</script>
</body>
</html>
我们使用再使用一层<!DOCTYPE html>包裹着代码。
