寫在前面:現在jade改名成pug了
一.安裝
npm install jade
二.基本使用
1.簡單使用
p hello jade!
渲染后:
<p>hello jade!</p>
jade安裝成功后,進入node命令使用。
2.jade.compile:編譯字符竄
> var jade = require('jade') undefined > jade.compile('p hello jade!')() '<p>hello jade!</p>'
3.jade.compileFile:編譯jade文件
> var jade = require('jade') undefined > jade.compileFile('hello.jade')() '<p>hello jade!</p>'
>
4.jade.render:渲染html
> jade.render('p hello jade!') '<p>hello jade!</p>'
5.jade.renderFile:渲染jade文件
> jade.renderFile('hello.jade') '<p>hello jade!</p>'
>
當jade全局安裝后也可以直接使用jade命令。
6.jade filename
C:\Users\Administrator>jade hello.jade rendered hello.html C:\Users\Administrator>
7.jade -P filename 使html文件變得可讀
修改hello.jade文件為:
doctype html html head title hello jade! body p hello jade
運行:
jade hello.jade
jade.html文件變成這樣:
<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>
這樣的可讀性太差了，不過沒事我們有P(pretty)參數
運行:
jade -P hello.jade
hello.html文件變成這樣:
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<p>hello jade</p>
</body>
</html>
這樣看起來順眼多了。
8.jade -w filename 監控文件
執行：
C:\Users\Administrator>jade -w hello.jade
watching hello.jade
rendered hello.html
一旦我們修改jade文件，html文件會實時修改。此乃神技也，有點像supervisor。
三.常規用法
1.選擇器的使用
p.bt.cn#dn
編譯后
<p id="dn" class="bt cn"></p>
2.如果省略標簽元素，默認是div
.bt.cn#dn
編譯后
<div id="dn" class="bt cn"></div>
3.屬性的使用
一般屬性
div(color='red',font-size='1.5rem')
編譯后
<div color="red" font-size="1.5rem"></div>
多個屬性如果寫一行覺得擁擠的話，可以分開寫
div(color='red' font-size='1.5rem')
style屬性
a(style={color:'red'})
編譯后:
<a style="color:red;"></a>
帶有杠的CSS屬性寫法
a(style={'z-index':'11000'})
4.字符轉義
使用=賦值會進行轉義
div(href="https://www.baidu.com/s?wd=jade&ws=jades")
編譯后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
& 發生了轉義 &
使用!=不會轉義
div(href!="https://www.baidu.com/s?wd=jade&ws=jades")
編譯后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
數據庫中的字符串這樣：萱公子&青橙
很明顯被轉義了。
顯示到前端頁面如果繼續使用 #{}這樣的形式的話，輸出的會是萱公子&青橙。肯定是不行的。
這時候，我們可以使用：!{}這樣的形式
5.變量的使用
單個變量
- var code = 1; p.bt #{code}
編譯后：
<p class="bt">1</p>
對象
- var code = {z:1,q:2}; p.bt #{code.q}
編譯后:
<p class="bt">2 </p>
字符串拼接
- var code = {z:1,q:2}; p(class='bt'+code.z) #{code.q}
編譯后:
<p class="bt1">2</p>
6.流程控制語句
Case
- var i=0;
case i
when 0
div 變量為#{i}
when 1
div 變量為1
default
div 沒有匹配項
編譯后:
<div>變量為0</div>
For
- for(var i=0;i<2;i++) div #{i} //注意縮進
編譯后:
<div>0</div> <div>1</div>
If...else
- var ifv = true; if(ifv) div 為真 else div 為假
編譯后：
<div>為真</div>
7.注釋
html可見注釋
//html可見注釋 div.bt
編譯后:
<!--html可見注釋--> <div class="bt"></div>
html不可見注釋
//-html不可見注釋 div.bt
編譯后：
<div class="bt"></div>
多行注釋(注意縮進)
//
div.bt
編譯后：
<!--div.bt-->
條件注釋
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 8]><!--> <html lang="en"> <!--<![endif]-->
編譯后：
<html lang="en" class="ie8"> <![endif]--> <!--[if IE 8]><!--> <html lang="en"> <!--<![endif]-->
8.include
doctype html
html
head
style
include style.css
body
script
include script.js
編譯后:（一定要有這兩個文件，不然jade會報錯）
<!DOCTYPE html> <html> <head> <style>p{ color:red; } </style> </head> <body> <script>console.log(1)</script> </body> </html>
9.extends與block
layout.jade
doctype html
html
head
title hello jade!
body
block content
block foot
business.jade
extends ./layout.jade
block content
h1 content主體部分
block foot
h1 foot腳注部分
編譯后：
busuness.html
<!DOCTYPE html>
<html>
<head>
<title>hello jade!</title>
</head>
<body>
<h1>content主體部分</h1>
<h1>foot腳注部分</h1>
</body>
</html>
10.jade中寫行內js或css
doctype html
html
head
style.
p{color:red}
body
script.
console.log(OK)
編譯后:
<!DOCTYPE html>
<html>
<head>
<style>p{ color:red;
}
</style>
</head>
<body>
<script>console.log(OK)</script>
</body>
</html>
11.強大的Mixins
mixin templ_li(value) li #{value} ul +templ_li('香蕉') +templ_li('橘子')
編譯后:
<ul>
<li>香蕉</li>
<li>橘子</li>
</ul>
這個特性讓我們能自定義一些模板函數。特別是當我們的html結構有相似的時候。
其實跟less中的公共類，react中的公共函數也都是共通的。
less中：
.temp_color(@color:red){ color:@color;
} //使用 p{ .temp_color(blank); }
react中:
var temp_prop = { getDefaultProps:function(){ return {name:'共有屬性'}; } } //使用
var ComponentDib = React.createClass({ mixins:p[temp_prop ], render:function(){ return <h1>{this.props.name}</h1>
} })