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. 连接mysql 报错 Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    网上找不到  朋友说是因为非正常关机导致,mysql.server start 运行报错 ERROR! The server quit without updating PID file(): 解决办 ...

  2. 第一次认识lambda匿名函数

    lambda 为了解决一些简单的需求而设计的"一句话"函数 语法 lambda 参数:返回值 1.可以多个参数,参数间用逗号隔开 2.匿名函数不管多复杂,只能写一行 3.返回值和正 ...

  3. 关于PHPExcel 基础使用方法

    $dir=dirname(__FILE__);//找到当前脚本所在路径require_once $dir.'/PHPExcel/PHPExcel.php';$objPHPExcel=new PHPEx ...

  4. spring源码学习中的知识点

    一.循环依赖 循环依赖就是循环引用,就是两个或多个bean之间互相持有对方. 1.构造器循环依赖 表示通过构造器注入造成的循环依赖,此依赖是无法解决的,只能抛出BeanCurrentlyInCreat ...

  5. bitset学习

    bitset是个好东西.嗯.贼sao~ 很早就讲过但是我并没有弄懂.(现在也不敢说明白) 首先bitset是有常数的,而且常数并不能忽略不计——$(\frac{1}{32})$ 目前我也只是会bits ...

  6. getprop 与 dumpsys 命令

    Android 设备连接 PC 后,我们可以通过 adb 命令完成绝大多数工作.下面借助 getprop.dumpsys 来了解一些系统相关信息. 一.getprop 此命令的原理很简单,就是从系统的 ...

  7. android onCreate的两个方法

    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) { } override ...

  8. Field 'flag' doesn't have a default value错误

    错误代码: java.sql.SQLException: Field 'flag' doesn't have a default value at com.mysql.jdbc.SQLError.cr ...

  9. (A)eclipse搭建springboot项目入门

    网上许多资料都是用idea的,但是我个人用eclipse习惯了,所以就在eclipse里面自己尝试着写了一个hello. 然而项目建好后却迟迟不能访问!!!网上搜了许多资料都不靠谱! 虽然最后能看到h ...

  10. libmt.so: undefined reference to `av_find_stream_info@LIBAVFORMAT_53'

    [root@localhost instance]# make gcc -O3 -g -I/usr/include/ -I/usr/include/glib- -fexceptions -fstack ...