pug使用方法
安裝
npm install pug-cli -g? 全局安裝
開始監聽
pug -w ./ -o ./html -P
-w? 開始監聽
./html? 放入文件夾
-P? 規范代碼
?基j基本語法
?
?
?
id?和 class
?
標簽中的屬性
doctype html htmlheadbodyinput(type="password" name="inpPwd" data-js=`${ 1 > 2 ? "ok" : "notok"}`)- const myClasses = ["class1", "class2", "class3"]div(class=myClasses)div.mydiv(class=myClasses)- const myStyles = {"color": "red", "background-color": "blue"}div(style=myStyles)- const myAttrbutes = {"src": "myPhoto.png", "alt": "this is my photo"}img&attributes(myAttrbutes)input(type="text" disabled)input(type="text" disabled=false) <!DOCTYPE html> <html><head></head><body><input type="password" name="inpPwd" data-js="notok"><div class="class1 class2 class3"></div><div class="mydiv class1 class2 class3"></div><div style="color:red;background-color:blue;"></div><img src="myPhoto.png" alt="this is my photo"><input type="text" disabled><input type="text"></body> </html>引入css
doctype html htmlheadlink(rel="stylesheet" href="style.css")style.p{color: red;text-decoration: underline;}bodyp this is a html filep(style="text-align: center; text-transform: uppercase") this is a html file- const pStyles = {"text-align": "center", "text-transform": "uppercase"};p(style=pStyles) file2 <!DOCTYPE html> <html><head><link rel="stylesheet" href="style.css"><style>p{color: red;text-decoration: underline;}</style></head><body><p>this is a html file</p><p style="text-align: center; text-transform: uppercase">this is a html file</p><p style="text-align:center;text-transform:uppercase;">file2</p></body> </html>循環
doctype html htmlheadbodyh1 for / each loopeach n in [50, 2, 3, 4, 5]p= neach n,i in [50, 2, 3, 4, 5]p= n + "-" + i- const names = ["aaa", "bbb", "ccc"]each n, i in namesp= n + "-" + i-const grades = {"web dev": 85, "software design": 76}each n, i in gradesp= n + "-" + ifor n, i in []p= n + "-" + ielse strong "no values are here!" <!DOCTYPE html> <html><head></head><body><h1>for / each loop</h1><p>50</p><p>2</p><p>3</p><p>4</p><p>5</p><p>50-0</p><p>2-1</p><p>3-2</p><p>4-3</p><p>5-4</p><p>aaa-0</p><p>bbb-1</p><p>ccc-2</p><p>85-web dev</p><p>76-software design</p><strong>"no values are here!"</strong></body> </html>條件判斷
doctype html htmlheadbodyh2 my web application- let user = {name: "domenic", loggedIn: false, lastLogin: 6}if user.loggedInpI welcome back,strong #{ user.name }else if user.lastLogin < 10p your last login was #{ user.lastLogin } minutes agop a(href="/login") log in againelsea(href="/login") Log in <!DOCTYPE html> <html><head></head><body><h2>my web application</h2><p>your last login was 6 minutes ago</p><p> <a href="/login">log in again</a></p></body> </html>多路分支
doctype html htmlheadbody- const orderStates = 'Pending'case orderStateswhen 'Pending'p your order has been palced and will be sent shortlywhen 'In_Transit'p 22222222222when 'Completed'p 33333333333defaultp 44444444444 <!DOCTYPE html> <html><head></head><body><p>your order has been palced and will be sent shortly</p></body> </html>?
總結
- 上一篇： android dialog的格式显示,
- 下一篇： sql 解析过程