pug 基础篇

pug

简介

简单理解就是类似less或者scss预编译器,只是他把pug=>html

为什么要介绍这个,我用html不行吗

问就是骚,太骚了,最近看到大佬的代码太简洁了,其实我在18年年初写过一篇,链接,

太浅薄了,不够深刻,准备重新写一篇,不求精通,但求能深入理解内涵

语法篇

Attributes 属性

a(href='') 内容
div(class='ccc') 内容
|
|
a(class='aaa' href='www.baidu.com') 百度

解析

<a href="">内容</a>
<div class="ccc">内容</div>
<a class="aaa" href="www.baidu.com">百度</a>

这样两个|在一起类似于编码后换行了

js表达式

- let authen=true
div(class=authen ? 'aaa' : 'bbb')

解析

<div class="aaa"></div>

如果你有很多属性可以换行写

input(
  type='checkbox'
  name='agree'
  checked
)

<input type="checkbox" name="agree" checked="checked"/>

如果属性里面有js事件

div(class='aaa', (click)='play()')
div(class='bbb', ' (click)'='play()')

<div class="aaa" (click)="play()"></div>
<div class="bbb"  (click)="play()"></div>

在属性中插入变量

- let url='index.html'
- let url1='index1.html'
a(href='/'+url) 链接
a(href=url1) 链接1

- let a='aaa',b='bbb'
div(class=`${a} ${b}`)

<a href="/index.html">链接</a>
<a href="index1.html">链接1</a>

<div class="aaa bbb"></div>

特殊字符的保留属性

如果需要用一些特殊字符,请使用!=而不是用=

但是要注意跨站攻击,所以还是慎用

div(escaped="<code>")
div(unescaped!="<code>")
p!='this code is <strong>not</strong>'

<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>
<p>this code is <strong>not</strong></p>

Boolean Attributes

用true/false控制属性

input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)
input(type='checkbox' checked=true.toString())
input(type='checkbox' checked= true && 'checked')

<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox" checked="true"/>
<input type="checkbox" checked="checked"/>

style Attributes

style 内联属性

a(style={color:'red',background:'green'})

<a style="color:red;background:green;"></a>

class Attributes

- let classArr=['foo','bar','baz']
a(class=classArr)
// 可以重复添加
a(class=classArr class='aaa')
// 是不是有写react的感觉

<a class="foo bar baz"></a>
<!-- 可以重复添加-->
<a class="foo bar baz aaa"></a>

<a class="active">xxx</a>

简写

a.aaa
.content
#main

<a class="aaa"></a>
<div class="content"></div>
<div id="main"></div>

&attributes

把属性拆成对象

div#aaa&attributes({'data-foo':'bar'})
- let obj={name:'xx',age:12}
div&attributes(obj)

<div id="aaa" data-foo="bar"></div>
<div name="xx" age="12"></div>

循环

- for(let i=0;i<3;i++)
  li 333

<li>333</li>
<li>333</li>
<li>333</li>

=====

-let list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
each item in list
  li=item

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

= 是可以直接展示内容

p='dddd'
- let a='eee'
p='dddd'+a

<p>dddd</p>
<p>ddddeee</p>

============

ul
  each item,index in ['a','b','c']
    p #{item}--#{index}

<ul>
  <p>a--0</p>
  <p>b--1</p>
  <p>c--2</p>
</ul>

=============

ul
  each val,key in {name:'xxx',age:'bbb'}
    p=val+'---'+key

<ul>
  <p>xxx---name</p>
  <p>bbb---age</p>
</ul>

如果迭代对象没值,可以执行else

ul
  each val,key in []
    p=val+'---'+key
  else
    li xxxxx

<ul>
  <li>xxxxx</li>
</ul>

while

- let n=0;
ul
  while n<5
    li=n++

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

注释

p 内容
// 是个
  说多了都是
  注释

<p>内容</p>
<!-- 是个
说多了都是
注释
-->

判断

- let a={boolean1:true,boolean2:false}
#app
  if a.boolean1
    p 我显示了
  else if a.boolean2
    p 我不显示啦
  else
    p 默认的值

<div id="app">
  <p>我显示了</p>
</div>

unless

unless 相当于 if 取反

- a=false
unless a
  // 相当于  if !a
  p 显示
else
  p 隐藏

<p>显示</p>

文档类型建议看官网没啥可以说的点

https://pugjs.org/language/doctype.html

插入内容

includes 是允许在一个pug 插入另一个pug
doctype html
html
  style
    include ./test1.css
  body
    include ./test1
<!DOCTYPE html>
<html>
  <style>.aaa{
  width: 100px;
}
  </style>
  <body>
    <p>xxxx</p>
  </body>
</html>
includes 如果不是pug格式,则返回原始类型

在内容里面插入变量

- a='aaaa'
.ccc #{a}
// 原样输出
.aaa \#{a}
// 内容中插入标签
- let risk='<em>Some of the girls</em>'
.quote
  p ssss!{risk}

p
  | ssssdsdsd
  em dsdssd
p.
  sdklsdksdl

<div class="ccc">aaaa</div>
<div class="aaa">#{a}</div>

<div class="quote">
  <p>ssss<em>Some of the girls</em></p>
</div>

<p>ssssdsdsd<em>dsdssd</em></p>
<p>sdklsdksdl</p>

Mixins 混合类

mixin list
  ul
    - for(let i=0;i<4;i++)
      li xxxx
+list
+list

<ul>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
<ul>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>