玉是node . js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近,并且,玉也支持空格。
<强> 1,标签
在玉里,一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意:不需要加“& lt;在“因。为玉会帮我们渲染闭合和开始标签,例如:
身体
div
h2玉是node . js的一个模板引擎
p它借鉴了Haml的很多地方,所以语法上和Haml比较相近。
div
页脚和复制;潘多拉
上面的玉模板最终渲染出的HTML代码是:
& lt; body>
& lt; div>
& lt; h2>玉是node . js的一个模板引擎& lt;/h2>
& lt; p>它借鉴了Haml的很多地方,所以语法上和Haml比较相近。;/p>
& lt;/div>
& lt; div>
& lt; footer>和复制;Pandora
& lt;/div>
& lt;/body>
注意:如果没有写标签名,则默认就是div标签。
<强> 2,变量/数据
传给玉模板的数据我们称之为当地人。使用等号"="来输出一个变量的值。
(当地人):
{
标题:“表达。js指南”,
身体:“综合书>
h2标题=p=身体
渲染输出的HTML:
& lt; h2>表达。js Guide
& lt; p>综合书>
——var title=敖诘恪?
我爱#{标题}
之前
在模板被编译时变量的值就会被处理,所以,不要在可执行JavaScript(-)里使用它。
<强> 4,属性
属性紧跟在标签之后,且用“()”括起来,多属性用”、“分隔,例如:身体(name1=皏alue1 name2=value2)。
div (id=澳谌荨眂lass=爸饕?
(href=' http://csdn.net ', title=癱sdn主页”,目标=降取?csdn:中国软件联盟
形式(action="/登录")
按钮(类型=疤峤弧?值=" https://www.yisu.com/zixun/提交”)
输出:
& lt; div id==爸饕北取澳谌荨崩?
& lt; a href=' http://csdn.net ' title=癱sdn主页的目标=降取?CSDN:中国软件联盟& lt;/a>
& lt;形式行动="/登录"比;
& lt;按钮类型=疤峤弧眝alue=" https://www.yisu.com/zixun/提交”比;
& lt;/form>
& lt;/div>
<强>动态属性:
动态属性即属性的值是动态的,即用一个变量来表示属性的值。符号“|”可以在新的一行里写HTML节点内容,例如:
(href=https://www.yisu.com/zixun/url,数据发挥积极作用=isActive)
标签
输入(type=案囱】颉?检查=完成)
|是/否
提供给上面模板的数据:
{
url:“/注销”,
isActive:没错,
完成:假
}
最终渲染后输出的HTML:
& lt; a href=" "数据发挥积极作用=" rel="外部nofollow”数据发挥积极作用在& lt;/a>
& lt; label>
& lt;输入类型=案囱】颉?祝辞是/否
& lt;/label>
注意:属性值为假的属性在输出HTML代码时将被忽略;而没有传入属性值时,将默认为真的。
<强> 5,字面量
为了省的事,可以直接在标签名之后写类名和ID名。例如:
div#内容
p.lead.center
| Pandora_galen
#竖栏。//没扯有标签名,默认为" div "
span.contact.span4
(href=" https://www.yisu.com/contact " rel="外部nofollow”rel="外部nofollow”) 之前联系我
渲染输出的HTML:
& lt; div id=澳谌荨痹?
& lt; p class="领导中心”在
Pandora_galen
& lt; div id="兼职" class="扯"祝辞& lt;/div>
& lt;跨类=傲祍pan4”比;
& lt; a href=" https://www.yisu.com/contact " rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;联系我& lt;/a>
& lt;/span>
& lt;/div>
<强> 6,文本
使用符“|”号输出原始文本。
div
|我两年前开始学习前端
|在此之间,我学过了html, jQuery, JavaScript、Python、Css3, HTML5,引导,D3。js, SVG…而现在我在学节点。并且我已经深深的爱上了前端。
