html引入stylus,Web使用Pug与Stylus

5.pug用法：

5.1层级:

需要按照阶梯层级来写pug代码，例如Html标签肯定包裹了Head和body标签，那html标签在第一行，head和body就必须在第二,三行，而且要缩进两个空格写，这里的head和body是同级的，所以他们必须保持一致的缩进

// 传统写法

// pug写法

html

head

body

h1

p

p

button

比较得出pug写法很简洁，而且不需要闭口，传统的必须用>来闭口。

5.2 id和class

class用.表示,id用#表示

// 传统写法

This Is Page Title

嘿嘿嘿

哈哈哈

// pug写法

html

head

body

h1#pageTitle This Is Page Title

p.top-p

嘿嘿嘿

.bottom-p

哈哈哈

另外，

哼哼

哈哈

// pug写法

.div-id

.display-div

5.3 属性写在圆括号里

传统html写法

提交

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部分代码

.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()") 保存

样式代码，是用stylus实现的，你们也可以用传统的方式实现，但是pug搭配stylus非常方便，两者都不用写一些多余的代码。

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

对于stylus的使用特点

class的名字前面用.开头，在下一行缩进两格开始写样式，这个class的子布局的名字声明和他的样式的缩进保持一致，子布局样式实现又在下一行并且缩进两个单元格进行，说的很抽象，看上面代码就明白了。

可以定义通用方法，除了定义在当前的style里面(demo里面有)，也可以定义一个全局的，这个就不细说了。

&符号是代表当前这一层的上面一层的名字,切割要用.来切割，好处是代码清晰

例如上面pug实现的html写的是

.main_header 头部布局

.main_header.left 左边布局

.main_header.right 右边布局

.main_header

background white

&.left

&.right

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

样式动态改变用:class辅助实现：

button(class="button_style" :class="{special_style: isSpecialStyle}" @click="changeStyle()") 点击改变样式

export default {

data() {

return {

isSpecialStyle:false

}

},

method:{

changeStyle() {

// 通过控制这个变量确定是否使用special_style

this.isSpecialStyle = !this.isSpecialStyle

}

}

}

.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

***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