zoukankan      html  css  js  c++  java
  • jade学习01

    编写

    简单例子

    doctype html
    html
      head
        title learn jade
      body
        h1 learn jade
    

    常用命令

    • 编译: jade index.jade //默认编译成压缩后的html文件
    • 排版编译: jade -P index.jade
    • 实时检测: jade -w index.jade / `jade -P -w index.jade

    声明文档:

    • jade html,
    • jade strict,
    • jade frameset,
    • jade xml

    格式:

    • 子级缩进两格,
    • 标签与文本空一格,
    • 标签加文本和文本换行:
        <div>
          a
          b c<span>d</span>e
          f
        </div>
    
     div a
         |b c
         span d
         |e  
         |f
    
    div.
       a
       b c <span>d</span> e  
       f
    

    添加属性 :

    • h1(class="a b", id="c", other="value") ;
    • id与class可以放在外面: h1.a.b#c(other="value") 这种情况下如果没有写标签,默认为div;

    注释

    • 一般注释: \ 注释在标签前面,包括子元素在内都会被注释; 如果这行文本不属于标签,者注释这行文本
    • 缓冲注释:\- 编译的时候直接省略

    样式和脚本

    //注意空两格
    
    style.
      body{color:red}   
    script.
      var a = 1;  
    

    添加变量

    • 模版内部 //如果与外部部定义的变量相同,内部优先
    body
      - var name = 'value'
      div(id='#{name}') #{name.toUpperCase()} 
    
    //下面等号中不能再加文本; 上面的方式没定义变量输出undefined,下面则留空
    
    body
      - var name = "value"
      div(id=name)= name
    //
    
    <body>
      <div id="value">VALUE </div>
    </body>
    
    
    • 命令行传入 jade index.jade -P -w --obj '{"name": "value"}'

    • json文件外部传入 jade index.jade -P -w -O index.json

    • 模版外部

    变量转义

    • jade 会默认进行变量转义
    • 非转义输出: !#{}!=;
    • 利用反斜杠:
    - var data = 'a'
    p #{data}
    
    //
    p #{data}
    

    语句 //注意空格层级别

    • for
     - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
    
     - for(k in name) 
       p #{k}: #{name[k]}  
    
    • each
    //object
    
     - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
    
     - each  value, key in name
        p #{key}: #{value}
    
    //arrasy
     - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
    
     - for(k in name) 
       p #{k}: #{name[k]}  
    
    //层叠
    
    - var name = [{id:1, items:['a','b','c']},{id:2, items:['d','e','f']}]
    
    - each section in name
       p=section.id
         each item in section.items
           span=item 
    
    • while
    - var n = 0
    ul
      while n < 4
        li= n++   
    
    • if
    - var lessons = ['jade','node']
    
    if lessons
      if lessons.length > 1
        p #{lessons.join(',')}
          else 
            p lessons'length less than 1
      else
        p no lessons 
    
    • unless; //if的反转
    • switch
    - var name = 'jade'
    
    case name
      when 'jade': p #{name} is jade
      when 'node': p #{name} is node
    

    mixin

    • 重复和嵌套
        mixin study(name, courses)
          p #{name} study
          ul.courses
            each course in courses
              li= course
        
        mixin group(student)
          h4 #{student.name}
          +study(student.name, student.courses)
    
        +group({name:'tom',courses:['jade','node']})
        +group({name:'jack',courses:['java','express']})
    
    
    • block代码块
        mixin team(slogon)
          h4 #{slogon}
          if block
            block
          else
            p no team
    
        +team('slogon')
          p Good job!
    
    //结果
        <h4>slogon</h4>
        <p>Good job!</p>
    
    • 传递属性
        mixin attr(name)
          p(class!=attributes.class) #{name}
    
        +attr('attr')(class='magic')
    
    //结果
    <p class="magic">attr</p>
    
    //
    
        mixin attrs(name)
          p&attributes(attributes) #{name}
    
        +attrs('attrs')(class='magic2', id='attrid')
    //结果
    <p id="attrid" class="magic2">attrs</p>
    
    //在不确定传入参数个数
    
    mixin attrs2(name, ...items)
          ul(class!=name)
            each item in items
              li= item
    
    +attrs2('node','jade','express')
    
    
  • 相关阅读:
    php环境配置中各个模块在网站建设中的功能
    PHP+Apache+MySQL+phpMyAdmin在win7系统下的环境配置
    August 17th 2017 Week 33rd Thursday
    August 16th 2017 Week 33rd Wednesday
    August 15th 2017 Week 33rd Tuesday
    August 14th 2017 Week 33rd Monday
    August 13th 2017 Week 33rd Sunday
    August 12th 2017 Week 32nd Saturday
    August 11th 2017 Week 32nd Friday
    August 10th 2017 Week 32nd Thursday
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4361983.html
Copyright © 2011-2022 走看看