vue的小技巧

一 获取元素样式

1.通过ref获取dom元素
const testRef = this.$refs.test
2.再获取元素样式
getComputedStyle(testRef)

二 实现数据获取到之前有一个loading状态展示

1. 写一个loading的vue组件，里面放上loading图片，调整样式
2. 将loading组件引入到需要使用的组件上，根据获取到后端返回数据的状态，
   用v-show判断是否展示该loading组件

三：事件代理（v-for外面也可以获取for循环的index）

1. v-for中写一个自定义事件： :data-index="index"
2. v-for外层写一个点击事件 @click="onClick"
3. methods中写一个方法：
    onClick（e）{
        e.target.getAttribute('data-index')
    }

四：获取组件渲染后的DOM元素节点

this.$refs.test.$el

五：获取url参数：

window.location.search

六 减少DOM操作：使用文档碎片流

通过for循环5次 创建dom元素并将元素html内容追加到dom元素上就可以使用这个方法 document.createDocumentFragment()

最后：list.appendchild(fragment)
操作dom从5次 变成 1次

七 使用伪元素扩大点击区域

1. 元素本身样式：  position:relative
2. 伪元素： 
            after:content:'',
            position:absoult;
            top:-10px;
            left:-10px;
            bottom:-10px;
            right:-10px;

八 图片自适应：保持宽高比 4:3 这样写

 1. 父容器：position:relative  width：100% padding-bottom：75%
 2. 图片容器： width：100% height：100% position：absoulte
 

九 动态组件 循环后端返回的数据：按照后端返回的数据顺序展示

 假如顺序是这样的：图片 文字 图片 或 文字 文字 图片
  <div v-for="item in productData" :key="item.id">
    <!-- My${item.type} 的值要和组件的标签名一致 -->
    <compoment :is="`My${item.type}`"></compoment>
</div>

十 异步组件

  如果通过条件判断为true之后才加载对应的组件，在 components引入组件的时候才加载：
  components:{
      Test:()=>import(/* webpackChunkName:"group-foo" */ .'components/Test')
  }
  

十一： 混入mixin

  1.在components目录下创建一个mixin.js文件（可以写多个这种js） 里面写的数据是：将组件 A 和 B 的公共数据 data methods mounted
  2. 然后在A组件引入 import mixin from './mixin.js'
  使用方式：
     mixins:[mixin]