首页 » 技术分享 » jade语法

jade语法

　
评论关闭　668次浏览
文章目录

jade写的网页的demo

doctype html
html(lang="zh-CN")
    head
        meta(charset="UTF-8")
        title jadeTest
    body
        .container
            .header
                .menu
                    .nav
                        li
                            a(href="#") 首页
                        li
                            a(href="#") 新闻中心
            .center
                .row
                    .size1
                        .box.timely-msg
                            .hd
                                h2
                                    a(href="#") 及时消息
                            .bd
                                ul.list
                                    li
                                        a(href="#") 这款合资车售价18万，2.0T+8速动力，比迈腾还有面子，车标成亮点
                    .size2
                        .box.news-list
                            .hd
                                h2
                                    a(href="#") 新闻列表
                            .bd
                                ul.list
                                    li
                                        a(href="#") 这款合资车售价18万，2.0T+8速动力，比迈腾还有面子，车标成亮点
            .footer
                p 公司版权，违者必究

jade的特点

p 不像HTML一样，有<>包围标签，jade中的标签的属性使用紧跟元素后面的小括号()括号括起来，属性值使用引号；

p 另外，jade元素没有相应的开始和结束标记，是通过标记的缩进来表示从属关系，这一点应该是和python的语法类似；

语法

doctype

p HTML文档的开始需要声明文档的类型，具体的声明方式为：

<!DOCTYPE html>

p jade中相应的声明方式为：

doctype html

元素和属性

p HTML中的元素和属性，元素的开始和结束标记，都是通过<>来标识，而在jade中，不需要使用<>标记元素的开始和结束。HTML中的元素属性，需要显示的声明属性的类型，如class、ID，jade中使用#表示id，.来表示class。

#user
    .face
        a(href="#") 修改头像

对应的HTML为:

<div id="user">
    <div class="face"><a href="#">修改头像</a></div>
</div>

如果元素只有一个属性的时候，直接跟在元素后面的()中标明属性名并赋给相应的值就可以了，但如果元素有多个属性，那么元素的属性之间使用逗号(,)分割

#user
    .face
        a(href="#",target="_blank") 修改头像
<div id="user">
    <div class="face"><a href="#" target="_blank">修改头像</a></div>
</div>

元素包含的内容

  1. 元素包含的内容，可以直接将内容跟在元素标签的后面；
.text 全面屏iPad来了！最低售价6499元，果粉们剁手吗
  1. 使用"="来设置元素包含的内容
.text="全面屏iPad来了！最低售价6499元，果粉们剁手吗"

上面2行代码对应的html为:

<div class="text">全面屏iPad来了！最低售价6499元，果粉们剁手吗</div>
<div class="text">全面屏iPad来了！最低售价6499元，果粉们剁手吗</div>

jade中的=

jade中的=后面可以跟任何表达式，这个表达式可以是字符串，可以是变量，也可以是函数，或者是表达式运算的结果。但需要注意，=后面的内容会被转码(escape)

=后跟字符串

.text="Hello world!<b>Hello world!</b>"

解释为HTML后为：

<div class="text">Hello world!&lt;b&gt;Hello world!&lt;/b&gt;</div>

=后面的内容会被转码，如果不想后跟的内容被转码，则在=前面加!

.text!="Hello " + "<b>world!</b>"

解释为HTML后的内容为：

<div class="text">Hello <b>world!</b></div>

=后跟变量

暂时没有找到合适的demo，找到了补上

jade中元素的布尔属性

jade中元素的布尔属性设置为false，则不加入到元素中；如果元素中的布尔属性设置值为true或者不设置值，都会在元素中加入布尔属性

input(placeholder="请输入用户名",disabled)
input(placeholder="请输入密码",disabled=true)
input(placeholder="请确认密码",disabled=false)

解释为HTML后为：

<input placeholder="请输入用户名" disabled>
<input placeholder="请输入密码" disabled>
<input placeholder="请确认密码">

jade中元素添加内联样式

jade中元素添加内联样式，和为元素添加属性的方式基本一致，不同的是内联样式的属性会有多个，这多个属性，可以放到一个{}中，可以简单理解为js中的对象。

.text(style={color:'#f20',padding:'5px 10px'}) Hello World!

解释为HTML后的代码为：

<div style="color:#f20;padding:5px 10px" class="text">Hello World!</div>

jade元素添加内联样式，基本的方式就和上面介绍的一致，但有些特殊的地方，暂时还没有琢磨清楚，就是当属性名有-分隔的时候如font-size，在jade中内联样式中怎么书写，还不知道。

转载自原文链接, 如需删除请联系管理员。

原文链接：jade语法，转载请注明来源！

赞 0