我們知道ES6后，javascript提供了一個(gè)模板字符串，可以實(shí)現(xiàn)模板引擎的功能，很方便好用，但是它需要寫在js文件中，然而對(duì)一下大型而又復(fù)雜的項(xiàng)目而言，再這樣寫就不太好了，此時(shí)我們就需要借助外界的引擎模板來(lái)實(shí)現(xiàn)一些功能。
什么是模板引擎呢？了解一下它的概念。
模板引擎就是web應(yīng)用中動(dòng)態(tài)生成html的工具，負(fù)責(zé)將數(shù)據(jù)和模板結(jié)合。

再來(lái)看一下比較流行的或者常用 的模板引擎有哪些呢？
常見(jiàn)模板引擎：ejs、jade(現(xiàn)改名為pug，對(duì)，你沒(méi)看錯(cuò)，就是這次要學(xué)習(xí)的)、Handlebars、Nunjucks、Swing等。

使用模板引擎有什么好處呢？
它可以使項(xiàng)目結(jié)構(gòu)更加清晰、合理，項(xiàng)目可維護(hù)性更高

今天來(lái)詳細(xì)說(shuō)一說(shuō)pug模板引擎的事情
當(dāng)然要使用它，得先安裝才行，安裝命令npm i pug -g
pug的語(yǔ)法：通過(guò)縮進(jìn)關(guān)系，代替以前html的層級(jí)包含關(guān)系

注意：統(tǒng)一使用tab或者空格縮進(jìn)，如果混用，就不會(huì)有我們想要的效果了

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

下面來(lái)看看具體是怎么使用的！

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。