Pug 相关介绍来自：
作者：前端绅士
链接：https://www.imooc.com/article/40792?block_id=tuijian_wz
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作
Pug是啥？
Pug听起来或许比较陌生，但是如果说起她的前生，相信各位多少会有耳闻：Jade。
每当你不停的敲打<></>的时候，可曾想过，这该死的箭头是不是可以拿掉？这不单单是看着不舒服，有时候还会因为行数过多，而导致你头晕眼花。
那么是否有一种既能减少代码量，又能不做预翻译的方案呢，Jade这个后端模板出现了，然后改名叫Pug了，现在Vue也支持这个语法
如何使用
npm i -D pug pug-loader-
<template lang='pug'>即可
Pug也就是HTML，你可以理解成语法糖。
功力如何
我们先来看一段HTML代码
HTML
整成Pug
label
input(type="checkbox")
span 记住密码
.show-box
tips
-
Vue使用有没有什么需要注意的地方没有，完全没有，该
：就冒号，该@就shift+2 -
一些小坑
注意使用|符号来切割文字，如：
span
i
span.red love
| you // 这里没必要再用一个span，使用“|”即可
-
Pug其他功能
-
Pug不单单是简化语法这么简单，她也有变量、混合、过滤等，但这些功能在使用中跟Vue重复，我们搭建项目主要还是Vue，所以能用Vue的就用Vue，Pug最大的功能就是精简和整理代码。 - 如需了解其他功能，请前往官网查阅：Pug官网
codepen除了支持Pug的写法，也支持Haml的写法，下面是：
一、Emmet的用法
Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用vim，下面就以vim插件举例。
首先，按照vim插件文档进行安装。然后，新建一个文本文件，键入
html:5
按一下"<Ctr+y>,"（先按ctrl键+y键，然后再按逗号键，不同的编辑器有不同的转化键），这一行就立刻变成下面的样子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
这就是Emmet的基本用法：先写简写形式，然后用<Ctrl+y>将其转成HTML代码。
Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：
1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
请看下面的例子。
p
p#main.item
a[href=http://wikipedia.org]{维基百科}
div>p
div+p
p>span^div
对应的HTML代码为：
<p></p>
<p id="main" class="item"></p>
<a href="http://wikipedia.org">维基百科</a>
<div>
<p></p>
</div>
<div</div>
<p></p>
<p><span></span></p>
<div></div>
Emmet还提供了连写（E*N）和自动编号（E$*N）功能。
li*3>a
div#item$.class$$*3
对应的HTML代码为
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>
下面是另外一些简写的例子，读者可以自行测试，看看它们转化成怎样的HTML代码。
header+main+footer
table>(thead>tr>th*5)(tbody>tr>td*5)
nav>ul>(li>a[href=#]{Link})*5
Emmet使用按键<Ctrl+y>/，让一个代码块变成HTML注释。更多功能请参考文中链接......
二、Haml的用法
Haml不同于emmet，它是一个命令行工具。需要先安装Ruby语言，再安装Haml。
gem install haml
使用时，用命令行将haml文件一次性转为html文件。
haml input.haml output.html
haml的简化规则如下：
1. !!! 5 代表 <!DOCTYPE html>
2. %E 代表HTML标签。
3. %E#id 代表id属性。
4. %E.class 代表class属性。
5. %E(attr="xxx") 代表某一个特定属性。
6. %E XXX 代表插入标签的内容。
7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。
下面是Haml的代码示例，代码块的层级关系用缩进表示。
!!! 5
%html{lang: 'en'}
%head
%title Haml Demo
%body
%h1 Hello World
%a(href="http://wikipedia.org" title="Wikipedia") 维基百科
对应的HTML代码为：
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Haml Demo</title>
</head>
<body>
<h1>Hello World</h1>
<a href='http://wikipedia.org' title='Wikipedia'>维基百科</a>
</body>
</html>
在Haml中，/起首的行表示HTML注释，-#起首的行表示Haml注释。 更多功能请参考文中链接
网友评论