jade模板基本語法

2021-08-08 21:28:37 字數 2360 閱讀 8782

// 第二個title是標題物件,是傳過來的字串

// method1

title title

// method2

title= title

h1 #

// 效果一樣

h1= title

// 測試一把

h1 this

is a h1 #

p.tcolor welcome to

# p= 'welcome to' + title

div

span hello world!

label hello zw

divlabel this is label

div#content

p#info

a.btn

// 執行js

// 1.

script.

console.log('welcome to join');

// 2.

script

| console.log('hello join')

// ()分割屬性

a(rel='nofollow', href='')

// 注釋

// 這是單行注釋

// 這個是多行注釋

這個是多行注釋

這個是多行注釋

//- 這段注釋不會輸出

// for迴圈

-for (var i=0;i<10;i++)

li hello #

//=缺省會轉義內容(會把標籤轉換為字串)

p= 'welcome

towandoujia

fe, we

want

youb>'

p welcome to wandoujia fe, we wantyoub>

// 這樣不會被轉譯

p!= 'welcome to wandoujia fe, we wantyoub>'

-var name = 'yaochun'

p my name is #

// each 的語法結構

-var jobs = ['fe', 'wangjia','beijign']

each job in jobs

li= job

// 字典

-var jobs =

each val,key in jobs

li #: #

//

case主要的作用和js裡面的switch一樣

when

0 when

1 default

mixin join

ulli 我們需要一幫人

li 喜歡前端

li 了解前端

li 願意在前端不斷學習奮鬥的

li 你是嗎?

li 快來加入我們把

+join()

mixin join(content)

ulli #我們需要一幫人

li 喜歡前端

li 了解前端

li 願意在前端不斷學習奮鬥的

li 你是嗎?

li 快來加入我們把

+join('zw')

mixin join(content)

ulli 我們需要一幫人

li 喜歡前端

li 了解前端

if block

block

else

li 你是嗎?

li 快來加入我們把

+join('zw')

li 我們這有神馬?

li 我們這個有一幫能折騰的老師阿姨

li 我們這有美麗的阿姨

li 我們每週都有技術交流

li 我們這可以用很多開源的新技術

mixin link(href, name) a(class!=attributes.class, title!=attributes.title, href=href)= name

+link('', '豌豆莢前端招聘')(class="btn", title="招聘啦,小夥伴快來點") 著作權歸作者所有。

link(rel='stylesheet', href='/stylesheets/style.css')

Jade模板引擎學習(一)安裝及基本語法

客戶端支援 超強的可讀性 靈活易用的縮排 塊擴充套件 預設經過編碼處理以增強安全性 編譯及執行時的上下文錯誤報告 命令列編譯支援 html5模式 可選的記憶體快取 聯合動態和靜態標記類 利用過濾器解析樹的處理 支援 express 利用each透明的迴圈objects,arrays甚至不可列舉物件 ...

模板引擎jade與ejs語法

首先環境需要準備命令如下npm i jade npm i ejs,npm i fsjade的語法相對於ejs更有侵入性,破壞性這裡寫乙個簡單的列子來比較分析 html head body經過編譯後是 head class hello this is jadediv body html 這裡使用的語法...

jade模板引擎的基本使用

jade和ejs很大的不同是通過縮排的方式解決巢狀和成對標籤的問題,比較適合有 潔癖的同學。jade官方有基礎的語法 安裝jade npm install g jade試用 建立 test.jade 編譯jade test.jade 編譯檔案 jade p test.jade 編譯成帶格式的html...