當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
NodeJS 模板 -- jade
生活随笔
收集整理的這篇文章主要介紹了
NodeJS 模板 -- jade
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jade 的安裝什么的就不說(shuō)了，就說(shuō)一下jade的一些語(yǔ)法。官網(wǎng)在這里
jade 是必須用自己的語(yǔ)法，她不可以和原生的html混合使用，當(dāng)然ejs是可以的。
例子一
const jade = require('jade');var str = jade.render('html');console.log(str) 運(yùn)行結(jié)果為 <html></html> 例子二，(讀取 .jade 文件，)
-.js
const jade = require('jade') const fs = require('fs')var str = jade.renderFile('./views/2.jade', {pretty: true})fs.writeFile('./build/1.html', str, function (err) {if (err) {console.log("寫(xiě)入失敗")} else {console.log("寫(xiě)入成功")} })-2.jade
htmlheadscript(src="a.js")link(href="a.css", rel="stylesheet")bodya(href="www.baidu.com") 百度div(style="width:200px; background:red")div(style= {width: '200px', height: '200px'})div(title = {width: '200px', height: '200px'})div.boxdiv#oDiv -build/1.html
<html><head><script src="a.js"></script><link href="a.css" rel="stylesheet"/></head><body><a href="www.baidu.com">百度</a><div style="width:200px; background:red"></div><div style="width:200px;height:200px"></div><div title="[object Object]"></div><div class="box"></div><div id="oDiv"></div></body> </html>
語(yǔ)法總結(jié)
1在前面加個(gè)'|' ，就表示的原樣輸出。
body|aaa // 輸出 <body>aaa </body>
2寫(xiě)法 在標(biāo)簽后面加個(gè) '.',表示的意思是，比這個(gè)深的下一級(jí)都原樣輸出。
script.window.onload = function () {console.log("初始化完成")} // 輸出 <script>window.onload = function () {console.log("初始化完成")} </script>3 include
includescriptinclude a.js // 這樣就可以讀取
4 變量輸出, #{變量}
-.jade div 我的名字是 #{name} -.js var str = jade.renderFile('路徑', { pretty: true, name: 'Mar'}) //輸出 <div>我的名字是 Mar<div>有個(gè)簡(jiǎn)單的寫(xiě)法就是 span=name， 她就等于 #{name}
5 用橫杠可以表示是js 代碼
body-var a = 12;-var b = 4;div 結(jié)果是 #{a+b}
6 for 循環(huán)
body-for(var i = 0; i < arr.length; i++)div=arr[i] //輸出<body><div>aaa</div><div>bbb</div><div>ccc</div></body>
7 非轉(zhuǎn)義輸出 (比如像輸出某個(gè)標(biāo)簽, ) div!=content
htmlheadbodydiv!=contentjs代碼為 var str = jade.renderFile('./views/2.jade', {pretty: true,content: '<p>標(biāo)簽</p>' }) //輸出 <html><head></head><body><div><p>標(biāo)簽</p></div></body> </html>
8 if else
htmlheadbody-var a = 12;-if(a%2 == 0)div(style={background: 'red'}) 偶數(shù)-elsediv(style={background: 'green'}) 奇數(shù)
總結(jié)
以上是生活随笔為你收集整理的NodeJS 模板 -- jade的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【数据科学】 推荐一个更高效的数据清洗方
- 下一篇： Spring事务配置实例