首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:22:33
字体:
来源:转载
供稿:网友

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

1、标签

在Jade里,一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意:不需要加“<>”。因为Jade会帮我们渲染闭合和开始标签。例如:

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= titlep= 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="提交")

输出:

<div id="content" class='main'>  <a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a>  <form action="/login">    <button type="submit" value="提交">  </form></div>

动态属性:

动态属性即属性的值是动态的,即用一个变量来表示属性的值。符号“|”可以在新的一行里写HTML节点内容。例如:

a(href=url, data-active=isActive)label  input(type="checkbox", checked=isChecked)  | yes / no

提供给上面模板的数据:

{  url: "/logout",  isActive: true,  isChecked: false}

最终渲染后输出的HTML:

<a href="" data-active=" rel="external nofollow" data-active"></a><label>  <input type="checkbox" />yes / no</label>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选