在网页上看到了data-v-xxxx是什么原因

在Vue开发中，会遇到html被浏览器解析后，在标签中出现’data-v-xxxxx’标记，如下：

<div data-v-fcba8876 class="xxx"></div>

原因：

1. <style scoped>

2. @media (min-width: 250px) {

3. .list-container:hover {

4. background: orange;

5. }

6. }

7. </style>

8.  

9. The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.

理解：

    这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的'data-v-xxx'标记
 

官方解释：https://vuejs.org/v2/guide/comparison.html#HTML-amp-CSS

参考文档：https://blog.csdn.net/fengjingyu168/article/details/79769608