// 第二個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...