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. Tomcat+jdk 环境处理 java jsp代码编写web环境的容器

    Tomcat是由 Apache 软件基金会下属的 Jakarta 项目开发的一个Servlet 容器,按照 SunMicrosystems 提供的技术规范,实现了对 Servlet 和 JavaSer ...

  2. thinkphp centos7 报class POD not found

    没有安装PDO yum install php70w-pdo yum install php70w-mysqlnd 两条命令搞定

  3. PHP开发环境搭建一：PHP集成环境XAMPP 的安装与配置

    1. XMAPP简介 XAMPP(Apache+MySQL/MariaDB+PHP+Perl)开头的X代表X-OS,代表可以在任何常见操作系统下使用,包括Windows.Mac.Linux,开源平台. ...

  4. PHP 微信公众号之客服完整讲解

    //获取access_token private static function get_access_token($app_id) { $getAuthorizerInfo = wx_auth::g ...

  5. 最短路径之迪杰斯特拉算法（Java）

    1)Dijkstra算法适用于求图中两节点之间最短路径 2)Dijkstra算法设计比较巧妙的是:在求源节点到终结点自底向上的过程中,源节点到某一节点之间最短路径的确定上(这也是我之前苦于没有解决的地 ...

  6. sed命令例子详解

    sed -e '/Patricia/h' -e '/Margot/x' datafile 包含Margot的行将被包含Patricia的行替换: sed -e /WE/{h;d;}' -e '/CT/ ...

  7. 原理剖析-Netty之服务端启动工作原理分析(下)

    一.大致介绍 1.由于篇幅过长难以发布,所以本章节接着上一节来的,上一章节为[原理剖析(第 010 篇)Netty之服务端启动工作原理分析(上)]: 2.那么本章节就继续分析Netty的服务端启动,分 ...

  8. 2 http协议

    http协议简介: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于万维网(WWW:World Wide Web )服务器与本地浏览器之间传输超文 ...

  9. struts2官方 中文教程 系列五：处理表单

    先贴个本帖的地址,免得其它网站被爬去了struts2教程 官方系列五:处理表单  即 http://www.cnblogs.com/linghaoxinpian/p/6906298.html 下载本章 ...

  10. BZOJ 2907: 拜访神犇

    设最优策略为第一步向左走 那么肯定是走到最左边最优 需要补一些步数 一种是最右边的连着选,多出一倍代价 一种是不连着选,多出两倍代价 #include<cstdio> #include&l ...