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 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>
是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。
优点：
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>
网友回复
我知道答案，我要回答
私活外包
最新提问
有没有开源的项目将图片视频声音文字转场特效编排自动生成剪映草稿json文件？
有没有摄像头捕获眼球转动操作鼠标的开源代码？
localstorage如何生成自增的键值对进行增删改查？
python有没有将python脚本与python运行环境一键打包成exe的代码？
nodejs如何执行浏览器中运行的js代码？
iframe中如何阻止其他域名网页的打开或跳转？
webrtc如何实现多人音频电话会议？
如何实现uni.connectSocket兼容web与小程序app端的websocket通讯？
webrtc如何浏览器中实现多人群音视频通话会议？
indexdb中的表结构与数据如何导出导入恢复？
