學習Scott老師的jade課程，記錄以下筆記，以便以後查看
0、模板引擎
模板引擎：將動態數據和靜態html頁面糅合的一種實現機制或技術
1、jade安裝與運行
jade依賴於nodejs環境進行安裝和運行，安裝命令如下：
npm install -g jade //-g 表示進行全局安裝
jade -h //安裝完成後，輸入該命令查看是否安裝成功jade在命令行中運行時，只需輸入如下命令即可：
jade jade文件名 //默認編譯後的html文件爲壓縮格式
jade -P jade文件名 //-P 表示編譯後的html爲可讀格式
jade -P -w jade文件名 //-w 表示監控jade文件的變動，變動並保存後實時編譯2、jade的基礎語法
jade採用縮進區分層級關係——同Python的語法
2.1、jade模板文件結構
doctype html //文檔聲明
html //html文檔的根元素
head
meta(charset='utf-8') //元素屬性使用()聲明
title jade模板文件結構 //元素文本使用空格分隔
body
section
div
p2.2、元素屬性、元素文本和元素的值(即表單元素)
2.2.1 元素class和id屬性同CSS的寫法
div#titId.title1.title2
#titId.title1.title2
#titId.title1(class='title2')
//編譯後的html代碼都是如下：
<div id="titId" class="title1 title2"></div> 2.2.2 元素屬性的常規寫法————使用()
div(id='titId',class='title1 title2')
a(href='http://www.baidu.com',title='百度') link2.2.3 元素文本的寫法————使用空格分隔元素與其文本內容
div contents //div爲元素，contents爲其文本內容
//編譯後的html代碼如下：
<div>contents</div>2.2.4 元素的值(即表單元素)的寫法——同元素屬性的常規寫法————使用()
表單元素的屬性並非都需要賦予屬性值,如checked屬性等
input(name='course',type='text',value='jade')
input(name='type',type='checkbox',checked)
//編譯後的html代碼如下
<input name="course" type="text" value="jade">
<input name="type" type="checkbox" checked>3、大段文本、大段文本與標籤混排
3.1 大段文本
p. //使用.來表示以下內容爲大段文本
bigContent
bigContent
bigContent
p //使用|來表示其後的內容爲大段文本的一部分
|bigContent
|bigContent
|bigContent
//. 的用法擴展：在頁面中定義js腳本與css樣式
style.
body{
padding:0;
margin:0;
color:#f00;
}
script.
var jData = new Date();3.2 大段文本與標籤混排
jade中可以直接書寫html標籤，如
,並且jade會原樣輸出這些html標籤及其中的內容 p.
bigContent
<span>span</span> //使用.的大段文本中可以直接書寫html標籤來插入html代碼
bigContent
<strong>1111</strong>
bigContent
p
|bigContent
strong 111 //使用|的大段文本中使用jade語法來插入html代碼，其前不能加|
|bigContent
|bigContent4、註釋
4.1 單行註釋————使用//————在html中被編譯爲
4.2 多行註釋(非緩存註釋)————使用//- ————不會被編譯到html文檔中
//- div.className //註釋單行
//- //註釋多行，採用縮進
div#divId
a(href) link4.3 條件註釋
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if IE]><!--><html><!--<![endif]-->
jade內容
</html>5、變量聲明與數據傳遞
5.1 在jade文件中聲明變量
- var course = 'jade'//在jade文件中聲明變量，作用域爲當前jade文件,且其優先級高於命令行參數和json文件參數5.2 在json文件中聲明變量
jade.json文件中
{
"course":"jade2"
}命令行使用jade.json文件的命令
>jade index.jade -P -w -O jade.json5.3 在jade文件中引用變量
#{course} //引用jade變量 #{jade變量名}
#{course.toUpperCase()} 6、轉義——jade默認安全轉義html、js、css代碼
6.1 安全轉義
- var htmlData = '<script>console.log(1)</script><span>js console </span>'
p #{htmlData} //在頁面上原樣輸出htmlData的內容
p=htmlData //等同於上面的寫法
//在html頁面中htmlData的內容被安全轉義爲
<script>console.log(1)</script><span>js console </span>6.2 非轉義
p !{htmlData} //在頁面上會執行js代碼
p!=htmlData //等同於上面的寫法6.3 使用\原樣輸出#{}、!{}
p \#{htmlData}
p \!{htmlData}
//編譯後的html代碼如下：
<p>#{htmlData}</p>
<p>!{htmlData}</p>6.4 undefined轉義
使用=直接將jade變量賦值給屬性，如果變量未定義，則忽略該屬性
input(value='#{newData}') //newData未定義
//編譯後的html代碼如下：
<input value="undefined">
input(value=newData) //newData未定義
//編譯後的html代碼如下：
<input> //使用=直接爲屬性賦值，如果變量未定義，則忽略該屬性
