Jade模板引擎(一)之Attributes
目录:
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="<code>"></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的更多相关文章
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- jade模板引擎
最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
- 初次入坑jade模板引擎(一)
最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...
随机推荐
- [转]JavaScript程序编码规范
原文:http://javascript.crockford.com/code.html 作者:Douglas Crockford 译文:http://www.yeeyan.com/articles/ ...
- Gym 100917J---dir -C(RMQ--ST)
题目链接 http://codeforces.com/gym/100917/problem/D problem description Famous Berland coder and IT mana ...
- 框架Spring笔记系列 一 基础
主题:Spring 1.什么样的问题,使得Spring框架应用而生?使用Spring解决了那些问题? 2.
- C++/C互相调用
C调用C++: 在C++程序中使用extern "C"{}来明确要求C++编译器不要对被调用的C++函数进行换名处理, 当然,这会导致函数无法重载 C++调用C: 在C++程序中使 ...
- ViewHolder被设计成静态内部类的作用
当你的内部类不需要依赖于外界的属性或方法等,而又想提供给外界使用,可以采取静态内部类的方式来写 其中static的作用是可以提供给外界调用,比如说类名.内部类这种方式 而ViewHolder的实际是为 ...
- Foreach原理
本质:实现了一个IEnumerable接口, 01.为什么数组和集合可以使用foreach遍历? 解析:因为数组和集合都实现了IEnumerable接口,该接口中只有一个方法,GetEnumerato ...
- Python 获取一个对象的名字
Note: 这里的对象是广义的,一个列表也算 有name的不在讨论之列, 因为可以直接输出 没有name的,可以参考如下代码,使用到的是globals() except_word是用于过滤掉那些不想要 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- Ionic - 先进的 HTML5 移动开发框架和 SDK
Ionic 是开源的 HTML5 移动开发框架,基于 HTML.JavaScript.CSS 构建漂亮的,跨平台的混合模式 App,能够和 AngularJS 很好的集成.目前最佳支持的平台是 iOS ...