首页 > 代码库 > Jade学习笔记
Jade学习笔记
初学nodejs，折腾过用handlebars做模板，后来隔了一段重新学习，用了jade，真心简洁……记录一些学习笔记，以备复习。
jade是基于缩进的，所以tab与space不能混用；
属性的设置：link(rel=‘stylesheet‘, href=http://www.mamicode.com/‘/stylesheets/style.css‘);
变量的定义：- var users = ["Sally","Joseph","Sam","Mike"] 不要var也可以；
内容赋值：p= user 或 p ${user} 前者常用于内容就是变量，后者常用于拼接‘Hello ‘ + ${user} , p Hello World 则是后者直接为内容；
条件语句：
//case语句- num = 10case num when 0 p you have no friends when 1 : p you have friends default p you have #{num} friends//if语句- options = { description : ‘reference conditionals‘ }- flag = false#user if options.description h2 Description p.description= options.description else if flag h2 Description p.description. User has no description, why not add one... else h1 Description p.description User has no description.- opts = { flag : false }#sum// ! 与 unless 同理 if !opts.flag h2 Hello! p= options.description unless opts.flag h2 World! p= options.description
循环语句：
- for (var i=0;i<3;i++) li shit- var users = ["Sally","Joseph","Sam","Mike"];- each user in users p= user- addrs = [‘BeiJing‘,‘GuangZhou‘,‘DongGuan‘]- for addr in addrs p #{addr}- names = {xing:‘ye‘,ming:‘renming‘};- each val,key in names li #{key} : #{val}
多行输出：
p | You are sleeping. | No I just have a rest.p. Second function. Just for testing. script. console.log(‘Hello world‘); console.log(‘Hello life‘);script |console.log(‘Hello world‘); |console.log(‘Hello life‘);
注释：
// 注释块 ‘//-‘是服务器端注释
转义 与 非转义 ：
//- 默认和!=是不转义，不安全（标签直接执行）； = 则会转义 安全（标签转字符串）p What‘s up <escaped> 1p= ‘What s‘ + ‘ up <escaped> 2‘p = ‘What s up <escaped> 3‘p!= ‘What s‘ + ‘ up <escaped> 4‘p != ‘What s up <escaped> 5‘
IE条件注释：
<!--[if IE 8]> p This is IE 8<![endif]-->
extends ：
//- layout.jadedoctype htmlhtml head block title title Default title body block content//- index.jadeextends ./layout.jadeblock title title Article Titleblock content h1 My Article<!doctype html><html> <head> <title>Article Title</title> </head> <body> <h1>My Article</h1> </body></html>
filters ：
filters是编译时候运行，所以不能使用动态内容，在服务器端编译。（需要先安装markdown模块）
:markdown # Markdown I often like including markdown documents.script :coffee console.log ‘This is coffee script‘<h1>Markdown</h1><p>I often like including markdown documents.</p><script>console.log(‘This is coffee script‘)</script>include :
include ./includes/foot.jade include:markdown article.md//可以是js css等文件 也可以是Filtered Text
Mixins : 创建可重复使用的jade块
mixin article(title) .article .article-wrapper h1= title if block //block关键字，就是块 block else p No content provide+article(‘Hello world‘)+article(‘Hello DongGuang‘) p This is my p Hometown
mixin link(href, name) //- attributes == {class: "btn"} a(class!=attributes.class, href=http://www.mamicode.com/href)= name+link(‘/foo‘, ‘foo‘)(class="btn")
直接输出文本： 前面加 | 例如：|Plian text can include <strong>html<strong> 否则会把Plian当做标签<Plian></Plian>
子集标签除了缩进，还支持a: span: em 这种写法，冒号后面必须加空格。
Jade学习笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。