欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Node.js模板引擎教程-jade速學(xué)與實(shí)戰(zhàn)1

 更新時(shí)間:2017年09月17日 09:50:13   作者:ghostwu  
下面小編就為大家?guī)硪黄贜ode.js模板引擎教程-jade速學(xué)與實(shí)戰(zhàn)1。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

環(huán)境準(zhǔn)備:

全局安裝jade: npm install jade -g

初始化項(xiàng)目package.json: npm init --yes

安裝完成之后,可以使用 jade --help 查看jade的命令行用法

一、在項(xiàng)目目錄下新建index.jade文件

inde.jade代碼:

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 歡迎學(xué)習(xí)jade

1,標(biāo)簽按照html的縮進(jìn)格式寫

2,標(biāo)簽的屬性可以采用圓括號(hào)

3,如果標(biāo)簽有內(nèi)容,可以直接寫在標(biāo)簽的后面

然后在命令行用 jade -P index.jade 把index.jade文件編譯成index.html文件,-P( 把代碼整理成縮進(jìn)格式的,如果不帶這個(gè)參數(shù),index.html就是壓縮格式,不利于閱讀)

編譯之后的index.html代碼:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h3>歡迎學(xué)習(xí)jade</h3>
 </body>
</html>

二、class,id等其他屬性與多行文本的書寫

新建index2.jade文件,代碼如下:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    div#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(,
    target = 'blank') 淘寶
    input(type='button', value='點(diǎn)我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

執(zhí)行編譯命令:jade -P <index2.jade> ghostwu.html 把index2.jade編譯成ghostwu.html文件,編譯之后的代碼如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <div id="box" class="box1 box2 box3"></div>
  <div id="abc" class="box1 box2 box3"></div>
  <h3 class="box1 box2 abc def"></h3><a  rel="external nofollow" target="blank">淘寶</a>
  <input type="button" value="點(diǎn)我"><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 </body>
</html>

1,div#box.box1.box2(class='box3') 這種寫法是emmet的寫法 #就是id屬性 點(diǎn)(.)就是class屬性 括號(hào)也是屬性寫法

2,#abc.box1.box2.box3,全面沒有給元素標(biāo)簽名稱,默認(rèn)就是給div標(biāo)簽加上這些屬性

3,多行文本的兩種寫法

p.

1,this is
<strong>hello</strong>
2,test
3,string

多行文本第1種寫法:p標(biāo)簽后面要跟一個(gè). 里面用原始的html標(biāo)簽寫法

p

| 1, this is
strong hello
| 2, test
| 3, test string

多行文本第2種寫法: 文本前面用豎線 ( | ),標(biāo)簽后面跟內(nèi)容

三、注釋

jade模板代碼:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學(xué)習(xí)-by ghostwu
  body
    h3 單行注釋
    // div.box.box2 這是一段div
    h3 不會(huì)編譯到html文件的注釋
    //- div#box.box2.box3
    h3 塊注釋,也叫多行注釋
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 這里不是注釋
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

編譯之后:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎學(xué)習(xí)-by ghostwu</title>
 </head>
 <body>
  <h3>單行注釋</h3>
  <!-- div.box.box2 這是一段div-->
  <h3>不會(huì)編譯到html文件的注釋</h3>
  <h3>塊注釋,也叫多行注釋</h3>
  <h3>這里不是注釋</h3>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

1,單行注釋

// div.box.box2 這是一段div

2,只在jade中注釋,不會(huì)被編譯到html文件

//- div#box.box2.box3

3,塊注釋( 多行文本注釋 ),被注釋的內(nèi)容要另起一行

4,checkbox后面的顯示文字部分 要注意,不要挨著屬性的后面,要另起一行,寫在豎線的后面

四、jade模板實(shí)戰(zhàn)菜單

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學(xué)習(xí)-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網(wǎng)游小說

編譯( jade index.jade -P -w )之后的效果: -w: 實(shí)時(shí)監(jiān)控文件的修改,保存之后立刻刷新結(jié)果,也就是現(xiàn)代前端開發(fā)中很流行的熱加載技術(shù)

五、解釋變量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學(xué)習(xí)-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網(wǎng)游小說

#{}: 可以解釋變量, toUpperCase():變量轉(zhuǎn)大寫

把json文件的數(shù)據(jù)在編譯的時(shí)候傳遞到模板,

新建data.json文件數(shù)據(jù)

{
"content" : "跟著ghostwu學(xué)習(xí)jade"
}
index2.jade文件模板:
doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學(xué)習(xí)-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

編譯命令:jade index2.jade -P -O data.json -O 指定一個(gè)json文件,把json文件的數(shù)據(jù)傳遞到模板

編譯后的結(jié)果:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎學(xué)習(xí)-BY GHOSTWU</title>
 </head>
 <body>
  <h3>跟著ghostwu學(xué)習(xí)jade</h3>
 </body>
</html>

以上這篇基于Node.js模板引擎教程-jade速學(xué)與實(shí)戰(zhàn)1就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用Express處理請(qǐng)求和托管靜態(tài)資源方式

    使用Express處理請(qǐng)求和托管靜態(tài)資源方式

    這篇文章主要介紹了使用Express處理請(qǐng)求和托管靜態(tài)資源方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 關(guān)于NodeJs和JAVA建立socket連接方式

    關(guān)于NodeJs和JAVA建立socket連接方式

    這篇文章主要介紹了關(guān)于NodeJs和JAVA建立socket連接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • NodeJS創(chuàng)建基礎(chǔ)應(yīng)用并應(yīng)用模板引擎

    NodeJS創(chuàng)建基礎(chǔ)應(yīng)用并應(yīng)用模板引擎

    這篇文章主要介紹了NodeJS創(chuàng)建基礎(chǔ)應(yīng)用并應(yīng)用模板引擎的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • 淺談Koa服務(wù)限流方法實(shí)踐

    淺談Koa服務(wù)限流方法實(shí)踐

    本篇文章主要介紹了淺談Koa服務(wù)限流方法實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • Node中的streams流的具體使用

    Node中的streams流的具體使用

    本文主要介紹了Node中的streams流的具體使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • Node.js的Express框架使用上手指南

    Node.js的Express框架使用上手指南

    這篇文章主要介紹了Node.js的Express框架使用上手指南,Express可以說是目前Node世界中人氣最高的開發(fā)框架,需要的朋友可以參考下
    2016-03-03
  • Node.js使用Angular簡(jiǎn)單示例

    Node.js使用Angular簡(jiǎn)單示例

    這篇文章主要介紹了Node.js使用Angular簡(jiǎn)單示例,如何在Node.js項(xiàng)目中引入AngularJS,這次提供一個(gè)非常簡(jiǎn)單的示例,演示AngularJS里的指令、數(shù)據(jù)綁定、服務(wù)等內(nèi)容。感興趣的小伙伴們可以參考一下
    2018-05-05
  • node后端與Vue前端跨域處理方法詳解

    node后端與Vue前端跨域處理方法詳解

    從目前我了解的情況來看,前后端跨域使用的方式有很多種,這里記錄我使用最順手的一種,即在后端使用cors跨域,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Thinkjs3新手入門之添加一個(gè)新的頁面

    Thinkjs3新手入門之添加一個(gè)新的頁面

    Thinkjs 是一個(gè)快速、簡(jiǎn)單的基于MVC和面向?qū)ο蟮妮p量級(jí)Node.js開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于Thinkjs3新手入門之添加一個(gè)新的頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。
    2017-12-12
  • 詳解express使用vue-router的history踩坑

    詳解express使用vue-router的history踩坑

    這篇文章主要介紹了express 使用 vue-router 的 history 踩坑,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06

最新評(píng)論