模板引擎之-jade
##### 首先我们安装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的更多相关文章
- pug模板引擎(原jade)
前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- 模板引擎之jade 学习
jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码: doctype html html(lang="en&q ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- 学习篇:NodeJS中的模板引擎:jade
NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin
强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...
- js 模板引擎 jade使用语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...
随机推荐
- Linux 只列出目录的方法
1. ls -d 2. find -type d -maxdepth 1 3. ls -F | grep "/$" 4. ls -l | grep "^d"
- Effective C++ 笔记:条款 31 将编译关系降至最低
31 : Minimize compilation dependencies between files 1 这关乎C++的类(或说都是类惹的祸) 1.1 C++类定义式的问题 C++类定义式不只叙述 ...
- Python10/24--组合/封装/property装饰器/多态
组合的应用: 1. 什么是组合 一个对象的属性是来自于另外一个类的对象,称之为组合 2. 为何用组合 组合也是用来解决类与类代码冗余的问题 3. 如何用组合 '''class Foo: aaa=111 ...
- Log4J日志整合及配置详解
Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使用这三个组件可以轻松 ...
- ABP框架系列之二十一:(Domain-Services-领域服务)
Introduction Domain Services (or just Service, in DDD) is used to perform domain operations and busi ...
- 14. The Realities of Telecommuting 远程办公的现状
14. The Realities of Telecommuting 远程办公的现状 (1) Telecommuting——substituting the computer for the trip ...
- 将JSON数据转换成JAVA的实体类
思路:首先将JSON格式的数据转换成JSONObject,然后将JSONObject转换成Java的实体类(其中类属性包括List等类型) Java实体类: SearchFilter 类 1 publ ...
- 叠加dgv中相同的行信息
俗话说,磨刀不误砍柴工,先说一下情况.点击按钮后往dgv中添加一行(行中字段含有数量),再点击一次,又添加一行. 假如这两条信息一样.则要进行叠加(数量相加).我的思路是这样的:每次点击一次就往dgv ...
- kali安装配置ftp
参考:https://zhidao.baidu.com/question/1511146077646448900.html 一)安装 1.用sudo apt-get install 下载安装包
- 虚拟机下Linux操作Ubuntu
备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...