模板引擎：
- jade-破坏式、侵入式、强依赖
- ejs-温和、非侵入式、弱依赖性
- 模板引擎：生成页面
1. jade模板库
配置安装：
cnpm install jade
在jade文件中缩进代表层级
新建.js文件，在里面引入.jade文件：
const jade = require('jade');
var str = jade.renderFile('./views/1.jade',{pretty: true});
console.log(str);
pretty属性是用来美化格式的
2. jade基本语法
1. 根据缩进，规定层级
2. 属性放在()里面，有多个属性的话用逗号分隔
3. 内容空个格，直接往后堆
3. 属性：在js文件中属性的写法:
<script src="a.js"></script>
在jade文件中的写法:
script(src="a.js")
例如在2.jade文件中写入：
html
head
style
script(src="a.js")
link(href="a.css",rel="stylesheet")
body
div
ul
li
input(type="text",id="txt1",value="abc")
li
input(type="text",id="txt2",value="111")
li
input(type="text", id="txt3",value="222")
div
新建jade.js文件，写入内容：
const jade = require('jade');
var str = jade.renderFile('./views/2.jade',{pretty: true});
console.log(str);
通过执行jade.js文件得到：
<head>
<style></style>
<script src="a.js"></script>
<link href="a.css" rel="stylesheet"/>
</head>
<body>
<div>
<ul>
<li>
<input type="text" id="txt1" value="abc">
</li>
<li>
<input type="text" id="txt2" value="111">
</li>
<li>
<input type="text" id="txt3" value="222">
</li>
</ul>
</div>
<div></div>
</body>
我们也可以将模板文件编译后导入指定的文件中：
在js文件中可以这样写：
const jade = require('jade');
const fs = require('fs');
var str = jade.renderFile('./views/2.jade,{pretty:true}');
//将编译完的文件写入build目录下的2.html中
fs.writeFile('./build/2.html', str, function(err){
if(err)
console.log('写入失败');
else
console.log('写入成功');
});
4. 内容：在模板中插入内容只需要空一格+内容即可
例如在.jade文件中写入：
html
head
style
script alert("aaa");
body
a(href="http://www.baidu.com") 百度
a(href="http://www.sina.com") 新浪
经过编译后得到：
<html>
<head>
<style></style>
<script>alert("abc");<script>
</head>
<body><a href="http://www.baidu.com">百度</a><a href="http://www.sina.com">新浪</a>
</html>
这时候心里犯嘀咕了，不是说好的美化格式么？咋a标签都不个我换行呢？jade就说了老兄，a标签是行内元素啊，换行可能产生意料之外的空格！
<font color=red>注意：</font> style属性和class属性比较特殊。
style属性有两种写法：1. 普通属性写法 2. 用json
div(style="width:200px;height:200px;background:red")
div(style={width:'200px',height:'200px',background:'red'})
class属性有两种写法：1. 普通属性写法 2. 用数组
div(class="left active move")
div(class=['left','active','move'])
5. 缩写
div.box
div#div1
jade的两个方法
jade.render('字符串');
jade.renderFile('模板文件名',参数);
网友评论