Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持。

一、功能

客户端支持     超强的可读性    灵活易用的缩进  块扩展  代码默认经过编码处理以增强安全性  编译及运行时的上下文错误报告  命令行编译支持  HTML5模式

可选的内存缓存  联合动态和静态标记类  利用过滤器解析树的处理  支持 Express  利用each透明的循环objects,arrays甚至不可枚举对象  块注释  不需要标记前缀

AST过滤器   过滤器  ...

二、jade安装

  1. npm install jade -g
  2. jade -h

三、jade工具

推荐:online official

四、jade语法

4.1 标签

以p标签为例

  1. p

会转换为:

  1. <p></p>

jade能自动识别自闭和标签:

  1. input

会转换为:

  1. <input/>

4.2 文本

 4.2.1标签中添加文本

  1. p 欢迎加入wandoujia-fe

会转换为:

  1. <p>欢迎加入wandoujia-fe</p>

 

4.2.2 标签中嵌套标签

直接跟写html一样就行

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

会转换为:

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

 

4.2.3 标签中有大段的块内容

  • 方式一:在标签后面添加 "."

   比如一段js代码,注意是script后面有一个"."

  1. script.
  2. console.log('Welcome to join wandoujia-fe')
  3. console.log('We want you')
  • 方式二:每段前面添加"|"
  1. script
  2. | console.log('Welcome to join wandoujia-fe')
  3. | console.log('We want you')

转换结果:

  1. <script>
  2. console.log('Welcome to join wandoujia-fe')
  3. console.log('We want you')
  4. </script>

4.3 属性

()来分割属性

  1. a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘

会转换为:

  1. <a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>

4.4 注释

 4.4.1 单行注释

  1. // changed by yc-team

会转换为:

  1. <!-- changed by yc-team -->

 

4.4.2 多行注释

  1. body
  2. //
  3. p 测试代码by yaochun

会转换为:

  1. <body>
  2. <!--p 测试代码by yaochun
  3. -->
  4. </body>

 4.4.3 不输出的注释

在单行注释上加一个短横线 -

  1. //- 这段注释不会输出
  2. p 文本测试by yaochun

会转换为:

  1. <p>文本测试by yaochun</p>

注意: 很多文档里面提到的条件注释已经不再支持

4.5 doctype

添加一个doctype只需要doctype,然后再跟一个可选的值,默认是html

  1. doctype html

会转换为:

  1. <!DOCTYPE html>

注意:!!!这种简写的方式已经被抛弃了~

可选值还有:

  • xml
  • transitional
  • srict
  • frameset
  • 1.1
  • basic
  • mobile

4.6 设置id或class

标签后面跟上#id,.classname,如果没有标签则使用默认标签div

  1. #content
  2. p#info
  3. a.btn

会转换为:

  1. <div id="content"></div>
  2. <p id="info"></p>
  3. <a class="btn"></a>

4.7 1个id和多个class

连着写即可

  1. a#download-btn.btn.blue-btn

会转换为:

  1. <a id="download-btn" class="btn blue-btn"></a>

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

Jade模板引擎学习(一)安装及基本语法的更多相关文章

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

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

  2. Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin

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

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

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

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

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

  5. Jade 模板引擎使用

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

  6. artTemplate模板引擎学习实战

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

  7. NVelocity模板引擎学习笔记

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

  8. Jade模板引擎使用详解

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

  9. nodejs jade 模板 引擎的使用方法

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

随机推荐

  1. 今日头条 2018 AI Camp 6 月 2 日在线笔试编程题第一道——最大连续区间和扩展

    题目 给出一个长度为 n 的数组a1.a2.....ana1.a2.....an,请找出在所有连续区间 中,区间和最大同时这个区间 0 的个数小于等于 3 个,输出这个区间和. 输入描述: 第一行一个 ...

  2. HDFS essay 2 - Clarify Name Node / Checkpoint Node/ Backup Node

    为什么想用英文写了?我获取知识.技术的大部分途径都是通过英文,所以按照自己的理解用英文写下来也比较容易,另外,很多term都是不能翻译的,如果要持续学习技术和知识,那就不但要习惯去阅读,听,还要写,说 ...

  3. Python3 深浅拷贝

    一 定义 在Python中对象的赋值其实就是对象的引用.当创建一个对象,把它赋值给另一个变量的时候,python并没有拷贝这个对象,只是拷贝了这个对象的引用而已. 浅拷贝: 浅拷贝值只拷贝一层,具有自 ...

  4. POJ 2104 K-th Number(划分树)

    Description You are working for Macrohard company in data structures department. After failing your ...

  5. matlab 直方图均衡化(含rgb)

    步骤: 统计原图像素每个像素的个数 统计原图像<每个灰度级的像素的累积个数 家里灰度级得映射规则 将原图每个像素点的灰度映射到新图 代码: clear all I=imread('1.jpg') ...

  6. 2019寒假训练营第三次作业part2 - 实验题

    热身题 服务器正在运转着,也不知道这个技术可不可用,万一服务器被弄崩了,那损失可不小. 所以, 决定在虚拟机上试验一下,不小心弄坏了也没关系.需要在的电脑上装上虚拟机和linux系统 安装虚拟机(可参 ...

  7. 软工1816 · Alpha冲刺(1/10)

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 前后端代码规范统一 针对之前的alpha冲刺安排进一步细化任务卡片 明确apl ...

  8. DNS域名解析协议

    一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点,而这也已经成为了习惯. 根域服 ...

  9. iOS开发多线程编程2 - NSOperation

    1.简介 NSOperation实例封装了需要执行的操作和执行操作所需的数据,并且能够以并发或非并发的方式执行这个操作. NSOperation本身是抽象基类,因此必须使用它的子类,使用NSOpera ...

  10. BZOJ4811 Ynoi2017由乃的OJ(树链剖分+线段树)

    先考虑NOI2014的水题,显然从高位到低位贪心,算一下该位取0和1分别得到什么即可. 加强这个水题,变成询问区间.那么线段树维护该位取0和1从左到右和从右到左走完这个节点表示的区间会变成什么即可,也 ...