一、認識jade ?

1、什么是jade

Jade是一個基于javascript，可以運行在node與瀏覽器環境的一個前端模板引擎，可以實現前后端渲染的統一

2、jade的優點

簡潔和高效

Jade是為了提高前端開發人員的效率而產生的。Jade中，空格、換行、縮進都是有意義的

它省略了html中的閉合標簽

3、安裝

現在的jade改名為pug，所以：

npm install pug

二、jade的語法

1、Doctype

doctype html

2、標簽

類似python的縮進

3、屬性

input(type='checkbox', checked)

4、代碼嵌入

（1）加一個" - "

- for (var x = 0; x < 3; x++)

（2）使用 =

p
? = 'This code is <escaped>!'

（3）使用 !=

5、插值語法

預先指定一個位置，方便以后插入一個新值，簡稱插值，即為 #{ }

- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}

6、遍歷

使用each

// 遍歷數組
ul
? each val, index in ['zero', 'one', 'two']
? ? li= index + ': ' + val

// 遍歷對象
ul
? each val, index in {1:'one',2:'two',3:'three'}
? ? li= index + ': ' + val

7、混合宏（mixins）

需要使用 mixin 標識符，創建混合宏實例時，需要使用 + 標識符：

//- Declaration
mixin list
? ul
? ? li foo
? ? li bar
? ? li baz
//- Use
+list
+list

html效果：

<ul>
? <li>foo</li>
? <li>bar</li>
? <li>baz</li>
</ul>
<ul>
? <li>foo</li>
? <li>bar</li>
? <li>baz</li>
</ul>

8、includes
實現高度復用的另一種方式就是將代碼片段保存到不同文件中

include ./includes/head.jade

9、繼承
Jade 中使用 extends 來繼承代碼片段，與 include 本本分分地引用代碼段不同，繼承可以修改代碼片段。
首先，在 layout 頁面使用 block 標識符，設置一個可修改的代碼片段，緊跟 block 標識符之后的是該代碼片段的名字：
//- layout.jade
doctype html
html
? head
? ? block title
? ? ? title Default title
? body
? ? block content
然后，在 index 頁面繼承 layout，并可以根據代碼片段的名字修改相關代碼：
//- index.jade
extends ./layout.jade
block title
? title Article Title

如果想要追加代碼片段，可以使用 append 和 prepend 指令

10、jquery

如果想在頁面寫jquery函數，則：script. ??

注意，那個點很重要，否則報錯

11、jade中寫html

加個 " | " 即可

總結

以上是生活随笔為你收集整理的jade入门与初步使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。