Web使用Pug與Stylus

5.pug用法：

5.1層級(jí):
需要按照階梯層級(jí)來(lái)寫(xiě)pug代碼，例如Html標(biāo)簽肯定包裹了Head和body標(biāo)簽，那html標(biāo)簽在第一行，head和body就必須在第二,三行，而且要縮進(jìn)兩個(gè)空格寫(xiě)，這里的head和body是同級(jí)的，所以他們必須保持一致的縮進(jìn)

// 傳統(tǒng)寫(xiě)法
<html>
    <head></head>
    <body>
        <h1></h1>
        <p></p>
        <p></p>
        <button></button>
    </body>
</html>

// pug寫(xiě)法
html
    head
    body
        h1
        p
        p
        button

比較得出pug寫(xiě)法很簡(jiǎn)潔，而且不需要閉口，傳統(tǒng)的必須用</>來(lái)閉口。

5.2 id和class
class用.表示,id用#表示

    // 傳統(tǒng)寫(xiě)法
    <html>
        <head></head>
        <body>
            <h1 id="pageTitle">This Is Page Title</h1>
            <p class="top-p">
                嘿嘿嘿
            </p>
            <p class="bottom-p">
                哈哈哈
            </p>
        </body>
    </html>

    // pug寫(xiě)法
    html
        head
        body
            h1#pageTitle This Is Page Title
            p.top-p
                嘿嘿嘿
            .bottom-p
                哈哈哈

另外，<div></div>的class和id屬性寫(xiě)法最簡(jiǎn)單，可能是因?yàn)檫@個(gè)是html最常見(jiàn)的標(biāo)簽，所以他不需要加前綴，直接這樣

    <div id = "div-id">哼哼</div>
    <div class="display-div">哈哈</div>
    
    // pug寫(xiě)法
    .div-id
    .display-div

5.3 屬性寫(xiě)在圓括號(hào)里
傳統(tǒng)html寫(xiě)法

  <div class = "container">
    <input type="number" v-model="mName" class="input_name" placeholder="請(qǐng)輸入用戶(hù)名"/>
    <button @click="clickSubmit()" class="btn_submit">提交</button>
    <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"/>
  </div>

pug寫(xiě)法

  .container
    input(type="number" v-model="mName" class="input_name" placeholder="請(qǐng)輸入用戶(hù)名字")
    button(@click="clickSubmit()" class="btn_submit") 提交
    img(src="/images/pulpit.jpg" class="dateIcon" width="304" height="228" alt="Pulpit rock")

最后總結(jié)：
1.傳統(tǒng)控件不需要. 例如input,button,img,textrea,p,span等等，直接寫(xiě)代表控件的名字，在圓括號(hào)里面寫(xiě)屬性
2.div肯定是.class名字開(kāi)頭，但是傳統(tǒng)控件也可以手動(dòng)加class名字和id名字，方便其它地方使用

實(shí)際demo:
1.效果圖：

image.png

html部分代碼

<template lang="pug">
  .page
    .row(@click="showDateTimePicker()")
      span(class="title") 日期
      .right
        img(src="../../../assets/turnleft.png" class="dateIcon")
        span(class="date") {{currentDate}}
      .line
    .row(style="padding-top:8px")
      span(class="title") 班次
      .right
        .button(v-for="item,index in scheduleList" :key="index"  :style="index==currentShift? buttonChooiceStyle() : buttonUnChooiceStyle()" @click="clickShift(index)") {{item.name}}
      .line
    .row.active
      span(class="title") 停機(jī)總時(shí)長(zhǎng) (min)
      .right
        input(type="number" v-model="bean.total_time" class="input" placeholder="填寫(xiě)停機(jī)總時(shí)長(zhǎng)")
      .line
    .row.active
      span(class="title") 設(shè)備 (電氣) (min)
      .right
        input(type="number" v-model="bean.elec_device" class="input" placeholder="填寫(xiě)設(shè)備（電氣）")
      .line
    .row.active
      span(class="title") 設(shè)備 (機(jī)械) (min)
      .right
        input(type="number" v-model="bean.mach_device" class="input" placeholder="填寫(xiě)設(shè)備（機(jī)械）")
      .line
    p 獨(dú)自一行
    .showSpan
      span  也是一行
    .save
      .button(@click="addData()") 保存

</template>

樣式代碼，是用stylus實(shí)現(xiàn)的，你們也可以用傳統(tǒng)的方式實(shí)現(xiàn)，但是pug搭配stylus非常方便，兩者都不用寫(xiě)一些多余的代碼。

<style lang="stylus" scoped>
  row()//通用方法，可以定義多個(gè)在下面調(diào)用
    display flex
    flex-direction row
  lineStyle()//通用方法2 如果是拷貝這些代碼注意第一個(gè)方法以下的代碼空格可能會(huì)亂，導(dǎo)致樣式不對(duì)，注意對(duì)比
    height 1px
    background-color #EEEEEE
    position absolute
    width 100%
    bottom 0px
    left 10px

  .page
    width 100%
    height 100%
    overflow-x hidden
    padding-bottom 62px
    .row
      position relative
      row()
      align-items center
      padding 12px 10px
      .title
        color #333333
        font-size 14px
      .right
        flex 1
        display flex
        flex-direction row-reverse
        flex-wrap wrap
      .line
        lineStyle()
      &.active
        padding 0 10px
      .date
        color #666666
        font-size 16px
      .dateIcon
        width 5px
        height 10px
        margin-top 4px
        margin-left 6px
    p
      background firebrick
    .showSpan
      width 100%
      span
        background green
    .button
      border 1px solid #1E9AFF
      color #1E9AFF
      padding-left 15px
      padding-right 15px
      height 24px
      background-color #fff
      display flex
      justify-content center
      align-items center
      font-size 14px
      border-radius 4px
      margin-left 10px
      margin-top 5px
    .input
      font-size 14px
      text-align right
      height 45px
    .save
      width 100%
      bgf()
      position fixed
      bottom 0
      wh 100% 52px
      font-size 14px
      display flex
      justify-content flex-end
      border-top 1px solid #EEEEEE
      .button
        display flex
        justify-content center
        align-items center
        height 28px
        width 80px
        margin 12px 28px
        background-color #1E9AFF
        color #fff
        border null
        border-radius 16px
</style>

對(duì)于stylus的使用特點(diǎn)

  1. class的名字前面用.開(kāi)頭，在下一行縮進(jìn)兩格開(kāi)始寫(xiě)樣式，這個(gè)class的子布局的名字聲明和他的樣式的縮進(jìn)保持一致，子布局樣式實(shí)現(xiàn)又在下一行并且縮進(jìn)兩個(gè)單元格進(jìn)行，說(shuō)的很抽象，看上面代碼就明白了。
  2. 可以定義通用方法，除了定義在當(dāng)前的style里面(demo里面有)，也可以定義一個(gè)全局的，這個(gè)就不細(xì)說(shuō)了。
  3. &符號(hào)是代表當(dāng)前這一層的上面一層的名字,切割要用.來(lái)切割，好處是代碼清晰
    例如上面pug實(shí)現(xiàn)的html寫(xiě)的是
<template lang="pug">
  .main_header 頭部布局
    .main_header.left  左邊布局
    .main_header.right 右邊布局
</template>

<style lang="stylus">
  .main_header
    background white
    &.left
    &.right
</style>

& 就是 .main_header 所以&.left 就是.main_header.left

  1. 樣式動(dòng)態(tài)改變用:class輔助實(shí)現(xiàn)：
<template lang="pug">
  button(class="button_style" :class="{special_style: isSpecialStyle}" @click="changeStyle()")  點(diǎn)擊改變樣式
</template>


<script>
  export default {
    data() {
      return {
        isSpecialStyle:false
      }
    },
    method:{
      changeStyle() {
        // 通過(guò)控制這個(gè)變量確定是否使用special_style
        this.isSpecialStyle = !this.isSpecialStyle
      }
    }
  }
</script>

<style scoped lang="stylus">
 .button_style
     width 90px
     height 36px
     padding-left 2px
     padding-right 2px
     border-radius 26px
     font-size 12px
     color rgba(255,255,255,1)
     line-height:17px;
     background #FFFFFF
     border:1px
     &.special_style
        background #4472C5
        border:1px solid #4472C5

</style>
***5.3 ***

CSS語(yǔ)法補(bǔ)充

padding是上右下左的順序，有四種寫(xiě)法：

padding:10px; 意思是上下左右值全是10px
padding:5px 10px; 意思是上下為5px，左右為10px;
padding:1px 2px 3px 4px; 這個(gè)寫(xiě)法意思是：上為1px，右為2px，下為3px，左為4px
padding:5px 10px 7px; 這種寫(xiě)法意思是：上為5px，左右為10px，下為7px

注意：android里面都是固定的寫(xiě)法左右上下，只有兩種寫(xiě)法：

padding:10px;意思是左上右下值全是10px
padding:1px 2px 3px 4px; 這個(gè)寫(xiě)法意思是：左為1px，上為2px，右為3px，下為4px

js常用方法補(bǔ)充：

// 深度復(fù)制對(duì)象方法
copy(obj){
        let copyObj = {}; //最初的時(shí)候給它一個(gè)初始值=它自己或者是一個(gè)json
        for(let name in obj){
          if(typeof obj[name] === "object"){ //先判斷一下obj[name]是不是一個(gè)對(duì)象
            copyObj[name]= (obj[name].constructor===Array)?[]:{}; //我們讓要復(fù)制的對(duì)象的name項(xiàng)=數(shù)組或者是json
            this.copy(obj[name],copyObj[name]); //然后來(lái)無(wú)限調(diào)用函數(shù)自己 遞歸思想
          }else{
            copyObj[name]=obj[name];  //如果不是對(duì)象，直接等于即可，不會(huì)發(fā)生引用。
          }
        }
      return copyObj; //然后在把復(fù)制好的對(duì)象給return出去
     },
// 淺復(fù)制，這個(gè)賦值的是地址，會(huì)跟著變。
Var newObj = Oldobj
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容