Vue scoped uslublar
Komponentdagi <style> tegi ichida yoki App.vue da belgilangan uslublar aslida barcha komponentlarda global miqyosda mavjud.
Stylingni faqat komponent bilan cheklash uchun biz ushbu komponentda scope atributidan foydalanishimiz mumkin: <style scoped>
Global uslublar
Har qanday *.vue faylida <style> tegi ichida yozilgan CSS global miqyosda ishlaydi.
Bu shuni anglatadiki, agar biz, masalan, bitta *.vue fayldagi <style> tegining ichida pushti fon rangiga ega bo‘lishi uchun <p> teglarini o‘rnatsak, bu loyihadagi barcha *.vue fayllardagi <p> teglarga ta’sir qiladi.
Misol
Ushbu ilovada bizda uchta *.vue fayli mavjud: App.vue va ikkita CompOne.vue va CompTwo.vue komponentlari.
CompOne.vue ichidagi CSS uslubi uchta *.vue fayldagi <p> teglariga ta’sir qiladi:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
Ko‘lamli uslublar
Bitta komponentdagi uslublar boshqa komponentlardagi elementlarning uslubiga ta’sir qilmasligi uchun biz <style> tegida "ko‘lamli" atributidan foydalanamiz:
Misol
CompOne.vue dagi <style> tegiga scoped atributi berilgan:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped>
p {
background-color: pink;
width: 150px;
}
</style>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!