Jade模板引擎

一）

1）基本知识： 标签：在jade中，标签可以写成：

<tag> ----->tag

2）id,class选择器：直接子啊tag后面添加id和class选择器；

eg： p#i1.c1.c2 ------><p id="i1" class="c1 c2">

#i1.c1

p.c2 ---------><div class="c1" id="i1"><p class="c2"></p></div>

其他属性：

语法:

tag(attr=value.....)--------> <tag attr=value></tag>

ps:标签属性为动态属性：

tag(name="#{value}")

3）标签文本：

  3.1）tag content

3.2）文本加上动态变量：tag content #{变量}

eg:

.i3

label(for="click") click

input#click(type="text" name="none")

注释：

第一种：会在浏览器出现的注释--------> //content

第二种：不会在浏览器出现的注释-------> -//content

4）块展开：若父元素中多个子元素，那么可以在一行内创建嵌套元素；

eg:

ul

li.i1: p a

li.i1: p b -----------------><ul>

<li class="i1"><p>a</p></li>

<li class="i1"><p>b</p></li>

</li>

5）文本块：用来表示一段文本或者脚本的标志；

标志有：“ . ”或者 “ | ”；

eg: p. 或者 p|

content content

ps: script,textarea,style不用“|”；

               6) 文档声明：

                              doctype typebao'kuo[type包括5，basic，xml，public等]；

                              eg:

                                     doctype html  (这里的html默认时5，即html5)

二）jade运行的代码类型：

     1）“—”引导的代码：后面代码正常运行，但该行语句不会在浏览器中出现；

     2）“=”引导的代码：表示输出该变量或者计算值，注意的是“=”不能后面加文本信息，只能加表达式和变量；

          eg:     -if a=10

                       p=a

     区别：

              #{变量}：可以和文本一起用；

             =变量：不能和文本一起用；

         c）循环：each...in和for...in在jade内正常运行，但在浏览器中不会出现；

               语法：  for key in array;

                           each val in array;

               eg:  for key in list(对象)           或者           each val ,key in list

                            li=key.name                                           li #{key}:#{val}

          d）条件语句： if...else...  在jade中正常运行，且不在浏览器中显示；

               语法：

                          if 条件

                              ......

                          else

                              ......