为什么要使用模版引擎?
- 前端模版引擎和前端框架不一样
- 减少dom操作的异常、减少拼接html的痛苦、减少各浏览器下dom操作的延迟差异
- 缓存模板结构,在数据层操作完直接套用模板输出到客户端界面中
模板引擎的使用
//导入模板引擎
const template=require('art-template');
const path=require('path');//路径
//模板路径 绝对路径
const views=path.join(__dirname,'views','index.art');
//返回拼接好的字符串
const html=template(views,{
name:'李四',
age:2,
content:'<h1>我是标题</h1>'
})
console.log(html);
index.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
{{if age>18}}
年龄大于18
{{else if age<15}}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
//原始语法
<% if(age>18) { %>
年龄大于18
<% } else if (age<15){
%>年龄小于15
<% } %>
<p> {{name}}</p>
<p><%= age %></p>
<p>{{1 + 1}}</p>
<p>{{content}}</p>
<p>{{@ content}}</p>
<p><%- content %></p>
</body>
</html>
总结:有2种输出方式
{{}} 和<%= %>(原始的方式)
里面都可以进行判断,循坏,计算