属性

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

jade：

  1. a(href='google.com') Google
  2. a(class='button', href='google.com') Google
  4. input(
  5.   type='checkbox'
  6.   name='agreement'
  7.   checked
  8. )

html：

  1. <a href="google.com">Google</a>
  2. <a href="google.com" class="button">Google</a>
  4. <input type="checkbox" name="agreement" checked="checked"/>

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

jade：

  1. - var authenticated = true
  2. body(class=authenticated ? 'authed' : 'anon')

html：

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

特殊属性

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

jade：

  1. div(escaped="<code>")
  2. div(unescaped!="<code>")

html：

  1. <div escaped="&lt;code&gt;"></div>
  2. <div unescaped="<code>"></div>

布尔型属性

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

jade：

  1. input(type='checkbox', checked)
  2. input(type='checkbox', checked=true)
  3. input(type='checkbox', checked=false)
  4. input(type='checkbox', checked=true.toString())

html：

  1. <input type="checkbox" checked="checked"/>
  2. <input type="checkbox" checked="checked"/>
  3. <input type="checkbox"/>
  4. <input type="checkbox" checked="true"/>

style属性

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

jade：

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

html：

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

class属性

class属性支持数组赋值。

jade：

  1. //- 预定义数组后赋值
  2. - var classes = ['foo', 'bar', 'baz']
  3. a(class=classes)
  5. //- 无名数组
  6. a(class=['bing', 'bat'])
  8. //- 多个属性值，可以合并，并且不去重
  9. a.baz(class=classes class=['bing', 'bar'])

html：

  1. <a class="foo bar baz"></a>
  3. <a class="bing bat"></a>
  5. <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：

  1. a.button
  3. .content

html：

  1. <a class="button"></a>
  3. <div class="content"></div>

&attributes

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

jade：

  1. div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
  3. - var attributes = {'data-foo': 'bar'};
  4. div#foo(data-bar="foo")&attributes(attributes)

html：

  1. <div id="foo" data-bar="foo" data-foo="bar"></div>
  3. <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. Blackfin DSP(七)：用SPORT口模拟SPI

    1.问题的提出 当系统从SPI device启动时,若SCLK = 133M,则SPI的最大速度为33M.然而,有一些串行的flash设备能更快的运行,因此,如果我们使用SPORT口,它的最大速度为S ...

  2. Sublime Text对Python代码加注释的快捷键

    一直在Coursera上补基础课,发现很多课程都用Python作为教学语言,学了一下感觉果然好,简直是用英语在写代码.(我建Python目录的时候发现去年学过一点点Python,居然一点都不记得了= ...

  3. Python复习笔记-字典和文件操作

    抽时间回顾2年前自己做过的python工具,突然感觉不像自己写的,看来好久没用过python的字典和文件操作了,查询资料和网页,整理如下: 一.字典 键值对的集合(map) 字典是以大括号“{}”包围 ...

  4. oracle创建包后执行报错：object omgmig.test_package is invalid.

    今天学习了一下oracle的包的写法,然后碰到这么个问题.包声明和包主体都正确,但是就是执行报错:object omgmig.test_package is invalid. 这是会报错的sql,看起 ...

  5. PDF表单域(FormField)在HTML显示与提交数据到服务器

    1.Adobe Arobat Pro等可以编辑表单域,只有几种控件: 2.展示PDF,可用PdfObject.js,Chrome自带? @{ViewBag.Title = @ViewBag.aaa;} ...

  6. 使用get传参的时候，参数在后头获取不到或者出现别的错误。

    把传递的参数使用encode转换一下,符合HTTP规定的编码,再使用. String encode = java.net.URLEncoder.encode("VSrYJoDat8z7Ad9 ...

  7. 在SWING里嵌入SWT的组件

    http://zhanghan3366.blog.163.com/blog/static/6966305220110505351568/ ——————————————————————————————— ...

  8. Linux_03------Linux的基本命令

    /** * 基本命令格式 * 命令 [选项] [参数] */ /** * 目录处理命令 * mkdir dirname 创建目录 * mkdir -p dir1/dir 递归创建目录 * cd dir ...

  9. proc文件系统在内核中的表现

    当Linux内核启动起来之后,我们可以通过proc虚拟文件系统来查看内的中的一些动态信息. 例如:可以 cat  /proc/misc  来查看系统中装载的所有misc类设备 cat  /proc/d ...

  10. hdu 3667 拆边加最小费用流

    Transportation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...