Vue.js에서는 scoped스타일에 대한 수정자로서, 상위 컴포넌트나 하위 컴포넌트의 스타일에 영향을 주지 않고 현재 컴포넌트의 범위 내에서만 스타일이 적용되도록 스타일의 범위를 제한하는 데 사용됩니다. 이 기능은 일반적으로 CSS 스타일 오염 문제를 해결하는 데 사용되며, 스타일이 현재 구성 요소의 DOM 요소에만 영향을 미치도록 합니다.
Scoped 스타일의 기본 사용법
Vue 구성 요소 <style>태그의 속성을 사용하면 scoped스타일을 현재 구성 요소의 범위로 제한할 수 있습니다. 샘플 코드는 다음과 같습니다.
<template>
<div class="app">
<h1>Vue Scoped Styles</h1>
<button @click="toggleColor">Toggle Color</button>
<p class="global-style">大家好，我是IT小辉同学！！！</p>
<p class="scoped-style">希望与大家一起学习，成长！！！</p>
</div>
</template>
<script>
export default {
data() {
return {
isRed: false,
};
},
methods: {
toggleColor() {
this.isRed = !this.isRed;
},
},
};
</script>
<style scoped>
/* Scoped styles */
p {
color: blue;
}
/* Global styles */
.global-style {
font-weight: bold;
}
/* Conditional styling */
.scoped-style {
color: red;
}
</style>
위 예에서 <style scoped>태그의 스타일은 <p>현재 구성 요소의 요소에만 적용되며 전역 스타일이나 다른 구성 요소의 요소에는 영향을 미치지 않습니다.
예 1: 조건부 스타일 바인딩
<template>
<div>
<p :class="{ 'red-text': isRed }">热爱，就要坚持，勇往直前！！！</p>
<button @click="toggleColor">相信梦想！！！</button>
</div>
</template>
<script>
export default {
data() {
return {
isRed: false,
};
},
methods: {
toggleColor() {
this.isRed = !this.isRed;
},
},
};
</script>
<style scoped>
.red-text {
color: red;
}
</style>
위의 예에서 <p>요소의 스타일은 isRed변수 값에 따라 변경됩니다. <p>이 스타일은 현재 구성 요소의 요소 에만 영향을 미치며 다른 구성 요소에는 영향을 미치지 않습니다.
예 2: 구성요소 중첩
<template>
<div>
<h2>把我的故事讲给你听。。。。。。</h2>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
<style scoped>
h2 {
color: blue;
}
</style>
이 예에서 상위 구성 요소의 스타일은 하위 구성 요소 내의 요소가 아닌 상위 ChildComponent구성 요소 내의 요소에만 영향을 미칩니다.
예시 3: 깊이 선택기
::v-deepVue에서는 또는 /deep/의사 클래스를 사용하여 하위 구성 요소의 스타일에 영향을 줄 수도 있습니다 . 예는 다음과 같습니다.
<template>
<div>
<h2>希望我们都能够勇敢一些。。。。。。</h2>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
<style scoped>
::v-deep h2 {
color: blue;
}
</style>
이는 하위 구성 요소 ChildComponent의 <h2>요소 스타일에 영향을 미칩니다.
위의 예는 사용 방법 scoped과 기능을 이해하는 데 도움이 되도록 매우 자세하게 설명되어 있습니다. scoped스타일은 구성 요소 스타일을 격리하는 Vue.js의 매우 유용한 기능으로, 구성 요소 스타일이 전역 스타일이나 다른 구성 요소에 영향을 미치지 않도록 하여 코드 유지 관리성과 재사용성을 향상시킵니다. 자주 이용하시고, 더 많은 정보를 얻으시길 바랍니다! ! !