[Jade模板引擎]官网案例

官网案例地址 http://naltatis.github.io/jade-syntax-docs/

1. 基本用法

doctype html
html
    head
        title my jade template
    body
        -var name = "Bob"
        h1 Hello #{name}

定义了一个变量name, 然后使用#{name}格式来读取变量name值

变量定义的语法  - var variable = value

标签内容放在标签名后面，用一个空格隔开

2. id & classes

#content
    .block
        input#bar.foo1.foo2

id使用#  class使用.  针对div可以省略掉div标签名

3. Nesting 内联代码

ul#books
    li
        a(href="#book-a") book A
    li
        a(href="#book-b") book B

// 等价于下面的内联写法

ul#books
    li: a(href="#book-a") book A
    li: a(href="#book-b") book B

内联写法可以节省代码行数

4. 大段文本

// 文本中使用变量
- var book = {"name": "Hello", price: 12.99}
h1 foo
h2= book.name
h3 "#{book.name}" for #{book.price} $

解析变量的方式，一般情形使用 #{} 的语法形式。 如果该标签只有变量一个值，可以使用 tag= 的语法来直接解析。

针对p标签中的大段文本，使用p.表示后面的内容强制解析，在单独某行前面使用|表示这一行需要解析。需要注意的是，如果使用了原生HTML标签，这表示强制显示HTML标签格式内容

p.
    foo bar
    hello world
    <span>hello jade<span>

p
    | foo bar
    | hello world
    <span>hello jade<span>

5. 变量创建和使用

// 使用 - var variable 的语法进行变量声明
- var foo = "hello react"
h1= foo

// 变量声明也可以使用字符串拼接
- var book = {name: "hello"}
- var foo = book.name + 'world'
h1= foo

#{name} ===  = name

!{name} ===  != name

6. 回避变量转义

使用!{name}或者!=name可以避免特殊字符转义，如 < > 等等

- var name = "Hello <em>World</em>"
li Hello <em>World</em>
li= name
li!=name
// !=name 表示特殊字符不会转义，因此会显示 <>

7. 标签属性

input(type="text", placeholder="your name")

- var type = "text"
- var name = "bob"
input(type=type, value="Hello #{name}")

input(checked=true, disabled=false)
input(checked)

8. 文档注释

单行注释 //

多行注释 // 但是要放在多行代码块前面一行且高出一级

不可见注释 //- 生成后的html文件中注释不可见

// single line comment
//- invisible single line comment

// block comment
    h1 hello world
    p how to protect envrionment

//- invisible block line comment
    h2 how are you?

9. 流程控制--条件判断

- var name = "bob"
if name == 'bob'
    h1 Hello #{name}
else
    h1 My name is #{name}


// unless expr ===  if(!(expr))
- var errors = false
unless errors
    p no errors

10. 流程控制--for each循环控制

- var books = ["nodejs in action", "vue in action", "react in action"]

select
    each book, i in books
        option(value=i) Book #{book}

// 生成一个select表单元素

- var books = []
ul
    for book in books
        li= book
    else
        li sorry, no books

for 可以和 else 一起使用

11. 流程控制--case多重选择

- var name = "Bob"
case name
    when "Bob"
        p Hi Bob!
    when "Alice"
        p Howdy Alice!
    default
        p Hello #{name}!

case 和 when 一起使用

12. mixin

// 带参数的mixin
mixin book(name, price)
    li #{name} for #{price} $

ul#books
    +book("Book A", 12.99)
    +book("Book B", 5.99)

mixin的使用方法就是前面加上+

// 带参数，带标签属性的mixin
mixin book(name)
    div&attributes(attributes)=name

+book("Book A")#first
+book("Book B")(title="book b")
+book("Book C").last