Jade语法

一、代码

不会被缓冲代码

  1. ul
  2. - for(var i=0; i<; i++)
  3. li Jade Engine

会转换为:

  1. <ul>
  2. <li>Jade Engine</li>
  3. <li>Jade Engine</li>
  4. <li>Jade Engine</li>
  5. </ul>

被缓冲代码

  1. p= 'Hello Jade'

会转换为:

  1. <p>Hello Jade</p>

注意: =默认会转义内容

  1. p= 'Welcome to wandoujia fe, we want <b>you</b>'

会转换为:

  1. <p>Welcome to wandoujia fe, we want &lt;b&gt;you&lt;/b&gt;</p>

如果不想被转义的,在=前面添加!

  1. p!= 'Welcome to wandoujia fe, we want <b>you</b>'

会转换为:

  1. <p>Welcome to wandoujia fe, we want <b>you</b></p>

二、使用变量

  1. - var name = 'Jade'
  2. p my name is #{name}

会转换为:

  1. <p>my name is Jade</p>

如果要输出 #{},那就得使用/来转义

  1. - var name = 'yaochun'
  2. p my name is \#{name}

会转换为:

  1. <p>my name is #{name}</p>

变量中的特殊字符会被转义,如:

  1. - var name = '<script></script>'
  2. | #{name}

会转换为:

  1. &lt;script&gt;&lt;/script&gt;

如要得到不转义的,用!替换#来调用

  1. - var name = '<script></script>'
  2. | !{name}

会转换为:

  1. <script></script>

| 其实就是管道,一般也可以定义一段文本

三、循环

语法结构:

  1. each VAL[,KEY] in OBJ
  • VAL是值
  • KEY是键,可选
  • OBJ是对象,array or object

数组实例

  1. - var jobs = ["fe", "wandoujia", "beijing", "We want you"]
  2. each job in jobs
  3. li= job

会转换为:

  1. <li>fe</li>
  2. <li>wandoujia</li>
  3. <li>beijing</li>
  4. <li>We want you</li>

对象实例

  1. - var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
  2. each val,key in jobs
  3. li #{key} : #{val}

会转换为:

  1. <li>catagory : fe</li>
  2. <li>company : wandoujia</li>
  3. <li>local : beijing</li>

四、Case

case主要的作用和js里面的switch一样

方式一 本文推荐的方式

  1. - var apples = 1
  2. case apples
  3. when 0
  4. p you have no apples
  5. when 1
  6. p you have an apple
  7. default
  8. p you have #{apples} apples

会转换为:

  1. <p>you have an apple</p>

方式二

  1. - var apples = 1
  2. case apples
  3. when 0: p you have no apples
  4. when 1: p you have an apple
  5. default: p you have #{apples} apples

方式三

有些时候,确实有需求合并一些when的情况

  1. - var apples = 1
  2. case apples
  3. when 0
  4. when 1
  5. p you have few apples
  6. default
  7. p you have #{apples} apples

当apples这个值为0或者1的时候会转换为:

  1. <p>you have few apples</p>

五、过滤器

支持markdown

注意:必须是已经安装 markdown-js 或者 node-discount

  1. :markdown
  2. 我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com

会转换为:

  1. <p>我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com</p>

六、Mixins

无参数的mixin

  1. mixin join
  2. ul
  3. li 我们需要一帮人
  4. li 喜欢前端
  5. li 了解前端
  6. li 愿意在前端不断学习奋斗的
  7. li 你是吗?
  8. li 快来加入我们把
  9.  
  10. +join()

会转换为:

  1. <ul>
  2. <li>我们需要一帮人</li>
  3. <li>喜欢前端</li>
  4. <li>了解前端</li>
  5. <li>愿意在前端不断学习奋斗的</li>
  6. <li>你是吗?</li>
  7. <li>快来加入我们把</li>
  8. </ul>

有参数的mixin

  1. mixin join(company)
  2. ul
  3. li 我们 #{company} 需要一帮人
  4. li 喜欢前端
  5. li 了解前端
  6. li 愿意在前端不断学习奋斗的
  7. li 你是吗?
  8. li 快来加入我们 #{company} 把
  9.  
  10. +join('wandoujia')

会转换为:

  1. <ul>
  2. <li>我们 wandoujia 需要一帮人</li>
  3. <li>喜欢前端</li>
  4. <li>了解前端</li>
  5. <li>愿意在前端不断学习奋斗的</li>
  6. <li>你是吗?</li>
  7. <li>快来加入我们 wandoujia 把</li>
  8. </ul>

minxin中支持block

  1. mixin join(company)
  2. ul
  3. li 我们需要一帮人
  4. li 喜欢前端
  5. li 了解前端
  6. li 愿意在前端不断学习奋斗的
  7. if block
  8. block
  9. else
  10. li 你是吗?
  11. li 快来加入我们把
  12.  
  13. +join('wandoujia')
  14. li 我们这有神马?
  15. li 我们这个有一帮能折腾的老师阿姨
  16. li 我们这有美丽的阿姨
  17. li 我们每周都有技术交流
  18. li 我们这可以用很多开源的新技术

会转换为:

  1. <ul>
  2. <li>我们需要一帮人</li>
  3. <li>喜欢前端</li>
  4. <li>了解前端</li>
  5. <li>愿意在前端不断学习奋斗的</li>
  6. <li>我们这有神马?</li>
  7. <li>我们这个有一帮能折腾的老师阿姨</li>
  8. <li>我们这有美丽的阿姨</li>
  9. <li>我们每周都有技术交流</li>
  10. <li>我们这可以用很多开源的新技术</li>
  11. </ul>

minxin中还支持attributes

  1. mixin link(href, name)
  2. a(class!=attributes.class, title!=attributes.title, href=href)= name
  3.  
  4. +link('http://wandoujia.com/join', '豌豆荚前端招聘')(class="btn", title="招聘啦,小伙伴快来点")

会转换为:

  1. <a title="招聘啦,小伙伴快来点" href="http://wandoujia.com/join" class="btn">豌豆荚前端招聘</a>

七、包含

有点类似freemaker,通过include来载入一些jade模板

转自:http://www.w3cplus.com/html/jade.html

Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin的更多相关文章

  1. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

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

  2. Jade模板引擎学习(一)安装及基本语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认 ...

  3. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  4. Jade 模板引擎使用

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

  5. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  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. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  9. NVelocity模板引擎学习笔记

    NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结

随机推荐

  1. gossip版本raft算法实现

    raft算法的实现概述 节点的启动和加入: 1. 第一个节点启动,发现没有其他的member节点,则自己变成master 2. 第二个节点启动并加入第一个节点,发现有member节点,并且master ...

  2. nodejs笔记--模块篇(三)

    文件模块访问方式通过require('/文件名.后缀')    require('./文件名.后缀')    requrie('../文件名.后缀') 去访问,文件后缀可以省略:以"/&qu ...

  3. Agri-Net(最小生成树)

    Description Farmer John has been elected mayor of his town! One of his campaign promises was to brin ...

  4. Java学习个人备忘录之数组

    数组 概念:同一种类型数据的集合,其实数组就是一个容器. 数组的好处:可以自动给数组中的元素从0开始编号,方便操作这些元素. 格式1:元素类型[] 数组名 = new 元素类型[元素个数]; 格式2: ...

  5. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  6. IIS7,IIS7.5 URL重写模块工具

    URL 重写模块 2.0 提供基于规则的重写机制,可在 Web 服务器处理请求的 URL 之前对其进行更改,以及在向 HTTP 客户端提供响应内容之前修改响应内容. 注意:使用环境为IIS7.0(x6 ...

  7. IntelliJ IDEA Maven引入

  8. 【Linux】- 不可不知的小技巧

    1.Tab键:输入文件或目录名的前几个字符,然后按TAB键,如无相重的,完整的文件名立即自动在命令行出现:如有相重的,再按一下TAB键,系统会列出当前目录下所有以这几个字符开头的名字. 在命令行下,只 ...

  9. 苹果IOS、安卓推送功能开发

    IOS推送开发:以下是基于开源javapns推送开发1.DerInputStream.getLength(): lengthTag=111, too big.先排除是否由于打包时证书 .p12 文件被 ...

  10. [C/C++] 原码、反码、补码问题

    正确答案:D 解析: C语言中变量以补码形式存放在内存中,正数的补码与原码相同,负数求补码方式为(符号位不变,其余各位取反,最后末尾加1): 32位机器:int 32位,short 16位.  x = ...