jade 的安装什么的就不说了，就说一下jade的一些语法。官网在这里
jade 是必须用自己的语法，她不可以和原生的html混合使用，当然ejs是可以的。
例子一
const jade = require('jade');
var str = jade.render('html');
console.log(str)<html></html>-.js
const jade = require('jade')
const fs = require('fs')
var str = jade.renderFile('./views/2.jade', {pretty: true})
fs.writeFile('./build/1.html', str, function (err) {
if (err) {
console.log("写入失败")
} else {
console.log("写入成功")
}
})
html
head
script(src="a.js")
link(href="a.css", rel="stylesheet")
body
a(href="www.baidu.com") 百度
div(style="width:200px; background:red")
div(style= {width: '200px', height: '200px'})
div(title = {width: '200px', height: '200px'})
div.box
div#oDiv
<html>
<head>
<script src="a.js"></script>
<link href="a.css" rel="stylesheet"/>
</head>
<body><a href="www.baidu.com">百度</a>
<div style="width:200px; background:red"></div>
<div style="width:200px;height:200px"></div>
<div title="[object Object]"></div>
<div class="box"></div>
<div id="oDiv"></div>
</body>
</html>
语法总结
1在前面加个'|' ，就表示的原样输出。
body
|aaa
// 输出
<body>
aaa
</body>2写法 在标签后面加个 '.',表示的意思是，比这个深的下一级都原样输出。
script.
window.onload = function () {
console.log("初始化完成")
}
// 输出
<script>
window.onload = function () {
console.log("初始化完成")
}
</script>include
script
include a.js // 这样就可以读取4 变量输出, #{变量}
-.jade
div 我的名字是 #{name}
-.js
var str = jade.renderFile('路径', { pretty: true, name: 'Mar'})
//输出
<div>我的名字是 Mar<div>
5 用横杠可以表示是js 代码
body
-var a = 12;
-var b = 4;
div 结果是 #{a+b}6 for 循环
body
-for(var i = 0; i < arr.length; i++)
div=arr[i]
//输出
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
7 非转义输出 (比如像输出某个标签, ) div!=content
html
head
body
div!=content
js代码为
var str = jade.renderFile('./views/2.jade', {
pretty: true,
content: '<p>标签</p>'
})
//输出
<html>
<head></head>
<body>
<div><p>标签</p></div>
</body>
</html>
8 if else
html
head
body
-var a = 12;
-if(a%2 == 0)
div(style={background: 'red'}) 偶数
-else
div(style={background: 'green'}) 奇数
4321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
