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的开发者 ...
随机推荐
- web安全：click jacking
点击劫持 click jacking通过iframe加载被攻击网站到黑客自己维护的网站通过z-index叠加和position定位,将2个网站的信息堆叠在一个立体投影面上,通过opacity设置透明 ...
- 为ownCloud配置SSL连接
为ownCloud配置SSL连接 在你开始使用ownCloud之前,强烈建议你在ownCloud中启用SSL支持.使用SSL可以提供重要的安全好处,比如加密ownCloud流量并提供适当的验证.在本教 ...
- Android 解决listview中checkBox错位选择
假如ListView,分成2页(或者设置数据可以纵向拉,可隐藏),每页3条数据,每个Listview的Item 里面有个checkBox,现在,当我选择第一页的前两天数据,翻到第二页,竟然第二页后两条 ...
- iOS开发手记 - iOS9.3 UINavigationController添加后不显示storyboard中viewcontroller里的控件的解决方法
我原先是这么做的,通常也是这么做 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSD ...
- City Tour
Description Alice想要从城市A出发到城市B,由于Alice最近比较穷(不像集训队陈兴老师是个rich second),所以只能选择做火车从A到B.不过Alice很讨厌坐火车,火车上人比 ...
- HDOJ(HDU) 1491 Octorber 21st
Problem Description HDU's 50th birthday, on Octorber 21st, is coming. What an exciting day!! As a st ...
- linux应用程序地址布局
Linux应用程序在内存中的布局,由高地址到低地址依次为:栈.堆.BSS段.数据段.代码段.代码段的起始地址固定为0x8048000,无论哪一个应用程序它的代码段起始地址一定是0x8048000,这里 ...
- Java & Android Interviews #1
1.GC是什么? 为什么要有GC?GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃,Java提供 ...
- HDU_2041——走楼梯,递推
Problem Description 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? Input 输入数据首先包含一个整数N,表示测试实例的个数,然 ...
- 查看MySQL数据库的默认编码
查看MySQL数据库的默认编码 1.使用status命令能够显示数据库的相关系信息,示例如下: mysql> status;————–mysql Ver 14.12 Distrib 5.0.77 ...