目录:

Attributes

jade中的属性和html中的属性并没有什么太大区别, 值也和js的规则没有什么两样。

1. js表达式

jade:

- var authenticated = true
a(class=authenticated ? 'authed' : 'anon')

html:

<a class="authed"></a>

2. 多属性换行

jade:

input(
type='checkbox'
name='agreement'
checked
)

html:

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

3. 非转义属性(Unescaped Attributes)

默认情况下, 所有属性都是转义过的。这样做是为了安全起见,防止XSS攻击。如果需要使用特殊字符,可以使用"!="替代"="。

jade:

div(escaped="<code>")
div(unescaped="<code>")

html:

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

Boolean Attributes

在jade中, 属性值可以是bool值(true or false), 不设置值则默认是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 Attributes

    style属性可以是一个string也可以是一个object。比如json格式的对象形式。

jade:

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

html:

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

Class Attributes

class属性可以是一个string也可以是一个定义的class的数组对象。

jade:

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

html:

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

同样可以通过使用条件的形式来实现。

jade:

- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About

html:

<a href="/">Home</a>
<a href="/about" class="active">About</a>

&Attributes

    &attributes可以将其两边的属性对象都加入到元素当中。

jade:

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

html

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

注: 在使用&attributes的情况下, 它并没有实现自动转义。所以需要通过一定的手段来确保你的页面不会出现XSS漏洞。

Jade模板引擎(一)之Attributes的更多相关文章

  1. Jade 模板引擎使用

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

  2. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  3. Jade模板引擎使用详解

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

  4. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  5. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  6. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  7. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...

  8. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

  9. 初次入坑jade模板引擎(一)

    最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...

随机推荐

  1. [转]JavaScript程序编码规范

    原文:http://javascript.crockford.com/code.html 作者:Douglas Crockford 译文:http://www.yeeyan.com/articles/ ...

  2. Gym 100917J---dir -C(RMQ--ST)

    题目链接 http://codeforces.com/gym/100917/problem/D problem description Famous Berland coder and IT mana ...

  3. 框架Spring笔记系列 一 基础

    主题:Spring 1.什么样的问题,使得Spring框架应用而生?使用Spring解决了那些问题? 2.

  4. C++/C互相调用

    C调用C++: 在C++程序中使用extern "C"{}来明确要求C++编译器不要对被调用的C++函数进行换名处理, 当然,这会导致函数无法重载 C++调用C: 在C++程序中使 ...

  5. ViewHolder被设计成静态内部类的作用

    当你的内部类不需要依赖于外界的属性或方法等,而又想提供给外界使用,可以采取静态内部类的方式来写 其中static的作用是可以提供给外界调用,比如说类名.内部类这种方式 而ViewHolder的实际是为 ...

  6. Foreach原理

    本质:实现了一个IEnumerable接口, 01.为什么数组和集合可以使用foreach遍历? 解析:因为数组和集合都实现了IEnumerable接口,该接口中只有一个方法,GetEnumerato ...

  7. Python 获取一个对象的名字

    Note: 这里的对象是广义的,一个列表也算 有name的不在讨论之列, 因为可以直接输出 没有name的,可以参考如下代码,使用到的是globals() except_word是用于过滤掉那些不想要 ...

  8. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  9. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  10. Ionic - 先进的 HTML5 移动开发框架和 SDK

    Ionic 是开源的 HTML5 移动开发框架,基于 HTML.JavaScript.CSS 构建漂亮的,跨平台的混合模式 App,能够和 AngularJS 很好的集成.目前最佳支持的平台是 iOS ...