这篇文章我们来接着讲使用了scoped后，vue是如何给html增加自定义属性data-v-x

在使用Vue.js开发组件时，可以通过给<style>标签添加scoped属性来实现样式的局部作用域。这样做可以防止样式泄漏到其他地方，减少样式冲突。

为了实现样式的局部作用域，Vue会给DOM中所有的元素添加一个独特的数据属性，比如data-v-x，其中x是一个唯一的标识符。这个属性会被用作CSS选择器的一部分，确保只有被scoped样式所影响的元素会被应用上相应的样式。

以下是一个简单的Vue组件示例，展示了如何使用scoped样式：

<template>
  <div class="example">
    <p>This paragraph will be green.</p>
    <p>This paragraph will be red.</p>
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example p:first-child {
  color: green;
}
 
.example p:last-child {
  color: red;
}
</style>

在这个例子中，虽然两个<p>标签都有.example类，但由于style标签包含了scoped属性，所以只有被scoped样式所影响的元素会被应用上相应的样式。即第一个<p>标签会变绿色，第二个<p>标签会变红色。

注意，虽然scoped样式可以防止样式泄漏，但它也有一些限制，例如无法外部给子组件中的DOM添加样式，因为这些样式选择器都会被特别处理，只适用于组件内部。