jade入门与初步使用

一、认识jade  

1、什么是jade

Jade是一个基于javascript，可以运行在node与浏览器环境的一个前端模板引擎，可以实现前后端渲染的统一

2、jade的优点

简洁和高效

Jade是为了提高前端开发人员的效率而产生的。Jade中，空格、换行、缩进都是有意义的

它省略了html中的闭合标签

3、安装

现在的jade改名为pug，所以：

npm install pug

二、jade的语法

1、Doctype

doctype html

2、标签

类似python的缩进

3、属性

input(type='checkbox', checked)

4、代码嵌入

（1）加一个" - "

- for (var x = 0; x < 3; x++)

（2）使用 =

p
  = 'This code is <escaped>!'

（3）使用 !=

5、插值语法

预先指定一个位置，方便以后插入一个新值，简称插值，即为 #{ }

- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}

6、遍历

使用each

// 遍历数组
ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

// 遍历对象
ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

7、混合宏（mixins）

需要使用 mixin 标识符，创建混合宏实例时，需要使用 + 标识符：

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

html效果：

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

8、includes
实现高度复用的另一种方式就是将代码片段保存到不同文件中

include ./includes/head.jade

9、继承
Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。
首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟 block 标识符之后的是该代码片段的名字：
//- layout.jade
doctype html
html
  head
    block title
      title Default title
  body
    block content
然后，在 index 页面继承 layout，并可以根据代码片段的名字修改相关代码：
//- index.jade
extends ./layout.jade
block title
  title Article Title

如果想要追加代码片段，可以使用 append 和 prepend 指令

10、jquery

如果想在页面写jquery函数，则：script.   

注意，那个点很重要，否则报错

11、jade中写html

加个 " | " 即可