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. c#字符显示转换{0:d} string.Format()

    这一篇实际和前几个月写的没什么本质上的区别.但是这篇更明确一点,学起来easy c#字符显示转换{0:d} C#:String.Format数字格式化输出 : int a = 12345678; // ...

  2. 两种js方法发起微信支付：WeixinJSBridge，wx.chooseWXPay区别

    原文链接:https://www.2cto.com/weixin/201507/412752.html 1.为什么会有两种JS方法可以发起微信支付? 当你登陆微信公众号之后,左边有两个菜单栏,一个是微 ...

  3. mybatis <forEach>标签的使用

    MyBatis<forEach>标签的使用 你可以传递一个 List 实例或者数组作为参数对象传给 MyBatis.当你这么做的时候,MyBatis 会自动将它包装在一个 Map 中,用名 ...

  4. 动态调试smali代码

    Android Killer对应用进行反编译为smali代码,看看Manifest文件中application标签里面是否有android:debuggable="true",没有 ...

  5. python开发基础之字符编码、文件处理和函数基础

    字符编码 为什么要有字符编码? 字符编码是为了让计算机能识别我们人写的字符,因为计算机只认识高低电平,也就是二进制数"0","1". 一个文件用什么编码方式存储 ...

  6. hihocoder1014 : Trie树

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...

  7. android:windowBackground 和 Android:background 的区别

    通过问别人,我知道了android:windowBackground 和 Android:background的区别 android:windowBackground 一般用于activity启动的时 ...

  8. miniui IE对省略号即text-overflow:ellipsis显示不一样的问题

    做miniui项目中发现,IE对文本以英文或数字结尾的是英文的省略号,以汉字结尾的就是中文的省略号.只要将字体变为统一宋体即可解决.即 .mini-grid-cell-inner    {       ...

  9. PJSIP-PJMEDIA【使用pjmedia 播放wav格式的音乐】

    应宝哥建议以及更好的交流学习,这篇开始使用中文,英语就先放一放吧! 要使用PJSIP中的PJMEDIA首先我们需要搭建好它所需要的环境. [环境搭建与调试] 1 在 工具 加入pjmedia所需要的包 ...

  10. 《Cracking the Coding Interview》——第1章：数组和字符串——题目5

    2014-03-18 01:40 题目:对字符串进行类似游程编码的压缩,如果压缩完了长度更长,则返回不压缩的结果.比如:aabcccccaaa->a2b1c5a3,abc->abc. 解法 ...