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. libvirt笔记（未完待续）

    参考源地址:http://libvirt.org/formatdomain.html http://blog.csdn.net/qq250941970/article/details/6022094 ...

  2. JDK学习---深入理解java中的String

    本文参考资料: 1.<深入理解jvm虚拟机> 2.<大话数据结构>.<大话设计模式> 3.http://www.cnblogs.com/ITtangtang/p/3 ...

  3. python scrapy 实战简书网站保存数据到mysql

    1:创建项目 2:创建爬虫 3:编写start.py文件用于运行爬虫程序 # -*- coding:utf-8 -*- #作者: baikai #创建时间: 2018/12/14 14:09 #文件: ...

  4. Pandas 基本技巧

    1.数据查看和转置 import numpy as np import pandas as pd # 导入numpy.pandas模块 # 数据查看.转置 df = pd.DataFrame(np.r ...

  5. 3 web框架

    web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站.网络应用和网络服务的开发.这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法. ...

  6. 2，Flask 中的 Render Redirect HttpResponse

    一,Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 二,.Flask中的Redirect 每当访问"/redi" ...

  7. laravel5.5开发composer扩展包

    目录 1. 下载laravel框架,并命名(framework) 2. 创建相关目录 3. 项目根目录下的composer.json文件中声明命名空间 4. 在包的根目录(packages/arche ...

  8. centos7.3配置guacamole

    目录 1 安装guacamole所需要的依赖库 2 安装配置tomcat,架设服务 2.1 下载tomcat 2.2 配置环境变量,使tomcat可以找到guacamole客户端配置 2.3 安装gu ...

  9. 手把手教你如何逐步安装OpenStack

    [TechTarget中国原创] 尽管OpenStack官方提供的在线安装教程和分步向导能够为管理员提供很大帮助,但是依然存在很多不尽如人意的地方.因此在Ubuntu上安装OpenStack的过程当中 ...

  10. 剑指Offer - 九度1504 - 把数组排成最小的数

    剑指Offer - 九度1504 - 把数组排成最小的数2014-02-06 00:19 题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输 ...