Pug/jade快速上手教程
文章目錄
- 1.為什么要使用模板引擎
- 2. pug的介紹
- 2.1關(guān)于pug的一特點(diǎn)：
- 2.2 pug的安裝
- 3.pug語法
- 3.1 標(biāo)簽語法
- 3.2 屬性
- 3.3 文本
- 3.4 pug條件語句
- 3.5 pug循環(huán)語句
- 3.6 mixin混合
- 3.7 模板繼承
- 3.7.1 在pug中支持block和extends來繼承模板
- 3.7.2 包含
- 4. express渲染
1.為什么要使用模板引擎
在nodejs中為什么要使用模板引擎。首先我們先想象一個(gè)場景，當(dāng)前端請求到后端的一組數(shù)據(jù)后，我們要渲染dom，以前的常規(guī)操作就是使用js進(jìn)行字符串的拼接，這樣做雖然可以解決問題，但是這無疑增加了降低了代碼的可讀性和可維護(hù)性。一旦需求發(fā)生改變我們將束手無策。
在express框架中有很多模板引擎供我們選擇。ejs、pug\jade等。
2. pug的介紹
實(shí)際上pug就是jade，jade改名后就成了pug。下面我們介紹一下pug的基本語法以及在express框架的使用。
pug 是一個(gè)高性能的模板引擎，它深受 Ham影響，它是用 JavaScript 實(shí)現(xiàn)的，并且可以供 Node 使用。 通 過一套語法把某一段靜態(tài)的模板，通過模板引擎將動態(tài)的數(shù)據(jù)替換進(jìn)去，然后將生成的html交給瀏覽器去解析和渲 染。
2.1關(guān)于pug的一特點(diǎn)：
1.超強(qiáng)的可讀性
2.客戶端支持
3.靈活易用的縮進(jìn)
4.安全，默認(rèn)代碼是轉(zhuǎn)義的
5.命令行下編譯jade模板
6.模板繼承
7.塊擴(kuò)展
8.編譯及運(yùn)行時(shí)的上下文錯(cuò)誤報(bào)告
9.HTML5模式
10.可選的內(nèi)存緩存
11.聯(lián)合動態(tài)的靜態(tài)標(biāo)記類
12.利用過濾器解析樹的處理
13.沒有前綴的標(biāo)簽
14.原生支持 express 模塊
2.2 pug的安裝
首先要想使用pug先要進(jìn)行全局安裝。
npm i pug -g//全局安裝npm i pug-cli -g//全局安裝腳手架在項(xiàng)目中使用 pug時(shí)，還需要進(jìn)行局部安裝。
npm init //安裝package.jsonnpm i pug --save-dev //局部安裝編譯
pug pug文件名 -o 目標(biāo)路徑 -P -wvscode可以安裝插件進(jìn)行編譯（不適合在項(xiàng)目中使用）：
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Prowscats.eno預(yù)覽版
3.pug語法
基本骨架：
doctype html html(lang="en")headmeta(charset="UTF-8")meta(http-equiv="X-UA-Compatible", content="IE=edge")meta(name="viewport", content="width=device-width, initial-scale=1.0")title Documentbody3.1 標(biāo)簽語法
每層級標(biāo)簽之間都采用多一個(gè)縮進(jìn)表示嵌套關(guān)系，無需閉合標(biāo)簽，無需尖括號。
h1 這是一個(gè)pug模板案例divullispanpinput上述代碼的 li 元素比 ul元素多一個(gè)縮進(jìn)，則表示 ul嵌套了 li 標(biāo)簽。
3.2 屬性
3.3 文本
若要輸出文本非常簡單，只需在元素后面添加即可。
h1 這是一個(gè)h1標(biāo)簽 .box hello pug動態(tài)輸出內(nèi)容：
- var obj = {name:'tom'} p #{obj.name} is a man輸出屬性值：
- var url = 'http://www.baidu.com' a(href=url) 百度一下3.4 pug條件語句
pug支持純原生的javascript，所以也可以支持條件語句。
- var flag = true if flag p= flag else p= flag3.5 pug循環(huán)語句
pug提供了兩種迭代的主要方法，each和while，當(dāng)然，for循環(huán)還是可以使用的。
for：
- var arr = [1,2,3,4,5] ul - for(var i=0;i<arr.length;i++) li= arr[i]each：
- var arr = {name:'binge',six:'man'} ul each val in arr li= valwhile：
ul while num<5 li= num++3.6 mixin混合
相當(dāng)于函數(shù)，可傳參
骨架：
//- 定義函數(shù) mixin study //- 代碼塊p good good study //- 函數(shù)的調(diào)用 + study實(shí)例：
mixin show(time)h3= time//- 判斷是否存在blockif block blockelse p no show +show('2017-11-11') p Singing and dancing //block3.7 模板繼承
3.7.1 在pug中支持block和extends來繼承模板
在項(xiàng)目中經(jīng)常出現(xiàn)代碼塊復(fù)用的情況。比如html文檔的head部分。所以我們可以將其抽離出來作為公共模塊。
例子：
common.pug
doctype html html head title pug模板body h1 pug模板//- 哪個(gè)文件繼承，就調(diào)用哪個(gè)文件的block為content的模塊block contentindex.pug使用：
// extends繼承語法，common，繼承的文件的路徑 extends common block content mixin show(name,...shows) p=name ul each show in shows li= show +show('binge','唱歌','跳舞','睡覺')生成的hmtl文件：
<!DOCTYPE html> <html> <head> <title>pug模板</title> </head> <body> <h1>pug模板</h1> <p>binge</p> <ul> <li>唱歌</li> <li>跳舞</li> <li>睡覺</li> </ul> </body> </html>3.7.2 包含
pug允許在文件中插入另一個(gè)文件內(nèi)容。
common.js
doctype html html head //- 引入header.pug include header body h1 pug模板block contentheader.pug
title pug模板 meta(charset="utf-8")生成html：
<!DOCTYPE html> <html><head><title>pug模板</title><meta charset="utf-8"></head><body><h1>pug模板</h1></body> </html>4. express渲染
express中使用pug/jade實(shí)際上非常容易。
我這里使用生成器生成express mvc架構(gòu)。
使用方法（新建路由文件）：
var express = require('express'); var router = express.Router();/* GET home page. */ router.get('/', function(req, res, next) {res.render('index', { title: 'Express' }); }); router.get('/index',(req,res,next)=>{res.render('test'); })module.exports = router;至于具體實(shí)現(xiàn)可以看一下express架構(gòu)的實(shí)現(xiàn)。
這是普通使用：
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.set('views','./views'); //設(shè)置應(yīng)用程序視圖的目錄（可以是數(shù)組，若是數(shù)組，則視圖按照它們在數(shù)組中出現(xiàn) 的順序進(jìn)行查找） app.set('view engine','jade'); //設(shè)置當(dāng)省略后綴名時(shí)，使用默認(rèn)的引擎擴(kuò)展 app.use(bodyParser.urlencoded({ extended: true })); //解析application/x-www-formurlencoded app.get('/',function(req,res){res.render('jade',{title:'index page',user:{username:'tom',password:123456}}) }) app.listen(8888,function(){console.log('project running at http://127.0.0.1:8888') })總結(jié)
以上是生活随笔為你收集整理的Pug/jade快速上手教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Gantt - attachEvent事
- 下一篇： java解析魔兽争霸3录像_Java解析