5.pug用法：
5.1層級:
需要按照階梯層級來寫pug代碼烫堤，例如Html標簽肯定包裹了Head和body標簽，那html標簽在第一行，head和body就必須在第二,三行，而且要縮進兩個空格寫佳晶，這里的head和body是同級的，所以他們必須保持一致的縮進
// 傳統(tǒng)寫法
<html>
<head></head>
<body>
<h1></h1>
<p></p>
<p></p>
<button></button>
</body>
</html>
// pug寫法
html
head
body
h1
p
p
button
比較得出pug寫法很簡潔佛吓，而且不需要閉口，傳統(tǒng)的必須用</>來閉口垂攘。
5.2 id和class
class用.表示,id用#表示
// 傳統(tǒng)寫法
<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寫法
html
head
body
h1#pageTitle This Is Page Title
p.top-p
嘿嘿嘿
.bottom-p
哈哈哈
另外维雇，<div></div>的class和id屬性寫法最簡單，可能是因為這個是html最常見的標簽晒他，所以他不需要加前綴吱型，直接這樣
<div id = "div-id">哼哼</div>
<div class="display-div">哈哈</div>
// pug寫法
.div-id
.display-div
5.3 屬性寫在圓括號里
傳統(tǒng)html寫法
<div class = "container">
<input type="number" v-model="mName" class="input_name" placeholder="請輸入用戶名"/>
<button @click="clickSubmit()" class="btn_submit">提交</button>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"/>
</div>
pug寫法
.container
input(type="number" v-model="mName" class="input_name" placeholder="請輸入用戶名字")
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等等，直接寫代表控件的名字陨仅，在圓括號里面寫屬性
2.div肯定是.class名字開頭津滞，但是傳統(tǒng)控件也可以手動加class名字和id名字，方便其它地方使用
實際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") 停機總時長 (min)
.right
input(type="number" v-model="bean.total_time" class="input" placeholder="填寫停機總時長")
.line
.row.active
span(class="title") 設備 (電氣) (min)
.right
input(type="number" v-model="bean.elec_device" class="input" placeholder="填寫設備（電氣）")
.line
.row.active
span(class="title") 設備 (機械) (min)
.right
input(type="number" v-model="bean.mach_device" class="input" placeholder="填寫設備（機械）")
.line
p 獨自一行
.showSpan
span 也是一行
.save
.button(@click="addData()") 保存
</template>
樣式代碼灼伤，是用stylus實現(xiàn)的触徐，你們也可以用傳統(tǒng)的方式實現(xiàn)，但是pug搭配stylus非常方便狐赡，兩者都不用寫一些多余的代碼撞鹉。
<style lang="stylus" scoped>
row()//通用方法，可以定義多個在下面調(diào)用
display flex
flex-direction row
lineStyle()//通用方法2 如果是拷貝這些代碼注意第一個方法以下的代碼空格可能會亂颖侄，導致樣式不對鸟雏，注意對比
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>
對于stylus的使用特點
- class的名字前面用.開頭，在下一行縮進兩格開始寫樣式览祖，這個class的子布局的名字聲明和他的樣式的縮進保持一致孝鹊，子布局樣式實現(xiàn)又在下一行并且縮進兩個單元格進行，說的很抽象展蒂，看上面代碼就明白了又活。
- 可以定義通用方法苔咪，除了定義在當前的style里面(demo里面有)，也可以定義一個全局的皇钞，這個就不細說了悼泌。
- &符號是代表當前這一層的上面一層的名字,切割要用.來切割，好處是代碼清晰
例如上面pug實現(xiàn)的html寫的是
<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
- 樣式動態(tài)改變用:class輔助實現(xiàn)：
<template lang="pug">
button(class="button_style" :class="{special_style: isSpecialStyle}" @click="changeStyle()") 點擊改變樣式
</template>
<script>
export default {
data() {
return {
isSpecialStyle:false
}
},
method:{
changeStyle() {
// 通過控制這個變量確定是否使用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語法補充
padding是上右下左的順序夹界，有四種寫法：
padding:10px; 意思是上下左右值全是10px
padding:5px 10px; 意思是上下為5px馆里，左右為10px;
padding:1px 2px 3px 4px; 這個寫法意思是：上為1px，右為2px可柿，下為3px鸠踪，左為4px
padding:5px 10px 7px; 這種寫法意思是：上為5px，左右為10px复斥，下為7px
注意：android里面都是固定的寫法左右上下营密，只有兩種寫法：
padding:10px;意思是左上右下值全是10px
padding:1px 2px 3px 4px; 這個寫法意思是：左為1px，上為2px目锭，右為3px评汰，下為4px
js常用方法補充：
// 深度復制對象方法
copy(obj){
let copyObj = {}; //最初的時候給它一個初始值=它自己或者是一個json
for(let name in obj){
if(typeof obj[name] === "object"){ //先判斷一下obj[name]是不是一個對象
copyObj[name]= (obj[name].constructor===Array)?[]:{}; //我們讓要復制的對象的name項=數(shù)組或者是json
this.copy(obj[name],copyObj[name]); //然后來無限調(diào)用函數(shù)自己 遞歸思想
}else{
copyObj[name]=obj[name]; //如果不是對象，直接等于即可痢虹，不會發(fā)生引用被去。
}
}
return copyObj; //然后在把復制好的對象給return出去
},
// 淺復制，這個賦值的是地址奖唯，會跟著變惨缆。
Var newObj = Oldobj
