jade的学习记录

 

前言(吐槽):

因为工作中接触到了这个东西,虽然我感觉很恶心,但是我也不得不学习内容我将会慢慢补充

元素标签的语法

    div
     a(href="",title="") 内容
    转译后:   
    <div>                               
        <a href="" title="">内容</a>
    </div> 

  注意:把层级分好 元素内的属性用() 包裹起来中间加上,逗号

     <div id="a" class="a">
        <div id="b" class="b"></div>
     </div>
   转译前
    #a.a 
      #b.b
id 和class 不写的话讲默认转为div

“=”设置元素包含的内容。“=”后可跟任何“表达式”，可以是一个字符串、一个“变量”，

也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码

实例:

1. div='' ''引号中的内容将被转码符号改为转义符

1    div= 'If you think you can, <b>you can</b>.'
    <!-- 转码后 -->
    <div>If you think you can, &lt;b&gt;you can&lt;/b&gt;.</div>
    <!-- 不希望被转码的话在=前边加上!(!=)  这样你的元素就不会被转码了 -->
    div!= 'If you think you can, <b>you can</b>.'
    <div>If you think you can, <b>you can</b>.</div>

2.对于布尔属性的写法 =false 属性将会不显示

    button(disabled=true) 点击
    button(disabled=false) 点击
//转译后
    <button disabled>点击</button>
    <button>点击</button>

3.设置元素的 style

    div(style={color:red, padding:'10px 5px'}
//转译后
    <div style="color:red; padding:'10px 5px'">Style attributes</div>

4.设置单标签的元素 举个栗子 img

    img(src="/imgs/face.jpg")
    img(src="/imgs/face.jpg")/     表明这是一个单标签不写也可以(我推荐写一下,避免时间长了忘记)
    <img src="/imgs/face.jpg"/>

接下来就要提到一个很重要的东西    |   这东西超级重要

渲染页面必要的前缀(例如vue的渲染)

这里涉及到了转码时会遇到的问题

情景: 到我们书写文本换行时,转码器会对换行后的第一个句段进行解码书写为标签

    div 
      a how are you?
      i am hao ren
    在这种情况下i am hao ren 会被转译为
    <div>
        <i>am hao ren</i>
    </div>
    解决方式
    div 
      a how are you?
      | i am hao ren

未完待更新