Pug入门
Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。
是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。
优点：
1、无需结束标签
2、强制缩进
3、代码复用和维护
4、标签写法与CSS相同
搭建pug环境：
1、下载node.js和 npm
2、下载 pug , 命令:npm install pug-cli -g
检查：
/********************************************************属性基本用法***********************************************************************/
a(href='baidu.com') 百度
等价于-->
<a href="baidu.com">百度</a>
a(class='button', href='baidu.com') 百度
等价于-->
<a class="button" href="baidu.com">百度</a>Js表达式的形式
//- 已登录
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
等价于-->
<body class="authed"></body>多行属性
input(
type='checkbox'
name='agreement'
checked
)
等价于-->
<input type="checkbox" name="agreement" checked="checked" />属性嵌入：
- var url = 'pug-test.html';
a(href='/' + url) 链接
|
|
- url = 'https://example.com/'
a(href=url) 另一个链接
等价于-->
<a href="/pug-test.html">链接</a>
<a href="https://example.com/">另一个链接</a>布尔值属性：
input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true.toString())
等价于-->
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />样式属性：
style（样式）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个对象
a(style={color: 'red', background: 'green'})
等价于-->
<a style="color:red;background:green;"></a>类属性：
class（类）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个包含多个类名的数组
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])
等价于-->
<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>它还可以是一个将类名映射为 true 或 false 的对象，这在使用条件性的类的时候非常有用。
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
|
|
a(class={active: currentUrl === '/about'} href='/about') About
等价于-->
<a href="/">Home</a>
<a class="active" href="/about">About</a>/*******************************************************字面值************************************************************/
类的字面值：
类可以使用 .classname 语法来定义：
a.button
等价于-->
<a class="button"></a>
考虑到使用 div 作为标签名这种行为实在是太常见了，所以如果您省略掉标签名称的话，它就是默认值：
.content
等价于--->
<div class="content"></div>id的字面值：
ID 可以使用 #idname 语法来定义：
a#main-link
等价于-->
<a id="main-link"></a>
考虑到使用 div 作为标签名这种行为实在是太常见了，所以如果您省略掉标签名称的话，它就是默认值：
#content
等价于-->
<div id="content"></div>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读