jade 模板使用

npm install jade -g      安装到全局

jade index.jade         导出一个 index.html 压缩后的

jade -P index.jade       导出一个 index.html 没有压缩的

jade -P -w index.jade     -w  对文件实时编译

特殊的div

.container
   p 巧巧
   a(href='http://baidu.com', title='巧莉', data-uid='100')
   input(name='course', type='text', value='jade')
   input(name='type', type='checkbox' checked)

长文本写法
   p
   |
qiaoqiaotongxie
   |
2.bbc

 

插入标签
   p.
      a
qiaoqiaojadjade
      1. aa
      2. bb
      <strong>我就是这么叼</strong>
      3. cc
      4. dd
      5. e
      a qiaoqiaojad

p
      |
 a
      a 我是来插入广告的
      |
 1. aa
      |
 2. bb
      |
 3. cc
      a 我是一个爱捣乱的标签

 

注释和条件注释

单行注释 //

非缓冲注释 //-

块注释

h3 单行注释

// a 巧克力

p 非缓冲注释

//- 你是看不到宝宝我的

h3 块注释
//

   ul

      li

         a 也无风雨也无晴

      li

         a 有花堪折直须折

      li

         a 锦瑟无端五十弦


//-

   ul

      li

         a 也无风雨也无晴

      li

         a 有花堪折直须折

      li

         a 锦瑟无端五十弦
 

IE注释

doctype html

html

   <!--[if IE 7]><html class='ie7'><! [endif]-->

   <!--[if IE 8]><html class='ie8'><! [endif]-->

   <!--[if IE 9]><html class='ie9'><! [endif]-->

   <!--[if !IE]><!--><html><!--<![endif]-->
 
如果用全注释 html标签在结尾处是要闭合的
 
变量
页面内声明变量
- var course = 'jade'
命令行方式变量
jade index.jade -P -w --obj '{"course":"jade course"}'
命令行方式外部文件
jade index.jade -P -w -O index.json
 
// 网站开发中 通常数据都是从后台程序去调用
转义
#{data}
p= data
非转义
!{data}
p!= data
p \!{htmlData}  输出 !{htmlData}
p \#{htmlData}  输出#{htmlData}
 
没有数值的变量
input(value="#{newData}")

input(value=newData)
 
<input value="undefined">

<input>
 
流程
-var qiao = {course: 'jade',study:'巧莉',age:24}
 
for 语法

-for (var k in qiao)

   p= qiao[k]
 
each 语法
-each value, key in qiao

   p #{key}: #{value}
 
each value, key in qiao

   p #{key}: #{value}
 
h3 遍历数组

-var courses = ['node', 'jade', 'express', 'Ejs', 'cheerio', 'bower']

-each value, key in courses

   p #{key}: #{value}
 
嵌套循环
-var sections = [{id:1,items:['a','b']},{id:2,items:['c','d','e','h']}];

dl

   each section in sections.length > 0 ? sections : [{id:0, items: ['none']}]

      dt= section.id

      each item in section.items

         dd= item
 
嵌套循环
while循环

-var n = 0

ul

   while n < 4

      li= n++
 
if else unless 语法

- var show = true

- var lessons = ['jade', 'node'];

if show

   p 显示

   if lessons.length > 2

      p #{lessons.join(', ')}

   else if lessons.length > 1

      p #{lessons.join('/ ')}

   else

      p no lesson

else

   p no show


unless 反向的判断


unless !show

  p #{lessons.length}

unless !lessons.length

   p 逗逼 #{lessons.length}


case 语法

- var name = 'jade'

case name

   when 'java'

   when 'node'

      p Hi node !

   when 'jade': p Hi jade !

   when 'express': p Hi express !

   default

      p Hi #{name}
 
 
mixin的用法
  mixin lesson

     p qiao study jade

  +lesson
  mixin study(name,courses)

     p #{name}

     ul#courses.courses

        each course in courses

           li= course

  +study('巧莉',['jade','node','express','cheerio'])

  +study('苏东坡',['西湖醋鱼', '叫花鸡', '东坡肉'])
 
mixin team(slogon)

   h4 #{slogon}

   if block

      block

   else

      p no team

+team('slogon')

   p Good job!

   p 大逗逼
 
结果
<h4>slogon</h4>

<p>Good job!</p>

<p>大逗逼</p>
 
h2 单个属性值的情况

 mixin attr(name)

    p(class!=attributes.class) #{name}

 +attr('attr')(class='magic')

 // != 此处的class是不需要转义的

h2 多个属性值的情况

 mixin attrs(name)

    p&attributes(attributes) #{name}

 +attrs('attrs')(class='magic2', id='deep')

 h3 参数不定的情况下

 mixin magic(name, ...items)

    ul(class='#{name}')

       each item in items

          li= item

 +magic('qiao','逗逼','搞笑的')
 
 
 

jade模板的更多相关文章

  1. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  2. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  3. 【nodejs】jade模板入门

    使用jetbrians webstom创建空项目 1.创建package.json 引用依赖配置 { "name": "demojade", "des ...

  4. vue 使用Jade模板写html，stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  5. jade模板 注意事项

    1.   jade模板 语法 doctype html html head body header div 2.  添加内容:直接在标签后边加空格 直接写内容 如下: div  我要写的内容 3.  ...

  6. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  7. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  8. jade——创建第一个jade模板

    什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...

  9. Jade模板引擎学习（二）语法：代码、变量、循环、过滤器及mixin

    Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine& ...

随机推荐

  1. bzoj 4503 两个串

    Description 兔子们在玩两个串的游戏.给定两个字符串S和T,兔子们想知道T在S中出现了几次, 分别在哪些位置出现.注意T中可能有“?”字符,这个字符可以匹配任何字符. Input 两行两个字 ...

  2. IOS网络第三天 - 01-网络文件下载（0922略）

    01 数据的安全01 - 密码加密 02 数据的安全02 - 加密过程 01 -数据的安全01 - 本地存储和代码安全 04-网络状态监控 05-真机演示 06-小文件下载 07-大文件下载01-基本 ...

  3. linux内核分析作业：以一简单C程序为例，分析汇编代码理解计算机如何工作

    一.实验 使用gcc –S –o main.s main.c -m32 命令编译成汇编代码,如下代码中的数字请自行修改以防与他人雷同 int g(int x) { return x + 3; } in ...

  4. POJ 1236 Network of Schools（Tarjan缩点）

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16806   Accepted: 66 ...

  5. PHP 检测变量是否为空

    PHP 中以下值得计算结果为 false: 关键字 boolean false 整型 integer 0 浮点型 double 0.0 字符串 string ""  字符串 str ...

  6. VS2015编译Qt5.7.0生成支持XP的静态库（很不错）

    一.编译工具 1.VS2015 编译Qt5.7.0的所需VS版本:Visual Studio 2013 (Update1)或Visual Studio 2015 (Update2).因为Update补 ...

  7. 【转】24Cxx 系列EEPROM通用程序及应用

    关于I2C 学习的时候介绍得最多的就是24C02 这里存储EEPROM了,但学的时候基本只是讲讲简单的I2C 的总线数据传输而已,即使先gooogle上搜索也绝大部分这这样的文章,很少有说到如何在实际 ...

  8. Selenium2学习-041-chromedriver：org.openqa.selenium.WebDriverException: unknown error: cannot determine loading status from unexpected alert open

    今天在写WebDriver处理弹出框(alert.confirm.prompt)演示实例脚本分发给朋友时,在其执行时未能成功执行,对应的部分错误详情如下: org.openqa.selenium.We ...

  9. kafka windows环境搭建 测试

    http://www.cnblogs.com/alvingofast/p/kafka_deployment_on_windows.html 照着例子搭建成功

  10. JMeter学习（三十五）使用jmeter来发送json/gzip格式数据

    一.使用jmeter来发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量.  当然, 服务器返 ...