成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

pug的安裝與使用

jeyhan / 1647人閱讀

摘要：說(shuō)明原名不叫，是大名鼎鼎的，后來(lái)由于商標(biāo)的原因，改為，哈巴狗。其實(shí)只是換個(gè)名字，語(yǔ)法都與一樣。丑話說(shuō)在前面，有它本身的缺點(diǎn)可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開(kāi)發(fā)效率。本文將詳細(xì)介紹模板引擎。

說(shuō)明 Pug原名不叫Pug，是大名鼎鼎的jade，后來(lái)由于商標(biāo)的原因，改為Pug，哈巴狗。其實(shí)只是換個(gè)名字，語(yǔ)法都與jade一樣。丑話說(shuō)在前面，Pug有它本身的缺點(diǎn)——可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開(kāi)發(fā)效率。本文將詳細(xì)介紹pug模板引擎。 安裝 
    1.sudo npm install jade -g
    2.sudo yarn global add jade
常用命令 普通編譯，會(huì)在同目錄下生成編譯后的 test.html 文件 
 jade test.jade
    # --pretty | -P (大寫(xiě)) 美化輸出的 html  使之帶有縮進(jìn)等
    jade -P test.jade
    # --out | -o   將編譯后的 html  輸出到指定文件夾
    jade -P test.jade --out ./output
    # --obj | -O   向 jade 模板中傳遞變量，需要傳遞一個(gè) json 或者一個(gè) json 文件的路徑
    jade -P --obj "{testName: "this is tetsName"}" test.jade
    jade -P -O ./config.json test.jade
    # --watch | -w 監(jiān)聽(tīng)文件變化，自動(dòng)重新編譯
    jade -P -w test.jade
標(biāo)簽

jade 中的標(biāo)簽不再含有 html 中的 尖括號(hào)，直接寫(xiě)標(biāo)簽名即可，無(wú)論單雙標(biāo)簽，只寫(xiě)以這個(gè)標(biāo)簽名；

標(biāo)簽間嵌套關(guān)系使用縮進(jìn)加換行實(shí)現(xiàn)；

標(biāo)簽后第一個(gè)空格后邊的內(nèi)容會(huì)被編譯成標(biāo)簽內(nèi)的文本內(nèi)容

doctype html
html(lang="en")

   head
       title Document
   // 通過(guò)換行加縮進(jìn)實(shí)現(xiàn)標(biāo)簽嵌套
   body 
       p 標(biāo)簽后的文本
       // 通過(guò) ‘:’ 實(shí)現(xiàn)行內(nèi)的嵌套 
       p: a 文本
       // 自定義的標(biāo)簽加上 ‘/’ 表示自閉和標(biāo)簽（html 默認(rèn)自閉和標(biāo)簽可以不用）
       foo/

屬性 一般屬性要添加在緊挨標(biāo)簽的括號(hào)里() ，多個(gè)屬性用 , 隔開(kāi)，() 內(nèi)實(shí)際上是一個(gè) javascript 的環(huán)境，可以在這里進(jìn)行基礎(chǔ)的運(yùn)算 
 body 
        // ‘=’ 鏈接屬性和值，多個(gè)屬性用 ‘,’ 隔開(kāi)
        p: a(href="www.baidu.com", target="_blank") 鏈接 
        // 屬性中可以做基礎(chǔ)的 javascript 計(jì)算
        p
            - var link = "www.baidu.com"
            a(href=link.toUpperCase()) 鏈接
        // 屬性多的時(shí)候可以換行，這個(gè)時(shí)候可以不用逗號(hào)分隔
        p: input(
            type="checkbox"
            name="chexkbox"
            checked=true
        ) 
        p(content="
") 偽代碼 ‘=’ 默認(rèn)是轉(zhuǎn)義的
        p(content!="
") 偽代碼 "!=" 表示不轉(zhuǎn)義
class 與 style 屬性 
body
        // 使用 "." 鏈接標(biāo)簽和類(lèi)名或者多個(gè)類(lèi)名
        p.p-class.p-class-add 內(nèi)容
        // 也可以定義變量然后，將其通過(guò)普通方式傳入，可以傳入數(shù)組
        - var classes = ["p-class", "p-class-1", "p-class-2"];
        p(class=classes)
        // 多個(gè) class 屬性，值會(huì)累加
        p.class-name(class="class-1", class=classes)
        // style 屬性的值可以是一個(gè)字符串也可以是一個(gè)樣式對(duì)象
        p(style={color: "red", background: "blue"})
        p(style="color: red;background: blue;")
文本 
body 
        p 這是單行的文本
        p 這是多行文本
            | 使用‘|’區(qū)分多行文本
            | 注意同樣要使用縮進(jìn)
        div.
            "."用來(lái)標(biāo)記一塊文本
            可以是多行的，在這里可以
            寫(xiě) html 標(biāo)簽 
        script.
            // 在這里直接寫(xiě) javascript 代碼
            console.log("first line");
            console.log("second line");
            console.log("last line");
變量

-var 用于聲明變量

{variablesName} 用來(lái)使用變量，輸出的變量數(shù)據(jù)會(huì)被轉(zhuǎn)碼

{variablesName} 通用用來(lái)使用變量，但是輸出的變量數(shù)據(jù)不會(huì)被轉(zhuǎn)碼

tagName=variablesName 標(biāo)簽名等于變量名，與 #{variablesName}一樣，將轉(zhuǎn)碼后的變量值賦值為標(biāo)簽內(nèi)容，區(qū)別在于，如果變量未定義 #{} 會(huì)返回 undefined；= 會(huì)將其忽略

tagName!=variablesName 與 tagName=variablesName 類(lèi)似，除了不轉(zhuǎn)義變量值

如果要輸出 #{} 或者 !{} 可以再其前面加上反斜杠 #{xxx} | !{xxx}

持續(xù)更新，希望支持。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113646.html

相關(guān)文章

  • pug的安裝與使用

    摘要：說(shuō)明原名不叫，是大名鼎鼎的，后來(lái)由于商標(biāo)的原因，改為，哈巴狗。其實(shí)只是換個(gè)名字，語(yǔ)法都與一樣。丑話說(shuō)在前面，有它本身的缺點(diǎn)可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開(kāi)發(fā)效率。本文將詳細(xì)介紹模板引擎。 說(shuō)明 Pug原名不叫Pug，是大名鼎鼎的jade，后來(lái)由于商標(biāo)的原因，改為Pug，哈巴狗。其實(shí)只是換個(gè)名字，語(yǔ)法都與jade一樣。丑話說(shuō)在前面，Pug有它本身的缺點(diǎn)——可移植性...

    dantezhao 評(píng)論0 收藏0

  • 【開(kāi)發(fā)經(jīng)驗(yàn)】使用Wepy與Bmob新sdk快速開(kāi)發(fā)小程序

    摘要：小項(xiàng)目的內(nèi)容基本就是維護(hù)訂單表，訂單狀態(tài)，用戶表等，小程序還要解決微信登錄，微信支付等等微信。后臺(tái)管理系統(tǒng)待施工，其實(shí)這部分和小程序差不多，改改直接用，出來(lái)往的服務(wù)一扔，就給甲方用了。 引言：最近一直在做一些小的小程序項(xiàng)目，小項(xiàng)目雖然小，但是前后端和管理系統(tǒng)都還是需要的。在甲方極低的預(yù)算下，人工又顯得極其緊張，所以我大概摸索出了一套能用盡量少的代碼，盡量減少單人工作量，又能實(shí)現(xiàn)實(shí)際需求...

    hikui 評(píng)論0 收藏0

  • vue+webpack+scss+jade(pug)的環(huán)境搭建

    摘要：標(biāo)簽聲明轉(zhuǎn)載須經(jīng)本人同意這篇博客就聊一聊如何用搭建的環(huán)境，以及拓展了下如何在搭建好的環(huán)境中使用以及，廢話不多說(shuō)，直接進(jìn)入主題。第三步補(bǔ)充，依賴(lài)擴(kuò)展現(xiàn)在，我們搭建的環(huán)境并不支持，語(yǔ)法，我們需要再加工一下配置。 標(biāo)簽：vue,webpack,jade,scss聲明：轉(zhuǎn)載須經(jīng)本人同意這篇博客就聊一聊如何用webpack搭建vue2.0的環(huán)境，以及拓展了下如何在搭建好的環(huán)境中使用scss以及p...

    GraphQuery 評(píng)論0 收藏0

  • Express 文檔（使用模板引擎）

    摘要：一些與一起使用的流行模板引擎是和，應(yīng)用程序生成器使用作為其默認(rèn)值，但它也支持其他幾個(gè)。有關(guān)可與一起使用的模板引擎列表，請(qǐng)參閱模板引擎，另請(qǐng)參閱比較模板引擎等。，使用的模板引擎，例如，要使用模板引擎。 使用模板引擎 模板引擎使你可以在應(yīng)用程序中使用靜態(tài)模板文件，在運(yùn)行時(shí)，模板引擎用實(shí)際值替換模板文件中的變量，并將模板轉(zhuǎn)換為發(fā)送到客戶端的HTML文件，這種方法可以更輕松地設(shè)計(jì)HTML頁(yè)面。...

    gxyz 評(píng)論0 收藏0

  • Express 實(shí)戰(zhàn)（七）：視圖與模板：Pug 和 EJS

    摘要：而框架中最常用的兩個(gè)視圖引擎是和。實(shí)際上這些上下文對(duì)象就是會(huì)在視圖中使用到的變量。其實(shí)視圖緩存并不是緩存視圖實(shí)際上它緩存的視圖路徑。根據(jù)默認(rèn)視圖引擎將缺少拓展名的視圖文件補(bǔ)充完整。實(shí)際上存在由不同組織維護(hù)的兩個(gè)不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的內(nèi)容大都是關(guān)于 Express 框...

    wmui 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jeyhan

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<