初学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学习笔记的更多相关文章

  1. jade 学习笔记 - gulp 自动编译

    实时监控   jade -P -w .\test1.jade sublime 分栏,可以看到实时修改情况     1. 元素写法 doctype html <!--[if IE8]>< ...

  2. pug(jade) 学习笔记

    from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...

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

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

  4. Nodejs学习笔记(三)——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  5. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  6. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  7. Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  8. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. 路由器WDS桥接教程

    因为有吧友买了此款路由又不会桥接,因此做这个教程.老鸟自动路过,废话不多说,下面开始讲解. 1.wifi密码破解和路由器用户名和密码部分请自行解决,我只讲桥接部分.首先,在浏览器里输入192.168. ...

  2. d3可视化实战02:理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

  3. Baidu Map Web API 案例

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. v8 源码获取与build

    最近准备在工作之余研究下v8,下班时间鼓捣了2天,现在终于能下载,能gclient sync了. 刚开始的目的就是跑一个hello world,按照wiki上的例子来: https://github. ...

  5. Delphi:窗体自适应屏幕分辨率(根据预设值的比例改变)

    delphi 程序适应屏幕分辨率,先在表单单元的Interface部分定义两个常量, 表示设计时的屏幕的宽度和高度(以像素为单位). 在表单的Create事件中先判断 当前分辨率是否与设计分辨率相同, ...

  6. Linux下如何发布Qt程序

    在X11平台下qt程序,首先准备好程序中需要使用的资源,库和插件...    比如你的可运行程序取名叫作panel,那把你的panel,那些libQt*.so.4和libQt*.so.4.6.0(链接 ...

  7. oracle11g rac asm 实例内存修改

    ASM实例内存修改 memory_max_target(它为静态参数,修改完成后需要重启实例) memory_target(它为动态参数,不需要重启实例) SQL> select name,is ...

  8. Qt入门(1)——初识Qt

    Qt是一个跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特殊的代码生成扩展(称为元对象编译器(Meta ...

  9. 【转】你应该知道的 10 个 VirtualBox 技巧与高级特性

    原文网址:http://www.oschina.net/translate/10-virtualbox-tricks-and-advanced-features-you-should-know-abo ...

  10. linux patch

    作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成 员.项 ...