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{ 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>
=============
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/>