jade环境搭建

打开WebsStorm9.0.3,File—New Project…,project type选择Node.js Express App,新建项目jadeTest,打开Terminal,输入npm install 安装程序需要的依赖项,安装成功后,环境就搭好了,打开app.js文件,找到jade模板引擎的引用代码如下

  1. var express = require('express');
  2. var app = express();
  3. app.set('views', path.join(__dirname, 'views'));
  4. app.set('view engine', 'jade');

接下来,我们开始学习jade语法,程序的默认页面是index.jade,打开index.jade,然后在Terminal中输入以下命令:

jade -P -w index.jade

命令行:jade -P -w index.jade 实时监控jade文件,自动编译为不压缩的html文件,方便实时查看写的jade代码和html的比较

jade标签写法

index.jade

  1. doctype html
  2. html
  3. head
  4. title jade标签写法
  5. body
  6. P 文档声明:doctype html
  7. P 标签省去尖括号,元素和文本用空格间隔
  8. div
  9. P 元素的父子关系用空格缩进表示

编译成html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <P>文档声明:doctype html</P>
  8. <P>标签省去尖括号,元素和文本用空格间隔</P>
  9. <div>
  10. <P>元素的父子关系用空格缩进表示</P>
  11. </div>
  12. </body>
  13. </html>

 jade注释 

单行注释: //

编译成html:<!-- 单行注释 -->

  1. doctype html
  2. html
  3. head
  4. title jade学习
  5. body
  6. p 单行注释://
  7. //div
  8. p 测试单行注释

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <p>单行注释://</p>
  8. <!--divp 测试单行注释
  9. -->
  10. </body>
  11. </html>

块注释://

  1. doctype html
  2. html
  3. head
  4. title jade学习
  5. body
  6. p 块注释://
  7. //
  8. div
  9. p 测试块注释

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <p>块注释://</p>
  8. <!--
  9. div
  10. p 测试块注释
  11. -->
  12. </body>
  13. </html>

非缓存注释:注释的内容不会显示在编译的html中

  1. doctype html
  2. html
  3. head
  4. title jade学习
  5. body
  6. P 非缓存注释/块注释://-
  7. //-div
  8. p 测试多行注释

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <P>非缓存注释/块注释://-</P>
  8. </body>
  9. </html>

jade添加类名、id、属性  

  1. doctype html
  2. html
  3. head
  4. title jade学习
  5. body
  6. div.className#idName
  7. p.className 类名加点紧跟元素后面或者id后面,不用加空格,后面紧跟的文本属性要加空格
  8. p#idTest id名加#紧跟元素后面或者类后面,不用加空格,后面紧跟的文本要加空格
  9. #testDiv div如果有className/id,可以省略元素div
  10. .classDiv div如果有className/id,可以省略元素div
  11. h1 属性添加
  12. .className
  13. p 属性放在小括号里,紧跟元素/id/ClassName后面,属性之间用逗号隔开,idclass也可以放在括号内
  14. input.classP(id='content',type='text',value="添加属性")

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <div id="idName" class="className">
  8. <p class="className">类名加点紧跟元素后面或者id后面,不用加空格,后面紧跟的文本属性要加空格</p>
  9. <p id="idTest">id名加#紧跟元素后面或者类后面,不用加空格,后面紧跟的文本要加空格</p>
  10. </div>
  11. <div id="testDiv">div如果有className/id,可以省略元素div</div>
  12. <div class="classDiv">div如果有className/id,可以省略元素div</div>
  13. <h1>属性添加</h1>
  14. <div class="className">
  15. <p>属性放在小括号里,紧跟元素/id/ClassName后面,属性之间用逗号隔开,id或class也可以放在括号内</p>
  16. <input id="content" type="text" value="添加属性" class="classP">
  17. </div>
  18. </body>
  19. </html>

Jade添加脚本,css

  1. doctype html
  2. html
  3. head
  4. meta
  5. title #{title}
  6. style.
  7. .className{
  8. background: red;
  9. width:200px;
  10. }
  11. #id1{
  12. background: blue;
  13. width: 200px;
  14. }
  15. script.
  16. var s='test';
  17. body

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta>
  5. <title></title>
  6. <style>
  7. .className{
  8. background: red;
  9. width:200px;
  10. }
  11. #id1{
  12. background: blue;
  13. width: 200px;
  14. }
  15. </style>
  16. <script>var s='test';</script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>

jade变量

服务器端代码:以 '-'开头的代码

变量的引用方式:

#{表达式}

= 表达式

!{表达式}

!= 表达式

  1. doctype html
  2. html
  3. head
  4. title jade学习
  5. body
  6. -var test="以'-'开头写服务器端代码"
  7. p #{test}
  8. -var str='test1' ;
  9. -var strTest='<div><p>变量调用</p></div>';
  10. p #{str.toUpperCase()}
  11. p= str
  12. //转义引用,(#{表达式} 等价于 =表达式)
  13. p #{strTest}
  14. p= strTest
  15. //非转义引用,(!{表达式}等价于 !=表达式)
  16. p !{strTest}
  17. p!= strTest

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jade学习</title>
  5. </head>
  6. <body>
  7. <p>以'-'开头写服务器端代码</p>
  8. <p>TEST1</p>
  9. <p>test1</p>
  10. <!--转义引用,(#{表达式} 等价于 =表达式)-->
  11. <p>&lt;div&gt;&lt;p&gt;变量调用&lt;/p&gt;&lt;/div&gt;</p>
  12. <p>&lt;div&gt;&lt;p&gt;变量调用&lt;/p&gt;&lt;/div&gt;</p>
  13. <!--非转义引用,(!{表达式}等价于 !=表达式)-->
  14. <p><div><p>变量调用</p></div></p>
  15. <p><div><p>变量调用</p></div></p>
  16. </body>
  17. </html>
  1. 直接显示#{title}表达式引用方法:
    p \#{title}
    p \
    !{title}
  2. 编译成html
    <p>#{title}</p>
  1. <p>!{title}</p> 

注意:

  1. input(value=data),data有值就显示值,没有值就什么也不显示
  1. input(value=#{data})data有值就显示值,没有值显示undifined
  1. 模板里的数据优先级高于外部传进来的数据
  2.  
  3. 可以传递json数据
  4.  
  5. 可以对表达式进行进行操作,例如:
  1.   -var c='test1' ; p #{c.toUpperCase()} 
  1. 编译成html为:
  1. <p>TEST1</p>

jade多行文本显示

多行文本显示有2中方式

1.标签后边紧跟点

  1. p#id2.className.
  2. 22222
  3. <strong>6666</strong>
  4. 3333
  5. <span>888</span>
  6. 4444
  7. 555

2.标签后面的文本以|开头

  1. p#id3
  2. |222
  3. strong 888
  4. |3333
  5. span 9999
  6. |444

jade流程代码:for,each,while

  1. for
    遍历数组的for
  1. -var arry=[1,3,5,7,9];
  2. ul
  3. -for (var i=0;i<arry.length;i++)
  4. li= arry[i]

编译成html

  1. <ul>
  2. <li>1</li>
  3. <li>3</li>
  4. <li>5</li>
  5. <li>7</li>
  6. <li>9</li>
  7. </ul>
  1. 遍历对象属性的for
  1. -var json={name:'tom',age:9,phone:13222222222};
  2. -for(var j in json)
  3. p= json[j]

编译成html

  1. <p>tom</p>
  2. <p>9</p>
  3. <p>13222222222</p>
  1. each
    遍历数组
  1. -var arry=[1,3,5,7,9];
  2. -each value,index in arry
  3. p #{index}:#{value}
  1. each item in arry
    p= item
  1.  

编译成html

  1. <p>0:1</p>
  2. <p>1:3</p>
  3. <p>2:5</p>
  4. <p>3:7</p>
  5. <p>4:9</p>
  1. <p>1</p>
    <p>3</p>
    <p>5</p>
    <p>7</p>
    <p>9</p>
  1.  
  1. 遍历json数据
  1. -var json={name:'tom',age:9,phone:13222222222};
  2. ul
  3. -each value,key in json
  4. li #{key}:#{value}
  1. 编译成html
  1. <ul>
  2. <li>name:tom</li>
  3. <li>age:9</li>
  4. <li>phone:13222222222</li>
  5. </ul>
  1. while
  1. -var j=0;
  2. ul
  3. while j<3
  4. li= j++

  编译成html

  1. <ul>
  2. <li>0</li>
  3. <li>1</li>
  4. <li>2</li>
    </ul>

 jade流程代码:if - else - unless ,case

   if - else - unless  

  1.  
  1. -var arry=['hello','world','good','test']
    if arry
    if(arry.length>2)
    div
    p= arry[0] +':if'
    p= arry[1]+':if'
    else
    p 数组长度等于小于2
    else
    p 数组为空
    unless arry.length<=2
    div
    p= arry[0]
    p= arry[1]

编译成html

  1. <div>
  2. <p>hello:if</p>
  3. <p>world:if</p>
  4. </div>
  5. <div>
  6. <p>hello</p>
  7. <p>world</p>
  8. </div>

注: unless 相当于非,unless false 才执行代码

case

case相当于switch

  1. -var arry=['hello','world','good','test']
  2. each item in arry
  3. case item
  4. when 'hello'
  5. when 'world'
  6. p hello Tom!
  7. when 'good': P Good News
  8. default
  9. P #{item}

  编译成html

  1. <p>hello Tom!</p>
  2. <p>hello Tom!</p>
  3. <P>Good News</P>
  4. <P>test</P>
  1. 注意:
    when 'world'
  2. p hello Tom!
    或者
  3. when 'good': P Good News
    效果是一样的

可重用的jade块Mixins

1.Mixins简单说就是代码块复用

  1. //定义代码块
  2. mixin bags
  3. div.allBags
  4. p 书包
  5. p 文具包
  6. p 公文包
  7. p 工具包
  8. //调用
  9. +bags

编译成html

  1. <!--定义代码块-->
  2. <!--调用-->
  3. <div class="allBags">
  4. <p>书包</p>
  5. <p>文具包</p>
  6. <p>公文包</p>
  7. <p>工具包</p>
  8. </div>

 2.可以为mixin定义参数   

  1. //参数个数确定
  2. mixin parameters(name,age)
  3. p #{name}今年#{age}岁
  4. +parameters('小明',6)
  5. +parameters('小强',8)
  6.  
  7. //参数个数不确定
  8. mixin parameterList(name,...items)
  9. h1= name
  10. ul
  11. each nn in items
  12. li= nn
  13. +parameterList('小明','早晨读书','中午练书法','下午练拳')

  编译成html

  1. <!--参数个数确定-->
  2. <p>小明今年6岁</p>
  3. <p>小强今年8岁</p>
  4. <!--参数个数不确定-->
  5. <h1>小明</h1>
  6. <ul>
  7. <li>早晨读书</li>
  8. <li>中午练书法</li>
  9. <li>下午练拳</li>
  10. </ul>

 3.mixin可以嵌套使用 

  1. mixin bags
  2. div.allBags
  3. p 书包
  4. p 文具包
  5. p 公文包
  6. p 工具包
  7. //调用
  8.  
  9. mixin getBags(name)
  10. P(class= name) 请列举包的种类
  11. +bags
  12. +getBags('back')

编译成html

  1. <P class="back">请列举包的种类</P>
  2. <div class="allBags">
  3. <p>书包</p>
  4. <p>文具包</p>
  5. <p>公文包</p>
  6. <p>工具包</p>
  7. </div>

4.mixin可以从外部传入代码块

  1. mixin bags
  2. div.allBags
  3. p 书包
  4. p 文具包
  5. p 公文包
  6. p 工具包
  7. //block:外部传入的代码块关键字
  8. if block
  9. block
  10.  
  11. +bags
  12. h1 外部代码块
  13. div
  14. p 外部代码块1
  15. p 外部代码块2

编译成html

  1. <div class="allBags">
  2. <p>书包</p>
  3. <p>文具包</p>
  4. <p>公文包</p>
  5. <p>工具包</p>
  6. <!--block:外部传入的代码块关键字-->
  7. <h1>外部代码块</h1>
  8. <div>
  9. <p>外部代码块1</p>
  10. <p>外部代码块2</p>
  11. </div>
  12. </div>

5.mixin支持传递属性

  1. mixin GetAttrs(name1,name2)
  2. h1 传递属性的方法1
  3. p(class!=attributes.class)= name1
  4. h1 传递属性的方法2
  5. p&attributes(attributes)= name2
  6.  
  7. +GetAttrs('方法1','方法2')(class='redColor',id='passId')

编译成html

  1. <h1>传递属性的方法1</h1>
  2. <p class="redColor">方法1</p>
  3. <h1>传递属性的方法2</h1>
  4. <p id="passId" class="redColor">方法2</p>

模板继承(extends)

继承者里如果与模板里有同名的block,继承者里同名的block会覆盖掉模板里的block

layout.jade

  1. doctype html
  2. html
  3. head
  4. title= title
  5. link(rel='stylesheet', href='/stylesheets/style.css')
  6. body

index7.jade

  1. //layout.jdae与index7.jade是同一个目录下
    extends layout
  2. block content
  3. p 继承模板layout

index7.jade编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" href="/stylesheets/style.css">
  6. </head>
  7. <body>
  8. <p>继承模板layout</p>
  9. </body>
  10. </html>

 

模板包含(include)

把很多块引用到一个页面中

index8.jade

  1. doctype html
  2. html
  3. head
  4. include ../templates/head
  5. body
  6. p 引入静态的jade css
  7. include ../templates/css
  8. p 引入html文件
  9. include ../templates/content.html
  10. P 引入页脚模块
  11. include ../templates/footer

编译成html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" href="/stylesheets/style.css">
  6. </head>
  7. <body>
  8. <p>引入静态的jade css</p>
  9. <style>
  10. p{
  11. background:blue;
  12. }
  13. </style>
  14. <p>引入html文件</p><div>引用html</div>
  15. <P>引入页脚模块</P>
  16. <div>页脚模块</div>
  17. </body>
  18. </html>

  

下面这些文件的位置是在index8.jade上一级目录templates中

head.jade

  1. title= title
  2. link(rel='stylesheet', href='/stylesheets/style.css')

css.jade

  1. style.
  2. p{
  3. background:blue;
  4. }

content.html

  1. <div>引用html</div>

footer.jade

  1. div 页脚模块

jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)的更多相关文章

  1. NVelocity模板引擎学习笔记

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

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

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

  3. Volecity模板引擎学习笔记

    转自:https://blog.csdn.net/reggergdsg/article/details/50937433 最近项目中用到了volecity模板,这里做一下笔记,学习中...相比较 Fr ...

  4. Jade模板引擎学习(一)安装及基本语法

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

  5. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

  6. Jade 模板引擎使用

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

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

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

  8. Jade模板引擎使用详解

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

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

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

随机推荐

  1. Unity3D DF根据名称获取多个子控件代码

    dfPanel control = gameObject.GetComponent<dfPanel>(); dfLabel avatarName = control.Find<dfL ...

  2. Reading Notes of Acceptance Test Engineering Guide

    The Acceptance Test Engineering Guide will provide guidance for technology stakeholders (developers, ...

  3. Hive的安装部署

    1.环境准备 1.1软件版本 hive-0.14 下载地址 2.配置 安装hive的前提,必需安装好hadoop环境,可以参考我之前Hadoop社区版搭建,先搭建好hadoop环境:接下来我们开始配置 ...

  4. 修复SharePoint 2013 Search 拓扑错误

    Problem 当创建和配置SharePoint 2013 Search Service Application成功之后,进入详细配置页后,在Search Application Topology节点 ...

  5. [公告]这里的博客将不再更新,最新博客请移步至blog.coderzh.com

    公告:我的博客已迁移至独立博客:http://blog.coderzh.com/  感谢大家支持!同时欢迎关注我的微信公众号:hacker-thinking <---- 扫描左侧二维码关注

  6. C/C++文件操作2

    一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下: typedef struct { int level; /* fill/empty level of ...

  7. 【Android】混淆器(ProGuard)

    混淆器(ProGuard) 混淆器通过删除从未用过的代码和使用晦涩名字重命名类.字段和方法,对代码进行压缩,优化和混淆.结果是一个比较小的.apk文件,该文件比较难进行逆向工程.因此,当你的应用程序对 ...

  8. Maven学习总结(四)——Maven核心概念——转载

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  9. Leetcode 200 Number of Islands DFS

    统计联通区域块的个数,简单dfs,请可以参考DFS框架:Leetcode 130 Surrounded Regions DFS class Solution { public: int m, n; b ...

  10. 使用 multiprocessing.dummy 执行多线程任务

    # -*- coding: utf-8 -*- # from multiprocessing import Pool 多进程 from multiprocessing.dummy import Poo ...