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>&lt;script&gt;alert(1)&lt;/script&gt;</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','...')