##### 首先我们安装jade模板引擎并编译
`npm install jade --global`
在项目文件夹下创建一个`index.jade`文件,并且写入
```
doctype
html
head
title imooc jade study
body
h1 imooc jade study

```
然后在命令行下执行`jade -P index.jade `参数大写P表示格式化的编译jade文件。
##### 一、基础篇
1、标签
直接写一个标签名就可以了,标签里面的内容只需要在标签后空一个格写文本。
2、属性
所有的属性都可以写在小括号()里面,并且类名和id名可以用简写的方法.classname和#id
3、注释
单行注释:// ,多行注释,非缓存注释也就是不会编译到html代码中: //- ,块注释也是用: //-,但是需要将这个符号放在需要注释的代码块上方。
4、声明变量和数据传递
`-var course = 'jade'`通过`#{course}`拿到变量,并且可以对变量进行运算`#{course.toUpperCase()}` 一般来说都是从后台传递或者json文件传递数据。

##### 二、进阶篇(流程控制)
1、for
```
- var mooc ={course:'jade',level:'high'}
- for(var k in mooc)
p=mooc[k]
```
结果是
```
<p>jade</p>
<p>high</p>
```
2、each ,可以遍历对象也可以遍历数组,也可以嵌套循环
```
- var classes = ['jade','node','express']
each k in classes
p=k
```
结果是
```
<p>jade</p>
<p>node</p>
<p>express</p>
```
3、 while
```
- var n = 0
ul
while n <= 4
li= n++
```
结果是
```
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
```
4、if-else

##### 三、高级
1、mixin
首先定义一个名为study的mixin,然后再用+mixin名使用。
```
mixin study(name,course)
p #{name}
ul
each item in course
li=item
+study('luo',['jade','node'])
```
结果是
```
<p>luo</p>
<ul class="course">
<li>jade</li>
<li>node</li>
</ul>
```
2、虽然mixin可以让我们的代码减少重复,但是只能在单个文件中使用,所以jade又提供了**继承**的方法解决子文件和父文件之间的代码复用的问题。
使用block关键字,表示需要复用的代码块
```
block des
p no no no no
block des
```
结果是
```
<p>no no no no </p>
<p>no no no no </p>
```
使用extend关键字可以实现继承,通常可以将header和footer的部分放在一个文件中,其他文件继承它们。
3、模板的包含
使用的是**include**关键字,它可以引入静态html和css文件和jade文件。如果后缀名有html或者css就不会对引入的文件进行编译,而是直接引入。

模板引擎之-jade的更多相关文章

  1. pug模板引擎(原jade)

    前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  3. 模板引擎之jade 学习

    jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码: doctype html html(lang="en&q ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  5. 学习篇:NodeJS中的模板引擎:jade

    NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...

  6. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  7. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  8. [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

    强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...

  9. js 模板引擎 jade使用语法

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

随机推荐

  1. 在IIS7里配置 ISAPI,运行dll程序,总提示下载dll

    在IIS7里配置 ISAPI,运行dll程序,总提示下载dll,只需要把对应站点应用程序池里面的高级设置里的启用32位应用程序,设为“true"即可.

  2. ORM常用字段介绍

    Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...

  3. POI2014解题报告

    穷酸博主没有bz权限号, 也不会去$poi$官网, 在某咕刷的$poi$,按照某咕的难度排序刷, poi~ $Luogu3572 PTA-Little Bird$ 单调队列, 队列内按照 步数为第一关 ...

  4. HOSTNAME问题 和yum配置163源的操作 安装lsb_release,KSH,CSH

    HOSTNAME 在 /etc/hosts 里添加一行 127.0.0.1 yourhostname yum配置 来自http://www.cnblogs.com/wutengbiao/p/41889 ...

  5. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  6. Oracle 触发器和序列的创建和使用 (自动增长列)

    -- 创建序列 create sequence 序列名称        start with 1 -- 起始值        increment by 1 -- 增量        maxvalue ...

  7. 学习STM32,你不得不了解的五大嵌入式操作系统

    学习STM32,你不得不了解的五大嵌入式操作系统                                                  原标题:学习STM32,你不得不了解的五大嵌入式操作 ...

  8. jedis set 的四个重载方法(byte[]的四个自动忽略)

    方法定义如下: 1.String set(String key, String value) 2.String set(String key, String value, String nxxx) 3 ...

  9. HTML5 添加新的标签 input属性

    <!-- 新增 有语意标签 --> <nav></nav> <!-- 导航标签 --> <seclion></seclion> ...

  10. Git+Github入门

    1.安装Git git 返回上一级文件命令 cd ..(cd 和..之间有空格) 2.安装完成后需进一步设置,在命令行输入 3.选择一个合适的地方创建一个空目录 pwd命令用于显示当前目录 4.通过g ...