Pug -- 全新的 Vue 高效书写体验

🤧 前言

在年初 Vue3 刚成为 Vue 的默认版本时，在文档中看到了 Pug 的影子，虽然好奇，由于时间关系一直没能专心去尝试一下 Pug 在 Vue3 🀄️的体验。最近决定不能一拖再拖了，熬夜体验了一番，果然没让人失望。

🥳 Pug 是什么？

Pug 最初是用于服务端的模板引擎，随着一些用于Pug的 loader 出现，它也有了在前端发力的机会。 Pug 可以灵活地生成 HTML 代码，使用方式在一定程度上相似于 JSX ，而又比 JSX 更加强大。

🧐 为什么使用 Pug ？

Pug 的能力非常出众。在 Vue3 🀄️，无论是常规的 HTML 形式的 template ，还是 JSX ，在 Pug 面前都显得笨重且冗余。 Pug 支持行内 JS 语法。而且，JS 代码在这里分为 缓冲代码( Bufferd Code ) 、 无缓冲代码 ( Unbuffered Code ) 以及 不转义无缓冲代码 ( Unescaped Buffered Code ) 。

0.Bufferd Code Bufferd Code 以 = 开头，后面接一个空格，再之后是 JS 代码。Bufferd Code 会产生实际的 HTML 内容，常常用来生成文本内容。处于安全考虑，编译时会自动将其中的 >、< 等敏感字符进行转义。

p(style="background: blue")= '<em>cc ' + 'with' + 'yy !' 

如上代码会被编译为：

<p>&lt;em&gt;cc with yy !</p> 

2.Unbuffered Code Unbuffered Code 以 - 开头，空一格，之后是 JS 代码。Unbuffered Code 不会生成实际内容，只起辅助作用（变量、条件控制、循环等）。

- for (let i = 0;< 3; i++)li 第#{ i }项 

这里 for 循环的那一行，起辅助作用，而由 li 第#{ i }项 来生成实际内容。经过编译后生成如下内容：

<li>第1项</li>
<li>第2项</li>
<li>第3项</li> 

3.Unescaped Buffered Code Unescaped Buffered Code 以 != 开头，顾名思义，会产生不转义的实际内容，也就是说，可以用来得到 HTML 元素。

p!= '<em>cc</em>' + 'with' + 'yy' 

如上代码将被编译为：

<p><em>cc</em>with yy</p> 

在 Pug 模板中，语法极其灵活。代码量更少，更容易写出美观且规范的代码。这里就 Pug 语法进行简要介绍，由于大多数在 Vue 的 template 中用不上，就不详细展开了。有兴趣的同学可以查阅 Pug 官方文档。

• 以每行第一个非空词作为标签，不再需要写成对的标签，不再需要写标签的尖括号，使用缩进来表示标签或语法嵌套:

//- Pug
headerh1 标题
div.content 内容 

对应的 HTML 如下：

<header>
  <h1>标题</h1>
</header>
<div class="content">内容</div> 

• 使用 "()" 来包裹属性，对于特殊属性 class 和 id 可以分别跟在元素名之后，简写为 . 和 # ：

div(class="cc-test" id="cc-id" title="cc-title") cc
//- class 和 id 的简写
div.yy-test#yy-id(title="yy-title") yy 

编译为 HTML :

<div class="cc-test" id="cc-id" title="cc-title">cc</div>
<div class="yy-test" id="yy-id" title="yy-title">yy</div> 

• Pug 的原生语法支持使用 JS 定义变量，通过 #{ value } 的方式进行插值；

- const age = 18
div.age 年龄：#{age} 

编译为：

<div class="age">年龄：18</div> 

• 使用 if-else ，case - when 等分支结构可以进行条件渲染，类似于 JS 中的 if-else 和 switch-case 。注意 case-when 不是 JS 代码，因此不要使用 - 开头。

- const titleVisible = false
- if(titleVisible)header 标题
- elsediv 内容
- let type = 'string'
case typewhen 'string'
  div 字符串when 'number'
  div 数值default
  div 其他 

编译为：

<div>内容</div>
<div>字符串</div> 

• 使用 each - in 来进行遍历，相当于 JSX 中使用 map 。注意，each-i