node-express-2-jade

1,Jade里可以省略尖括号，直接写标签名

2,标签间的嵌套关系用换行加空格来实现

3,紧接在标签名后加上.xx或#xx，就能给标签添加css类名和id,如果不写标签名默认就是div

4,标签属性写入()括号内，多个属性用逗号隔开

5,多行文本有两种写法。第一种写法是在标签名后紧接一个.点,这样后面的内容会被Jade模板视作文本域而保留换行符

p.
  第1行文本
  第2行文本
  第3行文本
  第4行文本

//由于是文本域，里面要嵌套标签时，只能写原生的HTML标签了

多行文本的第二种写法是在每行前加上|竖线符

p
  span 第1行文本
  | 第2行文本
  | 第3行文本
  | 第4行文本

不仅可用于p标签等，也常见于style和script标签

script.
  console.log("open mind");
  console.log("learning quick");
  console.log("work hard");

6，变量

变量声明很简单，前面加上-横杠，变量只要#{变量名}

- var cs = 'UTF-8'
meta(charset='#{cs}')

//注意用#{}输出的变量数据会执行HTML转码

- var alertData = '<script>alert(1);</script>'
p #{alertData}

// 标签后面紧接=等号（不转义用!=）来输出变量
p= alertData
p!= alertData

//如果不想HTML转码，可以将#改成!叹号：

- var alertData = '<script>alert(1);</script>'
p !{alertData}

　//如果页面就想输出#{}和!{}呢？可以前面加\反斜杠来让Jade引擎不编译变量

p \#{alertData}
p \!{alertData}

 //#{}如果变量未定义，将会编译成undefined作为初始值。但用=等号来编译变量的话，如果变量未定义就忽略

7,语句，Jade模板支持JavaScript语句,

• if-else
• unless
• case-when
• for-in
• each-in
• while

//if-else

- var author = 'Jack';
if author
  p 作者：#{author}
else
  p 无作者

//编译出来的结果
<p>作者：Jack</p>

//case-when

- var authors = ['Jack', 'Bill'];
case authors[0]
  when 'Jack'
    p 作者是Jack
  when 'Bill'
    p 作者是Bill
  default
    p 无作者

//循环遍历用for-in（注意上面的if-else，case-when语句前不用像变量那样加上-横杠，但for的前面要加上-横杠。如果漏写-横杠，会被解析

- var person = {name:'Jack', gender: 'Male'}
- for (var prop in person)
  p= person[prop]

//编译出来的结果
<p>Jack</p>
<p>Male</p>

//循环遍历也可以用each-in

- var employee = {name:'Jack', gender: 'male'}
- each value, key in employee
  p #{key}: #{value}
- var language = ['Java', 'JavaScript', 'C++']
ul
  each item in language
    li #{item}

//编译出来的结果
<p>name: Jack</p>
<p>gender: male</p>
<ul>
  <li>Java</li>
  <li>JavaScript</li>
  <li>C++</li>
</ul>

//循环遍历也可以用while

- var n = 0
ul
  while n < 4
    li= n++

 8,Jade也支持Mixin，可以理解为function

//调用时函数名前加上+加号

mixin sayHi
  p Hi
+sayHi

//编译出来的结果
<p>Hi</p>

mixin personInfo(name, hobbies)
　+sayHi
  p #{name}'s hobbies:
    ul.hobby
      each hobby in hobbies
        li= hobby
+personInfo('Jack', ['movie', 'music'])

9,模板，Jade用block和extends来实现模板的继承

//xblock真正的作用在于占位，供子文件继承，可以理解为传统OO语言里的虚函数。父文件里定义的block，子文件里用extends来继承并重写。
//header.jade
doctype html
html
  head
    meta(charset='#{charset}')
    block scripts
      script(src='jquery.js')
      script(src='underscore.js')
      script(src='backbone.js')
  body
    block content
      p please write content

//继承上面的文件header.jade
extends header

//重写header.jade中的content
block content
  h1.titleClass#titleID #{title}
  a(href='http://www.jackzxl.net', target='_blank') 我的主页
  ……

//除继承外还可以用include包含。Include会将内容全拷贝进去,不会像extend能进行替换

10，过滤器

只要npm安装好后，用:冒号+模块名就能声明使用这些模块

:markdown
  ...
:less
  ...
:coffee
 ...

 

转载于:https://www.cnblogs.com/avidya/p/8485149.html