zoukankan      html  css  js  c++  java
  • Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin

    Jade语法

    一、代码

    不会被缓冲代码

    ul
      - for(var i=0; i<3; i++)
        li Jade Engine

    会转换为:

    <ul>
      <li>Jade Engine</li>
      <li>Jade Engine</li>
      <li>Jade Engine</li>
    </ul>

    被缓冲代码

      p= 'Hello Jade'

    会转换为:

    <p>Hello Jade</p>

    注意: =默认会转义内容

    p= 'Welcome to wandoujia fe, we want <b>you</b>'

    会转换为:

    <p>Welcome to wandoujia fe, we want &lt;b&gt;you&lt;/b&gt;</p>

    如果不想被转义的,在=前面添加!

    p!= 'Welcome to wandoujia fe, we want <b>you</b>'

    会转换为:

    <p>Welcome to wandoujia fe, we want <b>you</b></p>

     

    二、使用变量

    - var name = 'Jade'
    p my name is #{name}

    会转换为:

    <p>my name is Jade</p>

    如果要输出 #{},那就得使用/来转义

    - var name = 'yaochun'
    p my name is #{name}

    会转换为:

    <p>my name is #{name}</p>

    变量中的特殊字符会被转义,如:

    - var name = '<script></script>'
    | #{name}

    会转换为:

    &lt;script&gt;&lt;/script&gt;

    如要得到不转义的,用!替换#来调用

    - var name = '<script></script>'
    | !{name}

    会转换为:

    <script></script>

    | 其实就是管道,一般也可以定义一段文本

    三、循环

    语法结构:

    each VAL[,KEY] in OBJ
    • VAL是值
    • KEY是键,可选
    • OBJ是对象,array or object

    数组实例

    - var jobs = ["fe", "wandoujia", "beijing", "We want you"]
      each job in jobs
          li= job

    会转换为:

    <li>fe</li>
    <li>wandoujia</li>
    <li>beijing</li>
    <li>We want you</li>

    对象实例

    - var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
    each val,key in jobs
        li #{key} : #{val}

    会转换为:

    <li>catagory : fe</li>
    <li>company : wandoujia</li>
    <li>local : beijing</li>

    四、Case

    case主要的作用和js里面的switch一样

    方式一 本文推荐的方式

    - var apples = 1
      case apples
        when 0
            p you have no apples
        when 1
            p you have an apple
        default
            p you have #{apples} apples

    会转换为:

    <p>you have an apple</p>

    方式二

    - var apples = 1
      case apples
        when 0: p you have no apples
        when 1: p you have an apple
        default: p you have #{apples} apples

    方式三

    有些时候,确实有需求合并一些when的情况

    - var apples = 1
      case apples
        when 0
        when 1
           p you have few apples
        default
           p you have #{apples} apples

    当apples这个值为0或者1的时候会转换为:

    <p>you have few apples</p>

    五、过滤器

    支持markdown

    注意:必须是已经安装 markdown-js 或者 node-discount

    :markdown
        我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com

    会转换为:

    <p>我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com</p>

    六、Mixins

    无参数的mixin

    mixin join
      ul
        li 我们需要一帮人
        li 喜欢前端
        li 了解前端
        li 愿意在前端不断学习奋斗的
        li 你是吗?
        li 快来加入我们把
    
    +join()

    会转换为:

    <ul>
        <li>我们需要一帮人</li>
        <li>喜欢前端</li>
        <li>了解前端</li>
        <li>愿意在前端不断学习奋斗的</li>
        <li>你是吗?</li>
        <li>快来加入我们把</li>
    </ul>

    有参数的mixin

    mixin join(company)
      ul
        li 我们 #{company} 需要一帮人
        li 喜欢前端
        li 了解前端
        li 愿意在前端不断学习奋斗的
        li 你是吗?
        li 快来加入我们 #{company} 把
    
    +join('wandoujia')

    会转换为:

    <ul>
        <li>我们 wandoujia 需要一帮人</li>
        <li>喜欢前端</li>
        <li>了解前端</li>
        <li>愿意在前端不断学习奋斗的</li>
        <li>你是吗?</li>
        <li>快来加入我们 wandoujia 把</li>
    </ul>

    minxin中支持block

    mixin join(company)
      ul
        li 我们需要一帮人
        li 喜欢前端
        li 了解前端
        li 愿意在前端不断学习奋斗的    
        if block
          block
        else  
          li 你是吗?
          li 快来加入我们把
    
    +join('wandoujia')
      li 我们这有神马?
      li 我们这个有一帮能折腾的老师阿姨
      li 我们这有美丽的阿姨
      li 我们每周都有技术交流
      li 我们这可以用很多开源的新技术

    会转换为:

    <ul>
        <li>我们需要一帮人</li>
        <li>喜欢前端</li>
        <li>了解前端</li>
        <li>愿意在前端不断学习奋斗的</li>
        <li>我们这有神马?</li>
        <li>我们这个有一帮能折腾的老师阿姨</li>
        <li>我们这有美丽的阿姨</li>
        <li>我们每周都有技术交流</li>
        <li>我们这可以用很多开源的新技术</li>
    </ul>

    minxin中还支持attributes

    mixin link(href, name)
      a(class!=attributes.class, title!=attributes.title, href=href)= name
    
    +link('http://wandoujia.com/join', '豌豆荚前端招聘')(class="btn", title="招聘啦,小伙伴快来点")  

    会转换为:

    <a title="招聘啦,小伙伴快来点" href="http://wandoujia.com/join" class="btn">豌豆荚前端招聘</a>

    七、包含

    有点类似freemaker,通过include来载入一些jade模板

    转自:http://www.w3cplus.com/html/jade.html

  • 相关阅读:
    AE的空间分析(转载)
    arcengine之版本管理
    执行 bower -v 时出现内部错误
    layui中获取全部提交的数据
    个推 简单的应用(安卓)
    在layui中,新的页面怎么获取另一个页面传过来的数据,并可以对数据进行判断,layui中的后台分页(table)。
    layui基本使用(动态获取数据,并把需要的数据传到新打开的窗口)
    layui的分页使用(前端分页)
    idea的热部署
    Lucene的步骤
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5629615.html
Copyright © 2011-2022 走看看