Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin
Jade语法
一、代码
不会被缓冲代码
- ul
- - for(var i=0; i<; i++)
- li Jade Engine
会转换为:
- <ul>
- <li>Jade Engine</li>
- <li>Jade Engine</li>
- <li>Jade Engine</li>
- </ul>
被缓冲代码
- p= 'Hello Jade'
会转换为:
- <p>Hello Jade</p>
注意: =
默认会转义内容
- p= 'Welcome to wandoujia fe, we want <b>you</b>'
会转换为:
- <p>Welcome to wandoujia fe, we want <b>you</b></p>
如果不想被转义的,在=
前面添加!
- p!= 'Welcome to wandoujia fe, we want <b>you</b>'
会转换为:
- <p>Welcome to wandoujia fe, we want <b>you</b></p>
二、使用变量
- - var name = 'Jade'
- p my name is #{name}
会转换为:
- <p>my name is Jade</p>
如果要输出 #{}
,那就得使用/
来转义
- - var name = 'yaochun'
- p my name is \#{name}
会转换为:
- <p>my name is #{name}</p>
变量中的特殊字符会被转义,如:
- - var name = '<script></script>'
- | #{name}
会转换为:
- <script></script>
如要得到不转义的,用!
替换#
来调用
- - var name = '<script></script>'
- | !{name}
会转换为:
- <script></script>
|
其实就是管道,一般也可以定义一段文本
三、循环
语法结构:
- each VAL[,KEY] in OBJ
- VAL是值
- KEY是键,可选
- OBJ是对象,array or object
数组实例
- - var jobs = ["fe", "wandoujia", "beijing", "We want you"]
- each job in jobs
- li= job
会转换为:
- <li>fe</li>
- <li>wandoujia</li>
- <li>beijing</li>
- <li>We want you</li>
对象实例
- - var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
- each val,key in jobs
- li #{key} : #{val}
会转换为:
- <li>catagory : fe</li>
- <li>company : wandoujia</li>
- <li>local : beijing</li>
四、Case
case主要的作用和js里面的switch一样
方式一 本文推荐的方式
- - var apples = 1
- case apples
- when 0
- p you have no apples
- when 1
- p you have an apple
- default
- p you have #{apples} apples
会转换为:
- <p>you have an apple</p>
方式二
- - var apples = 1
- case apples
- when 0: p you have no apples
- when 1: p you have an apple
- default: p you have #{apples} apples
方式三
有些时候,确实有需求合并一些when的情况
- - var apples = 1
- case apples
- when 0
- when 1
- p you have few apples
- default
- p you have #{apples} apples
当apples这个值为0或者1的时候会转换为:
- <p>you have few apples</p>
五、过滤器
支持markdown
注意:必须是已经安装 markdown-js 或者 node-discount
- :markdown
- 我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com
会转换为:
- <p>我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com</p>
六、Mixins
无参数的mixin
- mixin join
- ul
- li 我们需要一帮人
- li 喜欢前端
- li 了解前端
- li 愿意在前端不断学习奋斗的
- li 你是吗?
- li 快来加入我们把
- +join()
会转换为:
- <ul>
- <li>我们需要一帮人</li>
- <li>喜欢前端</li>
- <li>了解前端</li>
- <li>愿意在前端不断学习奋斗的</li>
- <li>你是吗?</li>
- <li>快来加入我们把</li>
- </ul>
有参数的mixin
- mixin join(company)
- ul
- li 我们 #{company} 需要一帮人
- li 喜欢前端
- li 了解前端
- li 愿意在前端不断学习奋斗的
- li 你是吗?
- li 快来加入我们 #{company} 把
- +join('wandoujia')
会转换为:
- <ul>
- <li>我们 wandoujia 需要一帮人</li>
- <li>喜欢前端</li>
- <li>了解前端</li>
- <li>愿意在前端不断学习奋斗的</li>
- <li>你是吗?</li>
- <li>快来加入我们 wandoujia 把</li>
- </ul>
minxin中支持block
- mixin join(company)
- ul
- li 我们需要一帮人
- li 喜欢前端
- li 了解前端
- li 愿意在前端不断学习奋斗的
- if block
- block
- else
- li 你是吗?
- li 快来加入我们把
- +join('wandoujia')
- li 我们这有神马?
- li 我们这个有一帮能折腾的老师阿姨
- li 我们这有美丽的阿姨
- li 我们每周都有技术交流
- li 我们这可以用很多开源的新技术
会转换为:
- <ul>
- <li>我们需要一帮人</li>
- <li>喜欢前端</li>
- <li>了解前端</li>
- <li>愿意在前端不断学习奋斗的</li>
- <li>我们这有神马?</li>
- <li>我们这个有一帮能折腾的老师阿姨</li>
- <li>我们这有美丽的阿姨</li>
- <li>我们每周都有技术交流</li>
- <li>我们这可以用很多开源的新技术</li>
- </ul>
minxin中还支持attributes
- mixin link(href, name)
- a(class!=attributes.class, title!=attributes.title, href=href)= name
- +link('http://wandoujia.com/join', '豌豆荚前端招聘')(class="btn", title="招聘啦,小伙伴快来点")
会转换为:
- <a title="招聘啦,小伙伴快来点" href="http://wandoujia.com/join" class="btn">豌豆荚前端招聘</a>
七、包含
有点类似freemaker,通过include来载入一些jade模板
转自:http://www.w3cplus.com/html/jade.html
Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin的更多相关文章
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Jade模板引擎学习(一)安装及基本语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- NVelocity模板引擎学习笔记
NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结
随机推荐
- gossip版本raft算法实现
raft算法的实现概述 节点的启动和加入: 1. 第一个节点启动,发现没有其他的member节点,则自己变成master 2. 第二个节点启动并加入第一个节点,发现有member节点,并且master ...
- nodejs笔记--模块篇(三)
文件模块访问方式通过require('/文件名.后缀') require('./文件名.后缀') requrie('../文件名.后缀') 去访问,文件后缀可以省略:以"/&qu ...
- Agri-Net(最小生成树)
Description Farmer John has been elected mayor of his town! One of his campaign promises was to brin ...
- Java学习个人备忘录之数组
数组 概念:同一种类型数据的集合,其实数组就是一个容器. 数组的好处:可以自动给数组中的元素从0开始编号,方便操作这些元素. 格式1:元素类型[] 数组名 = new 元素类型[元素个数]; 格式2: ...
- JavaScript初探系列之面向对象
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- IIS7,IIS7.5 URL重写模块工具
URL 重写模块 2.0 提供基于规则的重写机制,可在 Web 服务器处理请求的 URL 之前对其进行更改,以及在向 HTTP 客户端提供响应内容之前修改响应内容. 注意:使用环境为IIS7.0(x6 ...
- IntelliJ IDEA Maven引入
- 【Linux】- 不可不知的小技巧
1.Tab键:输入文件或目录名的前几个字符,然后按TAB键,如无相重的,完整的文件名立即自动在命令行出现:如有相重的,再按一下TAB键,系统会列出当前目录下所有以这几个字符开头的名字. 在命令行下,只 ...
- 苹果IOS、安卓推送功能开发
IOS推送开发:以下是基于开源javapns推送开发1.DerInputStream.getLength(): lengthTag=111, too big.先排除是否由于打包时证书 .p12 文件被 ...
- [C/C++] 原码、反码、补码问题
正确答案:D 解析: C语言中变量以补码形式存放在内存中,正数的补码与原码相同,负数求补码方式为(符号位不变,其余各位取反,最后末尾加1): 32位机器:int 32位,short 16位. x = ...