##### 首先我们安装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. Linux 只列出目录的方法

    1. ls -d 2. find -type d -maxdepth 1 3. ls -F | grep "/$" 4. ls -l | grep "^d"

  2. Effective C++ 笔记:条款 31 将编译关系降至最低

    31 : Minimize compilation dependencies between files 1 这关乎C++的类(或说都是类惹的祸) 1.1 C++类定义式的问题 C++类定义式不只叙述 ...

  3. Python10/24--组合/封装/property装饰器/多态

    组合的应用: 1. 什么是组合 一个对象的属性是来自于另外一个类的对象,称之为组合 2. 为何用组合 组合也是用来解决类与类代码冗余的问题 3. 如何用组合 '''class Foo: aaa=111 ...

  4. Log4J日志整合及配置详解

    Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使用这三个组件可以轻松 ...

  5. ABP框架系列之二十一:(Domain-Services-领域服务)

    Introduction Domain Services (or just Service, in DDD) is used to perform domain operations and busi ...

  6. 14. The Realities of Telecommuting 远程办公的现状

    14. The Realities of Telecommuting 远程办公的现状 (1) Telecommuting——substituting the computer for the trip ...

  7. 将JSON数据转换成JAVA的实体类

    思路:首先将JSON格式的数据转换成JSONObject,然后将JSONObject转换成Java的实体类(其中类属性包括List等类型) Java实体类: SearchFilter 类 1 publ ...

  8. 叠加dgv中相同的行信息

    俗话说,磨刀不误砍柴工,先说一下情况.点击按钮后往dgv中添加一行(行中字段含有数量),再点击一次,又添加一行. 假如这两条信息一样.则要进行叠加(数量相加).我的思路是这样的:每次点击一次就往dgv ...

  9. kali安装配置ftp

    参考:https://zhidao.baidu.com/question/1511146077646448900.html 一)安装 1.用sudo apt-get install 下载安装包

  10. 虚拟机下Linux操作Ubuntu

    备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...