jade语法:

#{xxx}  //嵌入数据

p= xxx  //嵌入数据

p #{xx} //嵌入数据

标签 html    // 翻译为<html></html>

div#test     // <div id="test"></div>

div.bb-dd    // <div class="bb-dd"></div>

div#bb.aa.cc //也可以的,类似emmet的语法

#content

.item

// <div id="content"><div class="item"></div></div>

p 啊噢！ // <p>啊噢！</p>

p

    | foo bar baz

    | rawr rawr

    | go jade go

//输出大段文本内容  <p>foo bar baz rawr.....</p>

输出 #{}转义  p \#{something}   // <p>#{something}</p>

输出 \  使用\\

//不转义执行script

- var html = "<script>console.log('oo'); $(function(){console.log('ye');});</script>"

    | !{html}

//执行js

script

    | console.log('yy');

    | console.log('dd');

或者

script.

        console.log('aa');

        console.log('bb');

        console.log('cc');

        function add(a,b){

            return a+b;

        }

        add(1,3);

//引入css文件

link(rel='stylesheet', href='/stylesheets/style.css')

script(src='/jquery.js')

注释：

//just some paragraphs   单行注释    解释渲染为 <!-- just some paragraphs -->

不输出到最终html文件的注释

//- will not output within markup

//条件输出 注意缩进

- var friends = 10

case friends

    when 0

        p 没有盆友

    when 1

        p 你有1个盆友

    when default

        p 你有#{friends}个盆友

//或者这样

- var arr = 0

case friends

    when 0: p 没有盆友

    when 1: p 你有1个盆友

//元素多个属性

  input(name='user[name]' autofocus='autofocus')

//或者用逗号 input(type="checkbox", checked)

a标签

      a(href='/user/' + user.id)= user.name

或者  a(href='/user/#{user.id}')= user.name

class 属性是一个特殊的属性，你可以直接传递一个数组，比如 bodyClasses = ['user', 'authenticated'] :

body(class=bodyClasses)

文档类型

!!! 5  或者  !!! html  或者   doctype html

执行代码 ,逻辑控制

jade支持三种类型的可执行代码

1. 前缀 -， 这是不会被输出的

- var foo = 'bar';

- for (var key in obj)   //条件或循环

  p= obj[key]

- if (foo)

  ul

    li yay

    li foo

    li worked

- else

  p oh no! didnt work

- if (items.length)

  ul

    - items.forEach(function(item){

      li= item

    - })

2.前缀一个=  返回一个值

- var foo = 'bar'

= foo

h1= foo

// = 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 !=

if, else if, else, until, while, unless 它们是普通的javascript代码

同时 Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 each

循环：

语法  each VAL[, KEY] in OBJ

- var items = ["one", "two", "three"]

each item in items

  li= item

//带上索引

each item, i in items

  li #{item}: #{i}

键值对

- var obj = { foo: 'bar' }

each val, key in obj

  li #{key}: #{val}

- var foo = {one:11,two:22,three:33}

each val,key in foo

    p #{key}

        span #{val}

for user in users

    for role in user.roles

        li= role

条件语句:

for user in users

     if user.role == 'admin'

        p #{user.name} is an admin

      else

        p= user.name

for user in users

      - if (user.role == 'admin')

        p #{user.name} is an admin

      - else

        p= user.name

模板继承：

block xxx 在子模板中实现

子模板中继承时 使用 extends xxx 指定

实现block时默认会替换block 块

也可以使用

block append 或 block prepend 在块的前面或者后面追加

包含 使用 include xxx/xx

比如:

./layout.jade

./includes/

  ./head.jade

  ./tail.jade

此时layout.jade

html

      include includes/head

      body

        h1 My Site

        p Welcome to my super amazing site.

        include includes/foot

或者给定后缀扩展名

html

  head

    //- css and js have simple filters that wrap them in

        <style> and <script> tags, respectively

    include stylesheet.css

html模板引擎jade的使用的更多相关文章

  1. js 模板引擎 jade使用语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...

  2. node.js中的模板引擎jade、handlebars、ejs

    使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...

  3. nodejs学习（二） ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

  4. nodeJs学习-09 模板引擎 jade、ejs

    模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...

  5. 模板引擎Jade详解

    有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与 ...

  6. nodejs 模板引擎jade的使用

    1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...

  7. 模板引擎jade学习

    语言参考 标签列表 doctype Tags Block Expansion Attributes Boolean Attributes Class Attributes Class Literal ...

  8. nodejs 模板引擎jade的简单使用(2)

    1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...

  9. nodejs 模板引擎jade的简单使用

    1.jade html head style script body div ul li li jade1.js var jade=require('jade'); var str=jade.rend ...

随机推荐

  1. 【Effective C++ 读书笔记】条款03： 尽量使用 const

    关键字const多才多艺,变化多端却不高深莫测. const 修饰指针 面对指针, 你可以指出 指针自身.指针所指物.或者两者都不是 const. 如果关键字 const 出现在星号左边,表示被指物是 ...

  2. 小白对异步IO的理解

    前言 看到越来越多的大佬都在使用python的异步IO,协程等概念来实现高效的IO处理过程,可是我对这些概念还不太懂,就学习了一下. 因为是初学者,在理解上有很多不到位的地方,如果有错误,还希望能够有 ...

  3. stdio中牛逼的写法

    用空间换时间的典型 /* * NOTE! This ctype does not handle EOF like the standard C * library is required to. */ ...

  4. POJ：2395-Out of Hay

    Out of Hay Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18780 Accepted: 7414 Descripti ...

  5. TouTiao开源项目 分析笔记8 图解分析数据加载方式

    1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有:   IBaseView<T>==>定义了5个方法. 然后最基础 ...

  6. 1096: [ZJOI2007]仓库建设

    1096: [ZJOI2007]仓库建设 思路 斜率优化. 代码 #include<cstdio> #include<iostream> using namespace std ...

  7. P1336 最佳课题选择

    P1336 最佳课题选择 题目描述 Matrix67要在下个月交给老师n篇论文,论文的内容可以从m个课题中选择.由于课题数有限,Matrix67不得不重复选择一些课题.完成不同课题的论文所花的时间不同 ...

  8. sql中给逗号分隔的查询结果替换单引号

    技术交流群:233513714 第一种方法: SELECT * FROM pay_inf_config a WHERE a.id IN ( SELECT REPLACE ( concat('''', ...

  9. java编程-无锁初始化

    private final Node<K,V>[] initTable() { Node<K,V>[] tab; int sc; while ((tab = table) == ...

  10. 【tmux环境配置】在centos6.4上配置tmux

    我学习tmux的动力如下: (1)tmux大法好.原因是被同学安利过tmux. (2)多个terminal下ssh到开发机太麻烦.还是之前实习的时候,总要开N个terminal去ssh开发机,这种东西 ...