Jade学习笔记
初学nodejs，折腾过用handlebars做模板，后来隔了一段重新学习，用了jade，真心简洁……记录一些学习笔记，以备复习。
jade是基于缩进的，所以tab与space不能混用；
属性的设置：link(rel='stylesheet', href='/stylesheets/style.css');
变量的定义：- var users = ["Sally","Joseph","Sam","Mike"] 不要var也可以；
内容赋值：p= user 或 p ${user} 前者常用于内容就是变量，后者常用于拼接'Hello ' + ${user} , p Hello World 则是后者直接为内容；
条件语句：
//case语句
- num = 10
case 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> 1
p= '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.jade
doctype html
html
head
block title
title Default title
body
block content
//- index.jade
extends ./layout.jade block title
title Article Title block 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=href)= name +link('/foo', 'foo')(class="btn")
直接输出文本： 前面加 | 例如：|Plian text can include <strong>html<strong> 否则会把Plian当做标签<Plian></Plian>
子集标签除了缩进，还支持a: span: em 这种写法，冒号后面必须加空格。
Jade学习笔记的更多相关文章
- jade 学习笔记 - gulp 自动编译
实时监控 jade -P -w .\test1.jade sublime 分栏,可以看到实时修改情况 1. 元素写法 doctype html <!--[if IE8]>< ...
- pug(jade) 学习笔记
from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...
- jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Nodejs学习笔记（三）——一张图看懂Nodejs建站
前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...
- Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- VueJs 学习笔记
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- 路由器WDS桥接教程
因为有吧友买了此款路由又不会桥接,因此做这个教程.老鸟自动路过,废话不多说,下面开始讲解. 1.wifi密码破解和路由器用户名和密码部分请自行解决,我只讲桥接部分.首先,在浏览器里输入192.168. ...
- d3可视化实战02：理解d3数据驱动的真正含义
前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...
- Baidu Map Web API 案例
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- v8 源码获取与build
最近准备在工作之余研究下v8,下班时间鼓捣了2天,现在终于能下载,能gclient sync了. 刚开始的目的就是跑一个hello world,按照wiki上的例子来: https://github. ...
- Delphi：窗体自适应屏幕分辨率（根据预设值的比例改变）
delphi 程序适应屏幕分辨率,先在表单单元的Interface部分定义两个常量, 表示设计时的屏幕的宽度和高度(以像素为单位). 在表单的Create事件中先判断 当前分辨率是否与设计分辨率相同, ...
- Linux下如何发布Qt程序
在X11平台下qt程序,首先准备好程序中需要使用的资源,库和插件... 比如你的可运行程序取名叫作panel,那把你的panel,那些libQt*.so.4和libQt*.so.4.6.0(链接 ...
- oracle11g rac asm 实例内存修改
ASM实例内存修改 memory_max_target(它为静态参数,修改完成后需要重启实例) memory_target(它为动态参数,不需要重启实例) SQL> select name,is ...
- Qt入门（1）——初识Qt
Qt是一个跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特殊的代码生成扩展(称为元对象编译器(Meta ...
- 【转】你应该知道的 10 个 VirtualBox 技巧与高级特性
原文网址:http://www.oschina.net/translate/10-virtualbox-tricks-and-advanced-features-you-should-know-abo ...
- linux patch
作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成 员.项 ...