由于之前重装系统导致VScode崩掉，使项目的进度暂时停滞了一段时间，今天我们装好了VScode，终于又可以开始干活了！那么今天我们先试着把一些部分用组件化的写法代替原始写法，并试着获取到推荐歌单。
抽离模版写法的注意事项
给template加id！
这点我最开始没注意到，只给里面的div加了id，结果瞬间崩掉…
这里还要注意一个问题，就是模版的注册一定要写在vue实例的上边，不然会报错，另外注意挂载点的闭合范围，有时如果在编写的途中不小心删掉了后面的div，系统会自动在Script标签的后面给你默认加上一个div，导致报错。
还有个解决了但没搞清楚原理的问题，就是在vue挂载点下使用li标签会报错要求验证这个组件的正确性，但换成ol标签，ul标签就不会报错。
渲染组件的注意事项
加上了axios后我们利用借口拿到数据后，组件报错了，这其实是正常现象，因为我们还没有设置组件间的通信传值，为了在此时便于调试，我们现将组件部分注释掉，只留下一个
当我们拿到歌单数据后，发现这个数据是一个数组对象的形式，这时候我们只要添加索引再用点语法就可以拿到我们需要的数字，如果需要重复取用可以考虑使用for循环或foreach遍历取出。
渲染封面时注意，src里面写我们data里注册的对应名称，右侧要加上：，不然获取不到，这是因为在vue中，加冒号就会把后面的东西当成变量来处理，没有加的话就默认是一个路径或者字符串。
template标签一定要写在挂在点以外！！！！！！！，不然标签不会生效，模版会在挂载点内显现，而且会直接继承父组建的data属性！！！
另外，我们使用网易云的接口，会传给我们数量庞大的各种数据，我们需要找出我们需要的部分，为此，我们可以使用for循环拿出这个数组对象的一部分，行成一个小数组对象，这时，我们就可以在模版上使用v-for来遍历这个数组，到我们需要的信息。
<template id="songsheet0"> <span> <div id="songsheet" v-for="item in sheetarr0"> <img id="sheetimg" :src="item.coverImgUrl" alt=""> <div>{{item.name}}</div> </div> </span> </template>
注意这里我们绑定循环的其实是组件的props数据，因为子组件不能直接调用父组件的数据，所以我们要先将父组件的值绑定给子组件
<sheet :sheetarr0="sheetarr"></sheet>
const sheet = { template: '#songsheet0', props: ['sheetname', 'sheetimg', 'sheetarr0'], data() { return {} }, methods: {} }
当我们写完后发现有一个小问题，就是第一个组件会下沉一点
最开始我以为是上面某个板块挤压造成的，于是用二分法注释，但没有找到问题，后来我发现只有第一个是一行文字，其他的都是两行，而且只有第一行下沉，于是联想到了inline-block的原因。HTML中，空格符，换行符都会被解析为空白符并占据空间，而第一个由于文本只有一行，少了一个换行符，也就相当于高度与其他三个不同，所以使用inline-block进行排列时会乱掉。
解决方法也很简单，只要设置垂直排列，并让他们顶部对齐就能解决这个问题。
vertical-align: top;