Nodejs express框架之jade模板的学习笔记

使用jade的环境
  配置node.js的环境，并且在全局安装jade即在命令行中执行npm install -g jade

jade的使用
与html不同：元素的标签不要写<>、且不用成对的出现、子元素相对于父元素保持两个空格的格式、标签与文本之间需要保持一个空格的位置以便区分。
例如：
html
  head
    title
  body
上面表面html是所有元素的父节点，head是title的父节点，body和head是兄弟节点

如何区分元素与标签：
例如：<div><div>,div是一个块状元素，<div>是标签，与用来标记该元素；<>里面的是元素名；元素由开始和结束标签组成，用来包含某些内容的整段代码，整个html文档是由许许多多的html元素来组成的

定义元素的属性

给某个标签加一个类：
例如：div.classname --> 给div添加了一个名为classname的类（还可以这样写--> div(class='classname')）

给某个标签加一个ID：
例如：div#id --> 给div添加了一个名为id的ID（还可以这样写--> div(id='id')）

ID和类名是可以连着写的：
例如：div#id.classname --> 给div添加了一个名为id的ID和一个名为classname的类（顺序交换也可以）
（还可以这样写--> div(id='id',div(class='classname'))）

div比较特殊，当你只写一个类名或者是ID，而没有标签名，会默认标签名为div
例如：#id --> div#id  .class --> div.class

可以在元素后通过括号来添加元素的属性
例如：a(href='#',title='study')

自闭合标签实现和闭合标签是一样的

通过使用|可以让该行字符变成文本
例如：|study is happy

通过使用.可以让紧靠该元素的内容变成文本

例如：    p.
1.aa
2.bb
3.cc

如何在该文本中表示标签呢？

1.例如： p.
1.aa<strong>121</strong>
2.bb
3.cc
2.例如： p.
| 1.aa
strong 121
| 2.bb
| 3.cc

注释：
//  ： 普通的注释
//- ： 非缓存注释，注释后完全没有被编译到（可以实现行注释或者块注释）

样式与脚本的引入

例如：style.
body{color:#00B7FF}
script.
{var string = 'imooc'}

声明变量与替换数据：

在代码中的声明变量和传值

例如：
- var coure = 'jade';
title #{coure.toUpperCase()}//利用#{变量名}或者是=变量名来调用该变量

在命令行中传值

jade test.jade --obj {'coure ':'jade'} 当命令行与代码中的变量名相同时，优先取代码中变量的值

通过json文件去传变量值
jade -P -w test.jade -O jade.json 方便多个值的传递
//-P代表按照原来的格式输出 -w代表以监听的方式来执行代码

安全转义
当某个变量的值里面存在html标签的字符串时，输出会被安全转义
例如：
- var htmlData = '<script>alert(1)</script>';
p #{htmlData}

渲染后的结果是 <p><script>alert(1)</script></p>

非转义：(1)p !{htmlData} 使用!代替#；(2)p!={htmlData}

把整个标签像文本一样输出
例如： p \#{tmlData} 在#前面加\

当变量值不存在时，会将该值变成undefined
input(value="#{newData}")

当变量值不存在时想将该属性去掉，直接#{}去掉就行了
例如：
input(value=newData)；value属性也不存在

jade里面也可以实现for-each-while-if-else-unless-case的功能

例如：
- course = ['ha',2,3,4,5];
h2 while
- var n = 0;
div
while n < 5
p=course[n++]

h2 for
div
-for(var i in course)
p=course[i]

h2 each
div
-each value in course
p=value
h2 unless
unless isMooc//当isMooc为false,才执行下面的语句
p #{course.length}
h2 case
-var name = 'jade'
case name
when 'java': p Hi,java
when 'jade': p Hi,jade
default
p Hi,#{name}

mixin - 代码块重用

例子；
mixin lesson
p Hello World!
//调用代码块，增加代码的重用性，从而减少代码的冗余
+lesson

//传递属性中的类名
mixin attr(name)
p(class = attributes.class) #{name}
+attr('attr')(class='magic')
//传递属性
mixin attrs(name)
p&attributes(attributes) #{name}

+attrs('attr')(class='magic' id='attrid')
//传递任意个参数
mixin fun(name, ...items)
p(class = '#{name}')
each item in items
li #{item}
+fun('classname','jade','node','ejs','...')