千家信息网

jade语法实例分析

发表于:2025-01-17 作者:千家信息网编辑
千家信息网最后更新 2025年01月17日,本文小编为大家详细介绍"jade语法实例分析",内容详细,步骤清晰,细节处理妥当,希望这篇"jade语法实例分析"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。标签自动闭合功
千家信息网最后更新 2025年01月17日jade语法实例分析

本文小编为大家详细介绍"jade语法实例分析",内容详细,步骤清晰,细节处理妥当,希望这篇"jade语法实例分析"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

标签

自动闭合功能 p==>

input ==>

嵌套标签的写法

p hello world 你好世界

输入

hello world 你好世界

标签中出现大段块内容

一:在标签后面添加 " . "

script.

console.log("hello world")

console.log("hello world")

二:在每段前面加 " | "

script

| console.log("hello world")

| console.log("hello world")

生成:

属性用 () 分割 a(href="#")跳转 ==> 跳转

单行注释 //h2 多行注释// h2 不输出注释 //-

添加一个doctype html 就可以输出为

设置id classname

#content 如果不设置标签则默认为div

p#cont

a.btn

a#download.btn.btn-default

输出结果为:

不被缓冲的代码

-for(var i=0;i<3;i++)

li hello world

执行结果:

  • hello world
  • hello world
  • hello world
  • 被缓冲的代码

    p=hello world ==>

    hello world

    p=hello world abc ==>

    hello world <b>abc</b>

    不想被转译:

    p!=hello world abc ==>

    hello world abc

    使用变量

    -var name = "Dream_Mz"

    p my name is #{name} ==>

    my name is Dream_Mz

    如果要输出 #{} 需要用 "\" 转译 \#{}

    -var name = ""

    | #{name} ==><script></script>

    不想转译:

    | !{name} ==>

    提示: " | "是一个管道 一般可以定义一段文本

    循环

    each val[,key] in OBJ val 是值 key是键(可以不写) obj是对象或者数组

    #{key}:#{val}

    -var name = {"key":123,"key2":456,"key3":789}

    each val,key in name

    h4 #{key} 的值是 #{val}

    case 作用和js中的switch一样的

    -var apple = 1

    case apple

    when 0

    p you have no apple

    when 1

    p you have an apple

    default

    p you have #{apple} apple

    ==>

    you have an apple

    写法二:

    -var apple = 1

    case apple

    when 0: p you have no apple

    when 1: p you have an apple

    default : p you have #{apple} apple

    合并when的值:

    -var apple =1

    case apple

    when 0

    when 1

    p you have few apple

    default : p you have #{apple} apple

    当apple的值为0/1的时候输出

    you have few apple

    当apple的值不为0/1的时候 输出

    you have #{apple} apple

    mixin函数的支持

    mixin setName(name,age)

    ul

    li 我叫 #{name}

    li 我今年 #{age} 岁了

    ul

    +setName("张三",19)

    带有块的mixin

    mixin getInfo(name,age)

    ul

    li 我是 #{name}

    li 我今年 #{age}

    if block

    block

    ul

    +getInfo("李四",18)

    li 我来自China

    li hello world

    接受外部的类或属性

    mixin link(href,name)

    a(class!=attributes.class,title!=attributes.title,href=href).btn1=name

    +link("#","abc")(class="btn",title="我是按钮")

    abc

    读到这里,这篇"jade语法实例分析"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。

    0