Node.js模板引擎Jade快速入门与基本语法解析

127 浏览量更新于2024-08-31 收藏 84KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"本文将深入介绍Node.js中的模板引擎Jade，包括其基本概念、标签使用、变量和数据处理以及属性设置。" Jade是Node.js生态中的一个强大的模板引擎，它的设计灵感来源于Haml，因此在语法上与Haml有很多相似之处。Jade的一个显著特点是它简化了HTML的编写，允许开发者省略开始和结束标签，它会自动补全。例如，编写如下Jade代码： ```jade body div h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。 div footer ©Pandora ``` 这段代码会被编译成以下HTML： ```html <body> <div> <h1>Jade是Node.js的一个模板引擎</h1> <p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p> </div> <div> <footer>©Pandora</footer> </div> </body> ``` 在Jade中，如果省略标签名，系统会默认使用`div`作为标签。此外，Jade还允许直接在行首书写文本，这些文本会被视为标签的文本内容。 Jade支持变量和数据的传递。我们可以把数据作为locals传递给模板，然后使用`=`符号来输出变量的值。例如： ```jade - var locals = { title: "Express.js Guide", body: "The Comprehensive Book on Express.js" } h1 = title p = body ``` 这将生成： ```html <h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p> ``` 在Jade中，我们还可以使用`#{name}`来插入变量的值，如： ```jade - var title = "Node" p I love #{title} ``` 生成： ```html <p>I love Node</p> ``` 对于HTML元素的属性，Jade提供了简洁的语法。属性写在标签后面，用括号`()`包围，多个属性之间用逗号分隔，例如： ```jade div(id="content", class='main') a(href='http://csdn.net', title='csdn链接') 链接到CSDN ``` 这将生成： ```html <div id="content" class="main"></div> <a href="http://csdn.net" title="csdn链接">链接到CSDN</a> ``` Jade以其简洁的语法和高效的工作流程，为Node.js开发者提供了便利的HTML模板生成方式，使得代码更加整洁，阅读性更强。通过学习和掌握Jade，可以提高开发效率，尤其是对于需要大量生成动态HTML的项目。

资源详情

资源推荐

详解详解Node.js模板引擎模板引擎Jade入门入门

主要介绍了详解Node.js模板引擎Jade入门，Jade是Node.js的一个模板引擎，小编觉得挺不错的，现在分享给

大家，也给大家做个参考。一起跟随小编过来看看吧

Jade是Node.js的一个模板引擎，它借鉴了Haml的很多地方，所以语法上和Haml比较相近。并且，Jade也支持空格。

1、标签、标签

在Jade里，一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意：不需要加“<>”。因为Ｊａ

ｄｅ会帮我们渲染闭合和开始标签。例如：

body

div

h1 Jade是Node.js的一个模板引擎

p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。

div

footer © Pandora

上面的Jade模板最终渲染出的HTML代码是：

<body>

<div>

<h1> Jade是Node.js的一个模板引擎</h1>

<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>

</div>

<div>

<footer>© Pandora</footer>

</div>

</body>

注意：如果没有写标签名，则默认就是div标签。

2、变量、变量/数据数据

传给Jade模板的数据我们称之为locals。使用等号“=”来输出一个变量的值。

（locals）:

{

title: "Express.js Guide",

body: "The Comprehensive Book on Express.js"

}

Jade code :

h1= title

p= body

渲染输出的HTML :

<h1>Express.js Guide</h1>

<p>The Comprehensive Book on Express.js</p>

3、读取变量、读取变量

Jade中读取变量的值是通过#{name}来实现的。例如：

- var title = "Node"

p I love #{title}

在模板被编译时变量的值就会被处理，所以，不要在可执行JavaScript(-)里使用它。

4、属性、属性

属性紧跟在标签之后，且用“（）”括起来，多属性用“，”分隔。例如：body （name1 = “value1”, name2 = “value2”）。

div(id="content", class='main')

a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟

form(action="/login")

button(type="submit", value="提交")

输出：

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38603219

粉丝: 5
资源: 952

Node.js模板引擎Jade快速入门与基本语法解析

Node.js-深入理解Node.js核心思想与源码分析

node.js源码 node-v21.0.0.tar.gz

【JavaScript源代码】node.js安装及HbuilderX配置详解.docx

webstrom怎么配置node.js详解

如何卸载旧版本的node.js安装新的node.js

node.js react ssr

node.js小程序

node.js中包含config.js,broadcast.js,signup.js,p2p.js以及client.js,server.js等代码详解

node.js尚硅谷的强哥

node.js 删除元素

代码node.js中包含config.js,broadcast.js,signup.js,p2p.js以及client.js,server.js等代码详解

nodejs linux模块全局变量,详解Node全局变量global模块

mac安装稳定版的node.js

node.js中多人聊天室代码详解以及怎样跳转

nvm管理不了node

上面的node.get_clock().now().to_msg()是什么格式的时间

从零详解cmake.pdf

node js 异步

rclpy中node.get_clock().now().to_msg()是什么格式的时间

npm windows命令下载

最新资源