Vue에서 구성 요소 스타일 격리를 달성하기 위해 범위가 지정된 CSS를 사용하는 팁

범위가 지정된 CSS를 사용하여 Vue에서 구성 요소 스타일 격리를 구현하기 위한 팁

Vue는 널리 사용되는 JavaScript 프레임워크이며 구성 요소화된 구조는 프런트 엔드 개발 효율성을 가속화합니다. 동시에, 애플리케이션의 크기가 증가함에 따라 스타일 유지 관리가 더욱 어려워집니다. 이 경우 Vue는 구성 요소 스타일 격리를 달성하는 데 도움이 될 수 있는 범위 지정 CSS라는 간단하지만 강력한 기술을 제공합니다. 이 기사에서는 범위가 지정된 CSS 기술을 사용하여 구성 요소의 스타일 격리를 달성하는 방법을 살펴보겠습니다.

범위 CSS 소개

Vue에서는 레벨 3 CSS 선택기를 사용하여 구성 요소의 스타일을 개발할 수 있습니다. 아래와 같이

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style>
.my-component p {
  color: red;
}
</style>

이 코드는 my-comComponent라는 구성 요소를 생성하고 해당 구성 요소에서 레벨 3 CSS 선택기를 사용합니다. 스타일은 스타일 범위 지정이라는 기술을 사용하여 .my-comComponent 요소 내의 e388a4556c0f65e1904146cc1a846bee 요소에만 적용됩니다. 구성 요소 수가 증가하면 스타일 충돌이 발생할 수 있습니다. 두 구성 요소의 CSS 유형이 동일하여 잠재적인 표시 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 Vue는 스타일을 구성 요소의 범위로 제한할 수 있는 범위 지정이라는 키워드를 제공합니다. 아래와 같이

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

이 예에서는 스타일이 구성 요소 템플릿의 e388a4556c0f65e1904146cc1a846bee 요소에만 적용됩니다.

Note

• scoped CSS는 새로운 기술이 아니라 Vue의 애플리케이션입니다.
• scoped CSS는 스타일 태그에만 적용할 수 있는 범위 지정과 같은 의사 태그를 사용합니다.
• 범위가 지정된 CSS는 적용된 각 요소에 의사 클래스 태그를 추가하여 구현됩니다. 이 태그를 추가하면 여러 구성 요소에서 동일한 요소가 사용되는지 여부에 관계없이 스타일의 범위를 제한할 수 있습니다.

범위가 지정된 CSS 샘플 코드

범위가 지정된 CSS 기술을 시연하기 위해 두 가지 구성 요소가 포함된 샘플을 만듭니다. 각 구성요소에는 서로 다른 스타일이 포함됩니다.

먼저 버튼이 있는 양식의 스타일을 지정하는 첫 번째 구성 요소를 만듭니다. 이 구성 요소에서 버튼은 검정색 배경색과 굵은 테두리로 빨간색으로 표시됩니다.

<template>
  <div>
    <h3>Component 1</h3>
    <form class="my-form">
      <button class="my-button">Submit</button>
    </form>
  </div>
</template>

<style scoped>
.my-form button {
  background-color: black;
}

.my-form .my-button {
  color: red;
  background-color: white;
  border: 2px solid black;
  font-weight: bold;
}
</style>

다음으로 두 번째 구성 요소를 만듭니다. 이 구성 요소에는 입력 상자와 슬라이더가 있는 진행률 표시줄이 포함됩니다. 이 구성 요소에서는 진행률 표시줄이 녹색으로 표시되고 텍스트 입력 상자는 회색으로 설정됩니다.

<template>
  <div>
    <h3>Component 2</h3>
    <div class="progress">
      <input type="text" class="input-text">
      <div class="slider"></div>
    </div>
  </div>
</template>

<style scoped>
.input-text {
  color: gray;
}

.progress .slider {
  background-color: green;
  height: 10px;
  width: 50%;
}
</style>

이 샘플 코드에서는 범위가 지정된 CSS 기술을 사용하여 각 구성 요소의 스타일이 다른 구성 요소에 영향을 미치지 않도록 합니다. 이렇게 하면 각 구성 요소에 관련 스타일만 포함되고 다른 구성 요소의 영향을 받지 않게 됩니다.

요약

이 기사에서는 Vue의 범위 CSS 기술에 대해 논의했습니다. 이를 통해 구성 요소 내에서 스타일 범위를 지정할 수 있어 서로 다른 구성 요소 간의 스타일 충돌을 피할 수 있습니다. 이 문서의 팁을 사용하여 다음 Vue 프로젝트에서 구성 요소 스타일 격리를 구현하세요. 이렇게 하면 코드가 더욱 모듈화되고 유지 관리하기 쉬워집니다.

위 내용은 Vue에서 구성 요소 스타일 격리를 달성하기 위해 범위가 지정된 CSS를 사용하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!