pug使用方法

最新推荐文章于 2024-12-11 19:38:06 发布

oiaa

最新推荐文章于 2024-12-11 19:38:06 发布

阅读量2.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/83037689

版权

前端专栏收录该内容

122 篇文章

订阅专栏

安装

npm install pug-cli -g 全局安装

开始监听

pug -w ./ -o ./html -P

-w 开始监听

./html 放入文件夹

-P 规范代码

基j基本语法

id 和 class

标签中的属性

doctype html
html
    head
    body
        input(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
html
    head
        link(rel="stylesheet" href="style.css")
        style.
            p{
                color: red;
                text-decoration: underline;
            }
    body
        p this is a html file
        p(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
html
    head
    body
        h1 for / each loop
        each n in [50, 2, 3, 4, 5]
            p= n
        each n,i in [50, 2, 3, 4, 5]
            p= n + "-" + i
        
        - const names = ["aaa", "bbb", "ccc"]
        each n, i in names
            p= n + "-" + i

        -const grades = {"web dev": 85, "software design": 76}
        each n, i in grades
            p= n + "-" + i

        for n, i in []
            p= n + "-" + i
        else 
            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
html
    head
    body
        h2 my web application

        - let user = {name: "domenic", loggedIn: false, lastLogin: 6}
        if user.loggedIn
            p
                I welcome back,
                strong #{ user.name }
        else if user.lastLogin < 10
            p your last login was #{ user.lastLogin } minutes ago
            p 
                a(href="/login") log in again
        else
            a(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
html
    head
    body
        - const orderStates = 'Pending'

        case orderStates
            when 'Pending'
                p your order has been palced and will be sent shortly
            when 'In_Transit'
                p 22222222222
            when 'Completed'
                p 33333333333
            default
                p 44444444444

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>your order has been palced and will be sent shortly</p>
  </body>
</html>