jade学习笔记

2016-10-28 本文已影响88人亲爱的孟良

编译
- jade index.jade,得到压缩后的代码（也就是没有空格）
- jade -P index.jade,得到格式化的代码，缩进都正常
- jade -P -w index.jade,对jade文件实时编译，就不用改一次然后命令行敲一次了，直接自动编译
一个最简单的jade

doctype html
html
  meta(charset="utf-8")
  head
    title meng
  body
    h1 jade

标签语法
- class h1.classname
- id h1#idname
- class + id div.classname#idname可以连着写,顺序无所谓
- div,很特殊如果直接写#id,前面不写div标签名，自动生成一个id=id的div
- 属性写法a(class='title',href='http://imooc.com'),类和id也可以这样写在括号里面，注意逗号分隔。
- 大段纯文本
```
p.  ＃这个点必须紧紧跟着p，表示下面的是一个
  wenben
  weben
  wenben
p  ＃这叫管道文本
 |weneb
 |wene
```
- 带标签的大段文本
```
p.
  wenbwne
  <strong>wenwbe</strong> ＃直接写标签名
或者
p 
 | dss
 strong asdf ＃竖线的话元素不用写尖括号
 | dsdfsf
```
注释
- 单行注释，直接在前面加//
- 非缓冲注释，完全不会被编译到html代码中//-
- 块注释，也是//-或者//
写样式

style.
   body{color:red}

写js代码

script.
  var i = 0
或者
－ var i = 'hello'
－ for (var k in value)等等

声明变量和替换
- 第一种方式（写在页面里）

－ var course = 'jade' ＃把变量声明在页面里
＃这样course就可以在整个文档中被访问了
＃使用的时候#{course}就代表jade这个字符串了
＃并且可以用js方法，#{course.toUpperCase()}，将字符串变成大写

第二种方式（写在命令行）

＃命令行里面也可以传一个变量
jade index.jade -P -w --obj'{"course":"jade"}' ＃注意语法

当前文档里声明的变量优先级比命令行传的变量高

第三种方式（写在json文件里)(命令行升级版)

json文件,index.json
{
  "course":"jade"
}
命令行
jade index.jade -P -w -O index.json

插入一个值（转义）

＃什么时候会转义，比如说要写一个script标签放在一个变量里
－ var htmlData = '<script>alert(1)</script>'这样尖括号就会被转义成&lt

非转义 p !{htmlData} p后面必须有空格这样尖括号还是尖括号，并且等同于p!= htmlData p后面紧跟，不能有空格
安全转义 p #{htmlData}常规引入变量，尖括号会被转义,并且等同于p= htmlData
tip 如果要输出！和＃，就得转义\! \#
存在一种特殊情况，当值不存在或者未定义的时候，那么就不用写#{}input(value=newData),这样newData不论有没有值，都可以，没有值就相当于没有，不会显示undefined

代码嵌入总结
- -,eg- for (var x=0;x<3 x ++)
- =,
```
p
  = 'This is <p>' ＃特殊字符会被转义，也就是尖括号
```
- !=,特殊字符不会被转义

流程代码

for each遍历

－ var course = {course:"jade",level:"high"}
－ for (var k in course)
  p= course[k] ＃这样就被直接执行了

each遍历，数组，对象都可以

each value in arr
  p= value

选择case

case friends
  when 0
  when 1
  default
      p balalala

while循环

while n < 4
  li= n++

选择if ...else if ... else

－ var user = { description: 'foo bar baz' }
－ var authorised = false
＃user
  if user.description
    h2 Description
    p.description= user.description
  else if authorised
    h2 Description
    p.description.
      User has no description,
      why not add one...
  else
    h1 Description
    p.description User has no description

还有unless语句,不符合才执行

－var con = flas
unless con
  p Hello,world＃结果会生成p标签

mixins，需要用+标识符使用

mixin list
  ul
      li foo
      li bar
      li baz
+list
+list

带参数的混合宏

mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')

...表示不定数量的参数

mixin list(id,...items)
  ul(id=id)
      each item in items
          li= item
+list('mylist',1,2,3,4)

includes，实现高度复用，将代码片段保存在不同的文件中，需要哪个，导入哪个

＃在需要的地方写includes
html
  ./includes/head.jade

extends,实现继承，继承与复用的区别在于继承可以修改代码，而复用是原原本本的代码
- 使用block标识符，设置一个可修改代码片段，紧跟block后面的是该代码片段的名字
```
block codename
    title Default title
```

Mixins,制造可重复使用的代码段

没有变量的mixins

 //语法
mixin list
  ul
      li foo
      li bar
      li baz
//使用
+list 即可

传入变量的mixins

mixin pet(name)
  li.pet = name
//使用
ul
  +pet('cat')

更复杂的mixins

mixin article(title)
  .article
      .article-wrapper
          h1 = title
          if block
              blcok //存放可变的代码块
          else
              p no content
 //使用
 +article("hello")
 或者
 +article("hello block")
  p this is my block

mixins传入的变量也可以用“rest arguments”语法

mixin list(id,...items)
  ul(id=id)
      each item in items
          li= item
//使用
+list('my-list',1,2,3,4)

坑坑坑！
- 用webstorm有时正常有时报错空格和tab不能混合用，解决办法：webstorm->preference->code style->jade->Tabs and Indents->勾选use tab charactor就行了！

jade学习笔记

猜你喜欢

热点阅读