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

另外，

的class和id属性写法最简单，可能是因为这个是html最常见的标签，所以他不需要加前缀，直接这样

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

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

对于stylus的使用特点

1. class的名字前面用.开头，在下一行缩进两格开始写样式，这个class的子布局的名字声明和他的样式的缩进保持一致，子布局样式实现又在下一行并且缩进两个单元格进行，说的很抽象，看上面代码就明白了。
2. 可以定义通用方法，除了定义在当前的style里面(demo里面有)，也可以定义一个全局的，这个就不细说了。
3. &符号是代表当前这一层的上面一层的名字,切割要用.来切割，好处是代码清晰
   例如上面pug实现的html写的是

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

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

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