Pug/jade快速上手教程
文章目錄
- 1.為什么要使用模板引擎
- 2. pug的介紹
- 2.1關于pug的一特點：
- 2.2 pug的安裝
- 3.pug語法
- 3.1 標簽語法
- 3.2 屬性
- 3.3 文本
- 3.4 pug條件語句
- 3.5 pug循環語句
- 3.6 mixin混合
- 3.7 模板繼承
- 3.7.1 在pug中支持block和extends來繼承模板
- 3.7.2 包含
- 4. express渲染
1.為什么要使用模板引擎
在nodejs中為什么要使用模板引擎。首先我們先想象一個場景，當前端請求到后端的一組數據后，我們要渲染dom，以前的常規操作就是使用js進行字符串的拼接，這樣做雖然可以解決問題，但是這無疑增加了降低了代碼的可讀性和可維護性。一旦需求發生改變我們將束手無策。
在express框架中有很多模板引擎供我們選擇。ejs、pug\jade等。
2. pug的介紹
實際上pug就是jade，jade改名后就成了pug。下面我們介紹一下pug的基本語法以及在express框架的使用。
pug 是一個高性能的模板引擎，它深受 Ham影響，它是用 JavaScript 實現的，并且可以供 Node 使用。 通 過一套語法把某一段靜態的模板，通過模板引擎將動態的數據替換進去，然后將生成的html交給瀏覽器去解析和渲 染。
2.1關于pug的一特點：
1.超強的可讀性
2.客戶端支持
3.靈活易用的縮進
4.安全，默認代碼是轉義的
5.命令行下編譯jade模板
6.模板繼承
7.塊擴展
8.編譯及運行時的上下文錯誤報告
9.HTML5模式
10.可選的內存緩存
11.聯合動態的靜態標記類
12.利用過濾器解析樹的處理
13.沒有前綴的標簽
14.原生支持 express 模塊
2.2 pug的安裝
首先要想使用pug先要進行全局安裝。
npm i pug -g//全局安裝npm i pug-cli -g//全局安裝腳手架在項目中使用 pug時，還需要進行局部安裝。
npm init //安裝package.jsonnpm i pug --save-dev //局部安裝編譯
pug pug文件名 -o 目標路徑 -P -wvscode可以安裝插件進行編譯（不適合在項目中使用）：
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Prowscats.eno預覽版
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 標簽語法
每層級標簽之間都采用多一個縮進表示嵌套關系，無需閉合標簽，無需尖括號。
h1 這是一個pug模板案例divullispanpinput上述代碼的 li 元素比 ul元素多一個縮進，則表示 ul嵌套了 li 標簽。
3.2 屬性
3.3 文本
若要輸出文本非常簡單，只需在元素后面添加即可。
h1 這是一個h1標簽 .box hello pug動態輸出內容：
- 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循環語句
pug提供了兩種迭代的主要方法，each和while，當然，for循環還是可以使用的。
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混合
相當于函數，可傳參
骨架：
//- 定義函數 mixin study //- 代碼塊p good good study //- 函數的調用 + study實例：
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來繼承模板
在項目中經常出現代碼塊復用的情況。比如html文檔的head部分。所以我們可以將其抽離出來作為公共模塊。
例子：
common.pug
doctype html html head title pug模板body h1 pug模板//- 哪個文件繼承，就調用哪個文件的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允許在文件中插入另一個文件內容。
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實際上非常容易。
我這里使用生成器生成express mvc架構。
使用方法（新建路由文件）：
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;至于具體實現可以看一下express架構的實現。
這是普通使用：
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.set('views','./views'); //設置應用程序視圖的目錄（可以是數組，若是數組，則視圖按照它們在數組中出現 的順序進行查找） app.set('view engine','jade'); //設置當省略后綴名時，使用默認的引擎擴展 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') })總結
以上是生活随笔為你收集整理的Pug/jade快速上手教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Gantt - attachEvent事
- 下一篇： pycharm导出依赖包_使用pycha