jade语法实例分析
本文小编为大家详细介绍“jade语法实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“jade语法实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
标签
自动闭合功能 p==> <p></p>
input ==> <input/>
嵌套标签的写法
p hello world <b>你好世界</b>
输入 <p>hello world <b>你好世界</b> </p>
标签中出现大段块内容
一：在标签后面添加 " . "
script.
console.log("hello world")
console.log("hello world")
二：在每段前面加 “ | ”
script
| console.log("hello world")
| console.log("hello world")
生成：
<script>
console.log("hello world")
console.log("hello world")
</script>
属性用 () 分割 a（href="#"）跳转 ==> <a href="#">跳转</a>
单行注释 //h2 多行注释// h2 不输出注释 //-
添加一个doctype html 就可以输出为<!DOCTYPE html>
设置id classname
#content 如果不设置标签则默认为div
p#cont
a.btn
a#download.btn.btn-default
输出结果为：
<div id="content"></div>
<p id="cont"></p>
<a class="btn"></a>
<a id="downnload" class="btn btn-default"></a>
不被缓冲的代码
-for（var i=0;i<3;i++）
li hello world
执行结果：
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
被缓冲的代码
p=hello world ==> <p>hello world</p>
p=hello world <b>abc</b> ==> <p>hello world <b>abc</b></p>
不想被转译：
p!=hello world <b>abc<b> ==> <p>hello world <b>abc</b></p>
使用变量
-var name = "Dream_Mz"
p my name is #{name} ==><p>my name is Dream_Mz</p>
如果要输出 #{} 需要用 "\" 转译 \#{}
-var name = "<script></script>"
| #{name} ==><script></script>
不想转译：
| ！{name} ==> <script></script>
提示： " | "是一个管道 一般可以定义一段文本
循环
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
==> <p>you have an apple</p>
写法二：
-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的时候输出<p>you have few apple</p>
当apple的值不为0/1的时候 输出<p>you have #{apple} apple</p>
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="我是按钮")
<a title="我是按钮" href="#" class="btn btn1">abc</a>
读到这里，这篇“jade语法实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
