初学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. windows编辑文本和unix编辑文本的回车符问题

    我们的开发环境一般都使用windows操作系统,而测试环境和线上环境一般使用linux.windows下编辑的shell脚本,上传到windows下会发生错误.出现两种情况: 1.BOM头问题,前面有 ...

  2. Centos下删除文件名乱码文件

    centos下通过rm命令来删除文件,但是如果要删除文件名乱码的文件,就不能直接使用rm命令了,因为压根就无法输出文件名来.不过借助find命令可以实现对其删除.在linux下对于每个文件都一个对应的 ...

  3. 03 - 替换vtkDataObject中的GetProducerPort()方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的一个方法就是GetProducerPort(). 一般,先前使用这个方法如下例子: vtkPolyD ...

  4. 在VC中检测内存泄漏

    声明:checkleaks.h和checkleaks.cpp这两个文件中的代码是在网上COPY的,但原来那个网站现在却找不到了 所以,这篇文章不算完全原创,呵呵. 就当作是一个存档吧 先上代码: // ...

  5. Linux企业级项目实践之网络爬虫（26）——线程池

    一旦有一个抓取请求开始,就创建一个新的线程,由该线程执行任务,任务执行完毕之后,线程就退出.这就是"即时创建,即时销毁"的策略.尽管与创建进程相比,创建线程的时间已经大大的缩短,但 ...

  6. 测试Remoting三种信道Http,Tcp,Ipc和Web Service的访问速度 (转)

    Remoting和Web Service是.net中的重要技术,都可用来实现分布式系统开发,如果是不同的平台就只能选择Web Service,但如果是同一平台,就都可以选择了.到底选择那种,当然还有访 ...

  7. 修改oracle服务器所在linux主机名

    1.修改/etc/hosts 2.修改 /etc/sysconfig/network 3.修改oracle的 listener.ora 4.修改 tnsnames.ora  

  8. BootStrap--模态框中 上传图片

    问题:在模态框中添加图片并不会得到你上传图片的名称,无法存到数据 下面介绍两个方法,都是可以得到图片名称的. 第一种   前面如何加载模态框就不写了,上篇有写,这里只是为得到图片写的 //需要添加一个 ...

  9. effective C++: 5实现

    五.实现 大多数情况下,适当提出拟的类定义以及函数声明,是花费最多心力的两件事.尽管如此,还是有很多东西需要小心:太快定义变量可能造成效率上的拖延:过度使用转型(casts)可能导致代码变慢又难维护, ...

  10. JavaScript 随机数函数

    Math.random()*(m-n)+n random函数语法 Math.random();   random函数返回值 返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 返回10-20 ...