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="<code>"></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{ 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>
=============
mixin pet(name)
ul
li #{name}
li=name
+pet('ccc')
<ul>
<li>ccc</li>
<li>ccc</li>
</ul>
添加js库
script.
let a=1;
let b=2;
<script>
let a=1;
let b=2;
</script>
在同一行里面添加标签
.aaa: .ccc
<div class="aaa">
<div class="ccc"></div>
</div>
组件
Avis/
<Avis/>