5.pug用法：
5.1层级:
需要按照阶梯层级来写pug代码，例如Html标签肯定包裹了Head和body标签，那html标签在第一行，head和body就必须在第二,三行，而且要缩进两个空格写，这里的head和body是同级的，所以他们必须保持一致的缩进
// 传统写法
<html>
<head></head>
<body>
<h1></h1>
<p></p>
<p></p>
<button></button>
</body>
</html>
// pug写法
html
head
body
h1
p
p
button
比较得出pug写法很简洁，而且不需要闭口，传统的必须用</>来闭口。
5.2 id和class
class用.表示,id用#表示
// 传统写法
<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 属性写在圆括号里
传统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")
最后总结：
1.传统控件不需要. 例如input,button,img,textrea,p,span等等，直接写代表控件的名字，在圆括号里面写属性
2.div肯定是.class名字开头，但是传统控件也可以手动加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实现的，你们也可以用传统的方式实现，但是pug搭配stylus非常方便，两者都不用写一些多余的代码。
<style lang="stylus" scoped>
row()//通用方法，可以定义多个在下面调用
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的子布局的名字声明和他的样式的缩进保持一致，子布局样式实现又在下一行并且缩进两个单元格进行，说的很抽象，看上面代码就明白了。
- 可以定义通用方法，除了定义在当前的style里面(demo里面有)，也可以定义一个全局的，这个就不细说了。
- &符号是代表当前这一层的上面一层的名字,切割要用.来切割，好处是代码清晰
例如上面pug实现的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
- 样式动态改变用:class辅助实现：
<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项=数组或者是json
this.copy(obj[name],copyObj[name]); //然后来无限调用函数自己 递归思想
}else{
copyObj[name]=obj[name]; //如果不是对象，直接等于即可，不会发生引用。
}
}
return copyObj; //然后在把复制好的对象给return出去
},
// 浅复制，这个赋值的是地址，会跟着变。
Var newObj = Oldobj
网友评论