深入探索VueJS Scoped CSS 实现原理

下面是深入探索VueJS Scoped CSS实现原理的攻略:

前言

在Vue.js中,我们通过<style>标签来声明组件的样式,但是为了避免样式的污染(即样式影响到了其他组件),Vue.js提供了Scoped CSS(作用域CSS)的支持。

Scoped CSS是指将组件的样式限制在组件内部,不影响其他组件的样式,并且保证组件内部的样式可以覆盖全局样式。

实现原理

Vue.js的Scoped CSS主要通过给组件标签内部的元素/属性添加独特的标识,从而实现样式作用域的限制。

具体来说,Vue.js将每个组件编译成一个渲染函数,并且给渲染函数内部的元素 / 属性添加如下两个属性:

  • data-v-[hash]:唯一标识符,也称为命名空间标识符。[hash]是一个随机字符串,用来保证每个组件的标识符都是唯一的。
  • data-v-[hash]:[style-id]:样式标识符,也称为类名。[style-id]是一个自增的数字,用来标识组件内不同的样式。

这样,我们就可以使用CSS选择器来指定组件内的特定元素/属性,并保证样式只作用于该组件内部。

示例说明

示例1:单文件组件中的Scoped CSS

假设我们有一个单文件组件MyComponent.vue

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <p class="content">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      msg: 'Hello, World!',
      content: 'This is my content'
    }
  }
}
</script>

<style scoped>
.wrapper {
  border: 1px solid red;
}

h1 {
  font-size: 24px;
}

.content {
  font-size: 18px;
  color: blue;
}
</style>

在编译后,上述代码会被转换成以下代码:

<template>
  <div data-v-23e2c4d7 class="wrapper">
    <h1 data-v-23e2c4d7:data-v-1ec20eed> {{ msg }} </h1>
    <p data-v-23e2c4d7:data-v-2bb80a89 class="content"> {{ content }} </p>
  </div>
</template>

<script>
...
</script>

<style>
[data-v-23e2c4d7] .wrapper {
  border: 1px solid red;
}

[data-v-23e2c4d7] h1[data-v-1ec20eed] {
  font-size: 24px;
}

[data-v-23e2c4d7] .content[data-v-2bb80a89] {
  font-size: 18px;
  color: blue;
}
</style>

可以看到,每个元素/属性都被加上了data-v-[hash]data-v-[hash]:[style-id]两个属性。同时,我们在样式表中使用了选择器[data-v-[hash]][data-v-[hash]] [data-v-[hash]:[style-id]]来限制样式只作用于组件内部。

示例2:在组合组件中使用Scoped CSS

假设我们有两个组件Parent.vueChild.vue,其中Parent.vue包含一个Child.vue组件,并且为Child.vue添加了Scoped CSS。

Parent.vue

<template>
  <div class="wrapper">
    <Child />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style scoped>
.wrapper {
  border: 1px solid red;
}
</style>

Child.vue

<template>
  <div class="content">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      msg: 'I am child'
    }
  }
}
</script>

<style scoped>
.content {
  font-size: 18px;
  color: blue;
}
</style>

在编译后,我们可以看到编译结果如下:

Parent.vue

<template>
  <div data-v-4b869cfc class="wrapper">
    <Child data-v-4b869cfc></Child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style>
[data-v-4b869cfc] .wrapper {
  border: 1px solid red;
}
</style>

Child.vue

<template>
  <div data-v-7c24a973 class="content">
    <p data-v-7c24a973>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      msg: 'I am child'
    }
  }
}
</script>

<style>
[data-v-7c24a973] .content {
  font-size: 18px;
  color: blue;
}
</style>

可以看到,Parent.vueChild.vue组件都拥有各自的唯一标识符data-v-[hash],并且它们之间是相互独立的。因此,当我们在Child.vue中使用.content样式时,只会作用于Child.vue组件,不会影响Parent.vue组件。

结语

通过上述攻略,相信你已经了解了Vue.js Scoped CSS的实现原理。如果你想深入了解Vue.js Scoped CSS相关知识,可以参考官方文档中的Scoped CSS一章。同时,也可以多尝试一些编写Scoped CSS的示例,以加深自己的理解。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入探索VueJS Scoped CSS 实现原理 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • css布局两个button在同父标签中左右两侧分布的方法

    要实现在同一父标签中左右两侧分布两个button的布局,有多种方法可供选择。 下面是两个常用的方法: 方法一:使用float布局 使用float布局可实现左右两侧分布的效果。代码如下: <div class="btns-container"> <button class="left-btn">L…

    css 2023年6月11日
    00
  • 使用Div+CSS纯图片实现圆角矩形的方法小结

    对于该主题,“使用Div+CSS纯图片实现圆角矩形的方法小结”,我们需要分几个方面进行讲解: 理解圆角矩形的原理,确定页面需求; 基于需求,使用CSS设置对应的样式; 利用CSS Sprites技术实现纯图片圆角矩形; 在实际运用中优化处理。 下面就具体的讲一下。 圆角矩形的原理 圆角矩形是指矩形的四个边角被设计成圆弧的一种界面效果。实现圆角矩形的方法非常多…

    css 2023年6月10日
    00
  • css布局技巧css三角示例的巧妙运用

    CSS 三角形是一种常见的布局技巧,可以用于实现各种形状的元素,如箭头、标签等。以下是关于“CSS 布局技巧 CSS 三角示例的巧妙运用”的完整攻略。 步骤一:CSS 三角形的实现 CSS 三角形可以通过设置元素的边框和宽高为 0,然后利用边框的特性来实现。以下是一个示例: .triangle { width: 0; height: 0; border-to…

    css 2023年5月18日
    00
  • Webstorm常用快捷键备忘(Webstorm入门指南)

    Webstorm是一款非常强大的JavaScript IDE,快捷键是提高效率的重要手段。下面是Webstorm常用快捷键备忘: 编辑相关 Shift + Enter: 在当前行下面插入一行空白行。 Ctrl + D : 复制当前行,复制的行会粘贴在当前行下面。 Ctrl + Y : 删除当前行。 Ctrl + Z : 撤销上一步操作。 Ctrl + Shi…

    css 2023年6月9日
    00
  • 常用的新闻列表代码(ul/li布局方式)

    常用的新闻列表代码采用的是ul/li布局方式,是一个非常通用的排版方式。以下是使用该方式的标准代码示例: <ul> <li>新闻一</li> <li>新闻二</li> <li>新闻三</li> </ul> 在上面的代码中,<ul>表示无序列表,<…

    css 2023年6月10日
    00
  • HTML表格布局实例讲解

    HTML表格布局实例讲解 HTML表格是一种非常常见的布局方式,常用于展示数据等需要排列的内容,同时也可以用于网页的整体布局。在本篇文章中,我们将详细讲解HTML表格布局的使用方法和相关技巧。 基本语法 在HTML中,表格由<table>标签包裹,每行由<tr>标签包裹,每个单元格由<td>标签包裹。例如: <tab…

    css 2023年6月10日
    00
  • CSS Div网页布局中的结构与表现

    CSS Div 网页布局是目前网页布局中最常用的一种方式。它采用 CSS 样式表来实现网页的结构和表现的分离,使得开发者能够更好地掌控页面的格式和排版,让页面更加美观,易于阅读和使用。 CSS Div 网页布局中的结构与表现可以分为以下几个步骤: 1.用 HTML 创建页面结构。 首先,在 HTML 中创建基本的页面结构,包括 header、main、foo…

    css 2023年6月10日
    00
  • css图标制作教程制作云图标

    下面我会详细讲解如何制作云图标的完整攻略,包含以下几个步骤: 1. 准备工作 在制作过程中,我们需要准备两个东西,一是云的SVG图标文件,二是实现动画效果的CSS代码: (1)SVG图标文件: 首先需要使用Adobe Illustrator或其他矢量图形编辑软件,设计并导出一个云的SVG图标文件,示例如下: <svg width="24px&…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部