属性

所有的html(5)标签在jade中均支持如下写法。jade中省去了html<>和标签的关闭等写法，并将属性写在括号之中。若存在多个属性，可以将其分为多行。

jade：

a(href='google.com') Google

a(class='button', href='google.com') Google

input(

  type='checkbox'

  name='agreement'

  checked

)

html：

<a href="google.com">Google</a>

<a href="google.com" class="button">Google</a>

<input type="checkbox" name="agreement" checked="checked"/>

对于正常的javascript表达式，jade也可以应付。

jade：

- var authenticated = true

body(class=authenticated ? 'authed' : 'anon')

html：

<body class="authed"></body>

特殊属性

对于某些特殊符号，比如<,>等等，在jade编译生成html后，将会变成&lt;,&gt;，所以对于此类符号采取如下写法。

jade：

div(escaped="<code>")

div(unescaped!="<code>")

html：

<div escaped="&lt;code&gt;"></div>

<div unescaped="<code>"></div>

布尔型属性

某些属性在jade中接受bool值（false的话则在编译后生成的html中无该属性），无初值默认为true。

jade：

input(type='checkbox', checked)

input(type='checkbox', checked=true)

input(type='checkbox', checked=false)

input(type='checkbox', checked=true.toString())

html：

<input type="checkbox" checked="checked"/>

<input type="checkbox" checked="checked"/>

<input type="checkbox"/>

<input type="checkbox" checked="true"/>

style属性

通过JS可以将style属性封装在一个类中，也可以将style属性的值赋为一个字符串。

jade：

a(style={color: 'red', background: 'green'})

html：

<a style="color:red;background:green"></a>

class属性

class属性支持数组赋值。

jade：

//- 预定义数组后赋值

- var classes = ['foo', 'bar', 'baz']

a(class=classes)

//- 无名数组

a(class=['bing', 'bat'])

//- 多个属性值，可以合并，并且不去重

a.baz(class=classes class=['bing', 'bar'])

html：

<a class="foo bar baz"></a>

<a class="bing bat"></a>

<a class="baz foo bar baz bing bar"></a>

class、id

因为class属性和id属性会经常使用到，所以jade允许简化写法。

对于class可以直接.value表示class="value"，对于id可以直接#value表示id="value"。

因为div也会经常用到，jade允许div可以省去。

jade：

a.button

.content

html：

<a class="button"></a>

<div class="content"></div>

&attributes

&attributes（作用？）可以添加一个对象作为属性（可以为对象变量）的一部分。

jade：

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})

- var attributes = {'data-foo': 'bar'};

div#foo(data-bar="foo")&attributes(attributes)

html：

<div id="foo" data-bar="foo" data-foo="bar"></div>

<div id="foo" data-bar="foo" data-foo="bar"></div>

因为使用了&attributes的属性不会自动逃逸，所以为了防止cross-site scripting，请保证用户输入合法。

Jade之属性的更多相关文章

  1. Jade模板引擎(一)之Attributes

    目录: Attributes Boolean Attributes Style Attributes Class Attributes &Attributes Attributes jade中 ...

  2. 令人惊叹的Visual Studio Code插件

    vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件. 代码编辑插件 vscode-color-highlight ------ ...

  3. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

  4. jade属性怎么写

    关于元素和标签,可能傻傻分不清楚,什么是元素,什么是标签,举个例子 比如div是一个块状元素,那么尖括号包起来的是标签,他用来标记这个元素,尖括号里面是元素名,元素是由开始和结束标签组成,用来包含内容 ...

  5. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  6. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  7. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  8. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  9. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

随机推荐

  1. IIS部署WCF

    IIS部署WCF [转载自——http://www.cnblogs.com/starksoft/p/4992059.html] 1 部署IIS 1.1 安装WAS IIS原本是不支持非HTTP协议的服 ...

  2. sql server中的 SET NOCOUNT ON 的含义

    每次我们在使用查询分析器调试SQL语句的时候,通常会看到一些信息,提醒我们当前有多少个行受到了影响,这是些什么信息?在我们调用的时候这些信息有用吗?是否可以关闭呢? 答案是这些信息在我们的客户端的应用 ...

  3. 在.NET中使用EPPlus生成Excel报表 .

    --摘抄自:http://blog.csdn.net/zhoufoxcn/article/details/14112473 在开发.NET应用中可能会遇到需要生成带图表(Chart)的Excel报表的 ...

  4. 黑马程序员_JAVA基础知识总结3

    ------- android培训.java培训.期待与您交流! ---------- Java源文件的扩展名是.java,编译之后生成.class的文件.所有的类都有一个共同的继承祖先Object类 ...

  5. UIUC同学Jia-Bin Huang收集的计算机视觉代码合集

    转自:http://blog.sina.com.cn/s/blog_631a4cc40100wrvz.html   UIUC的Jia-Bin Huang同学收集了很多计算机视觉方面的代码,链接如下: ...

  6. 二模01day1解题报告

    T1.音量调节(changingsounds) 有n个物品的背包(有点不一样,每个物品必须取),给出初始价值,物品价值可正可负(就是两种选择嘛),求可能的最大价值,不可能(<0或>maxs ...

  7. Thinkphp源码分析系列（一）–入口文件

    正如官方文档上所介绍的,thinkphp使用单一入口,所有的请求都从默认的index.php文件进入.当然不是说一定非得从index.php进入,这应该取决于你的服务器配置,一般服务器都会有默认的首页 ...

  8. webService访问加密

    WebService加密,可以对 WebService设置访问用户名和密码,增强 WebService的安全性 使 WebService只能被授权用户使用. 具体实现步骤: 1. 定义一个 soaph ...

  9. CentOS6开启FTP及telnet服务教程

    先来开通CentOS6的FTP服务吧.telnet服务也一并学习学习吧.在安装好CentOS以后,需要设置Ftp和Telnet服务文件,才能启动Ftp和Telnet服务,可以通过远程控制进行开启. 开 ...

  10. IDEA 用了maven后的 智能提示 不出现问题，项目的依赖包没有加载依赖库中的问题。