pug
简介
简单理解就是类似less或者scss预编译器,只是他把pug=>html
为什么要介绍这个,我用html不行吗
问就是骚,太骚了,最近看到大佬的代码太简洁了,其实我在18年年初写过一篇,链接,
太浅薄了,不够深刻,准备重新写一篇,不求精通,但求能深入理解内涵
语法篇
Attributes 属性
a(href='') 内容 div(class='ccc') 内容 | | a(class='aaa' href='www.baidu.com') 百度解析
内容内容百度这样两个|在一起类似于编码后换行了
js表达式
- let authen=true div(class=authen ? 'aaa' : 'bbb')解析
如果你有很多属性可以换行写
input( type='checkbox' name='agree' checked )
如果属性里面有js事件
div(class='aaa', (click)='play()')
div(class='bbb', ' (click)'='play()')
在属性中插入变量
- let url='index.html'
- let url1='index1.html'
a(href='/'+url) 链接
a(href=url1) 链接1
- let a='aaa',b='bbb'
div(class=`${a} ${b}`)
链接
链接1
特殊字符的保留属性
如果需要用一些特殊字符,请使用
!=而不是用=但是要注意跨站攻击,所以还是慎用
div(escaped="")
div(unescaped!="")
p!='this code is not'
this code is not
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')
style Attributes
style 内联属性
a(style={color:'red',background:'green'})
class Attributes
- let classArr=['foo','bar','baz']
a(class=classArr)
// 可以重复添加
a(class=classArr class='aaa')
// 是不是有写react的感觉
xxx
简写
a.aaa
.content
#main
&attributes
把属性拆成对象
div#aaa&attributes({'data-foo':'bar'}) - let obj={name:'xx',age:12} div&attributes(obj)
循环
- for(let i=0;i<3;i++)
li 333
333
333
333
=====
-let list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
each item in list
li=item
Uno
Dos
Tres
Cuatro
Cinco
Seis
= 是可以直接展示内容
p='dddd'
- let a='eee'
p='dddd'+a
dddd
ddddeee
============
ul
each item,index in ['a','b','c']
p #{item}--#{index}
a--0
b--1
c--2
=============
ul
each val,key in {name:'xxx',age:'bbb'}
p=val+'---'+key
xxx---name
bbb---age
如果迭代对象没值,可以执行else
ul
each val,key in []
p=val+'---'+key
else
li xxxxx
- xxxxx
while
- let n=0;
ul
while n<5
li=n++
- 0
- 1
- 2
- 3
- 4
注释
p 内容
// 是个
说多了都是
注释
内容
判断
- let a={boolean1:true,boolean2:false}
#app
if a.boolean1
p 我显示了
else if a.boolean2
p 我不显示啦
else
p 默认的值
我显示了
unless
unless 相当于 if 取反
- a=false
unless a
// 相当于 if !a
p 显示
else
p 隐藏
显示
文档类型建议看官网没啥可以说的点
https://pugjs.org/language/doctype.html
插入内容
includes 是允许在一个pug 插入另一个pug
doctype html html style include ./test1.css body include ./test1xxxx
includes 如果不是pug格式,则返回原始类型
在内容里面插入变量
- a='aaaa'
.ccc #{a}
// 原样输出
.aaa \#{a}
// 内容中插入标签
- let risk='Some of the girls'
.quote
p ssss!{risk}
p
| ssssdsdsd
em dsdssd
p.
sdklsdksdl
aaaa
#{a}
ssssSome of the girls
ssssdsdsddsdssd
sdklsdksdl
Mixins 混合类
mixin list
ul
- for(let i=0;i<4;i++)
li xxxx
+list
+list
- xxxx
- xxxx
- xxxx
- xxxx
- xxxx
- xxxx
- xxxx
- xxxx
=============
mixin pet(name)
ul
li #{name}
li=name
+pet('ccc')
- ccc
- ccc
添加js库
script.
let a=1;
let b=2;
在同一行里面添加标签
.aaa: .ccc
组件
Avis/