我們知道ES6后，javascript提供了一個模板字符串，可以實現模板引擎的功能，很方便好用，但是它需要寫在js文件中，然而對一下大型而又復雜的項目而言，再這樣寫就不太好了，此時我們就需要借助外界的引擎模板來實現一些功能。
什么是模板引擎呢？了解一下它的概念。
模板引擎就是web應用中動態生成html的工具，負責將數據和模板結合。

再來看一下比較流行的或者常用 的模板引擎有哪些呢？
常見模板引擎：ejs、jade(現改名為pug，對，你沒看錯，就是這次要學習的)、Handlebars、Nunjucks、Swing等。

使用模板引擎有什么好處呢？
它可以使項目結構更加清晰、合理，項目可維護性更高

今天來詳細說一說pug模板引擎的事情
當然要使用它，得先安裝才行，安裝命令npm i pug -g
pug的語法：通過縮進關系，代替以前html的層級包含關系

注意：統一使用tab或者空格縮進，如果混用，就不會有我們想要的效果了

pug文件的后綴名為.pug , 比如index.pug

下面來看看具體是怎么使用的！

h1 大家好，我是一個標題div 我是一個div標簽p 我是div下的p標簽span 我是與div同級的span標簽div(class="myDv") 我是class名為myDv的div標簽.myDv2(style=width:"200px";height:"200px";background:"red") 我是class名為myDv2的div#myDv3 我是id名為myDv3的div//- 我是pug注釋，不會被瀏覽器讀取// 我是html注釋(在pug模板中這樣不會報錯，但這樣的注釋內容會被瀏覽器讀取)//- 我是pug多行注釋我是pug注釋我也是pug注釋//- 在標簽后通過空格隔開，再添加"|"線讓pug原樣輸出內容div | hello world//- 使用"-"來定義變量，使用"="把變量輸出到元素內//- 通過#{變量名}的寫法插入相應的變量值- let str = "陽光明媚的天氣真好"p #{str}//- pug中的循環語句uleach item in usersli 姓名：#{item.name};年齡：#{item.age}- for(let i = 0;i<5;i++)span 我是出來的數據#{i}//- 條件判斷- let num = "a"case numwhen 1p num 是1when 2p num 是2defaultp num 是其他值//- 混合模式mixin myDivdiv 我是常見面的div+myDiv+myDiv+myDiv//- 函數mixin personAttr(name,age,sex)p 這個人叫#{name},年齡是#{age},性別是#{sex}+personAttr("湯姆",18)+personAttr("杰瑞",20)+perosnAllr("瑪麗",21)//- 在標簽后通過"."來添加塊級文件script (tyoe="text/javascrpt").consol.log("我是js代碼")

總結

以上是生活随笔為你收集整理的认识pug模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

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