做项目的细节

1.sass的语法

如果要添加伪类 &::
注意伪类一定要添加content:' '占位
使用sass封装css语法：
   sass文件： 
       @文件名 方法名($参数名:默认值){
           
       }
   使用方法：
       import 'sass文件路径';
       @include 方法名(参数值);
 定义方法和变量的sass文件每个页面都要单独引用，注意引用的关系和先后顺序，被引用的先引入
 在app.vue里 引入的样式文件只要不加scoped就是全局样式
 如何使用封装的思想去写样式：参考btn

2.轮播图swiper插件的使用

（版本swiper5.3.6,vue-awesome-swiper4.0.4）
 在页面上引入插件：
     import {Swiper,SwiperSlide} from 'vue-awesome-swiper'
     import 'swiper/css/swiper.css'
     components:{
         Swiper,
         SwiperSlide
     }
 在页面上使用：
     <swiper :options="swiperOption">
         <swiper-slide>
             
         </swiper-slide>  //for循环循环出每一项
         <div class="swiper-pagination" slot="pagination"></div>
         <div class="swiper-button-prev" slot="button-prev"></div>
         <div class="swiper-button-next" slot="button-next"></div>  
         （注意：在vue中箭头和分页器要使用插槽的方式才会显示）
     </swiper>
data里配置参数：(参数查看api)
    //首屏轮播样式
    swiperOption:{
        loop: true,  //无限循环
        autoplay:true,   //自动播放
        navigation: {   //配置箭头点击
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        effect: 'cube',  //配置立体效果
        pagination: {
            el: '.swiper-pagination',  //配置分页器
            clickable :true, //配置分页器点击播放
        }
    }
    //旋转木马样式
    swiperOption:{
        slidesPerView : 3,   //一次显示三张图片
        slidesPerGroupSkip: 3,  //分成三组
        autoplay:true,  //自动播放
        pagination: {  //分页器
            el: '.swiper-pagination',
            clickable :true,
        },
    }

3.vue页面如何跳转路由

this.$router.push('路由path')

4.vue过滤器的使用

filters:{
    方法名(val){
        处理
        return val;
    }
}
页面 {{变量名|过滤器方法名}}

5.class如何动态赋值

:class="{key:value}", key是类名，value是ture和false
:class="[{key:value},{key,value}]"  多个class类名的时候

6.slice和splice的区别是

slice不会改变原数组 splice会改变原数组 
切割一个二维数组：that.phoneList = [res.list.slice(0,4),res.list.slice(4,8)]

7.vue中父子组件之间的传值

子组件向父组件传值：通过props属性接收 
    <父组件 属性名="属性值"></父组件>
    props:{
        属性名:{
            type:String,
            default:'1'
        }
    }
父组件向子组件传值：
    @click="$emit('方法名')" 
    @方法名=""

8.slot插槽的使用

父组件:<slot name="body"></slot> 
子组件：<template v-slot:body></template>

9.如何让一个正方形在垂直方向和水平方向居中

先定位上下左右50%，再上下左右平移自身的一半 
transform:translate(-50%,-50%);