jade入门

最新推荐文章于 2024-06-05 09:49:13 发布

xuxu_qkz

最新推荐文章于 2024-06-05 09:49:13 发布

阅读量2.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xuxu_qkz/article/details/80177371

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jade是html的一种变体写法

doctype html
    html(lang="en")
        head
            title= pageTitle
            script(type='text/javascript').
                if (foo) {
                bar(1 + 5)
                }
        body
            h1 Jade - node template engine
            #container.col
                if youAreUsingJade
                    p You are amazing
                else
                    p Get on it!
                p.
                Jade is a terse and simple
                templating language with a
                strong focus on performance
                and powerful features.

jade –> html

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Jade</title>
    <script type="text/javascript">
        if (foo) {
        bar(1 + 5)
        }
    </script>
    </head>
    <body>
        <h1>Jade - node template engine</h1>
        <div id="container" class="col">
        <p>You are amazing</p>
        <p>
            Jade is a terse and simple
            templating language with a
            strong focus on performance
            and powerful features.
        </p>
        </div>
    </body>
</html>

1.语法

1.所有的标签都不用<>包裹
2.所有的属性用（）包裹
3.没有开始和结束标记，用缩进来表示层级

div
    a(href="http://www.google.com", target="_blank") Google

转移后

<div>
    <a href="http://www.google.com" target="_blank">Google</a>
</div>

可以用“=”设置元素包含的内容。“=”后可跟任何“表达式”，可以是一个字符串、一个“变量”，也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码

// =后的内容会被转码，标签同样会被转码
div= 'If you think you can, <b>you can</b>.'

// =后的内容可以像js一样，进行字符串拼接
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>

// 布尔属性，“真”时加上属性，“假”时不加上
button(disabled=true) Click Me
button(disabled=false) Click Me

–>

<button disabled>Click Me</button>
<button>Click Me</button>

// （）里面写属性 {}里面也可以写变量
div(style={color:red, padding:'10px 5px'}) Style attributes

<div style="color:red; padding:'10px 5px'">Style attributes</div>

html文本注意：

<div>
    <a href="http://google.com">Google</a>
    If you think you can, you can.
</div>

–>jade写法：

div
    a(href="http://google.com")Google
    |If you think you can, you can.

“|”告诉Jade模板解析器：将后面的内容原样输出。因此，“|”后面也可以包含HTML元素。
需要注意的是，“｜”的“作用域”只有一行，若需要按原样输出多行文本，则要用到Jade的另一个特殊字符“.”。“.”一般用在填充<\script>或<\style>元素包含的内容。


script(type="text/javascript").
    window.onload = function(){
        console.log('hello jade');
    };

–>

<script type="text/javascript">
    window.onload = function(){
        console.log('hello jade');
    };
</script>

如果希望在一段纯文本中插入Jade语句，则需要引入“#[]”语法：

div.
    My name is #[b CYF]

–>

<div>My name is <b>CYF</b></div>

2.jade逻辑语法

// 遍历 each...in
- var ary = ['One', 'Two', 'Three'];
each item, index in ary
    div= index + ':' + item

==>
<div>1:One</div>
<div>2:Two</div>
<div>3:Three</div>

-----------------------------

- var obj = {'one': 1, 'two': 2, 'three': 3};
each val, key in obj
    div= key + ':' + val

==>
<div>one:1</div>
<div>two:2</div>
<div>three:3</div>

while 语法：

- var n = 0;
while n < 3
    div= n++

==>
<div>0</div>
<div>1</div>
<div>2</div>

条件判断if

- var bl0 = false, bl1 = true;
if bl0
    div bl0 is true
else if bl1
    div bl1 is true
else
    div all are false

==>
<div>bl1 is true</div>

case语句：

- var gender = 0;
case gender
    when 0
        div you are a girl
    default
        div you are a boy

==>
<div>you are a girl</div>

复用块

“复用块”用关键字“mixin”定义，用“+”调用。

mixin showName
    div CYF
+showName
+showName

==>
<div>CYF</div>
<div>CYF</div>

// 可将“复用块”理解为“函数”，它可接收“参数”，使“复用块”更具灵活性
mixin showName(name)
    div= name
+showName('CYF')
+showName('Cao Yongfeng')

==>
<div>CYF</div>
<div>Cao Yongfeng</div>

填充数据

// = 与 #{}效果一样
- var str = 'my name is <b>CYF</b>';
div= str
div #{str}

==>

<div>my name is &lt;b&gt;CYF&lt;/b&gt;</div>
<div>my name is &lt;b&gt;CYF&lt;/b&gt;</div>

- var str = 'my name is <b>CYF</b>';
div!= str
div !{str}

==》

<div>my name is <b>CYF</b></div>
<div>my name is <b>CYF</b></div>

// #{}对比于= 更加灵活，类似于es6 ${}的用法
- var name = 'CYF';
div my name is #{name}

==》

<div>my name is CYF</div>

注释

// 单行注释
// if you think you can, you can
==》
<!-- if you think you can, you can -->

---------------------------------------

// 多行注释

// 
    if you think you can, you can
    you can

==》

<!--
    if you think you can,
    you can
-->

// jade识别到//- ，会自动忽略后面的语句
//- if you think you can,
div you can

==》

<div>you can</div>

常见的简写

#theId    ==》  div(id="theId")

div#theId if you think you can, you can  ==》  div(id="theId") if you think you can, you can

.theClass  ==》  div(class="theClass")

div.theClass if you think you can, you can  ==》  div(class="theClass") if you think you can, you can

div&attributes({id:'theId', class:'theClass'}) ==> div(id="theId", class="theClass")

xuxu_qkz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jade入门

jade是html的一种变体写法doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5)
复制链接

扫一扫