Недавний паттерн, ставший популярным в мире реактивных фреймворков: CSS-модули. Фронтенд-разработка всегда сталкивается с проблемой конфликтующих имен классов CSS, плохо структурированный код БЭМ и запутанные структуры файлов CSS. Компоненты Vue помогают решить эту проблему, будучи модульными они позволяют вам писать CSS, который будет генерировать уникальные имена классов для конкретного компонента во время компиляции.
Чтобы включить эту функцию во Vue, вам нужно будет добавить атрибут module в секцию style и ссылаться на стили, используя :class и $style.
Синтаксис <class name>:
<template>
<div :class="$style.container">CSS modules</div>
</template>
<style module>
.container {
width: 100px;
margin: 0 auto;
background: green;
}
</style>После того, как вы eуказали секции style атрибут - module, движок Vue предоставит вам $style объект, содержащий все определенные селекторы в качестве объектов для использования в разделе template и this.$style для использования в секции script компонента.
В предыдущем примере вы привязываете стили CSS, определенные для селектора .container с помощью $style.container.
Если бы вы просмотрели дерево DOM, этот класс имел бы называние в стиле _container_12nn4_3. Если бы вы создали несколько компонентов, которые имели
такой же класс - container, но имел бы другие стили, то они бы не конфликтовали, так как к ним применен, уникальный идентификатор.
Упражнение
Создайте и импортируйте компонент, как это показано в упражнении.
Затем создайте скелет компонента, используя такие секции как - template, script, style.
Секция template:
<template>
<div>
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: 'CSS module component!',
subtitle: 'The fourth exercise',
}
},
}
</script>И добавьте стилей в секцию style, указав ее с атрибутом module:
<style module>
h1,
h2 {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
}
.title {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
color: #2c3e50;
margin-top: 60px;
}
.subtitle {
color: #4fc08d;
font-style: italic;
}
</style>Чтобы использовать модули CSS в своем шаблоне, вам необходимо привязать их к элементам HTML с помощью
синтаксиса :class, который аналогичен директиве v-bind:class:
<h1 :class="$style.title">{{ title }}</h1>
<h2 :class="$style.subtitle">{{ subtitle }}</h2>В этом упражнении мы увидели, как использовать модули CSS в ваших компонентах Vue, и чем этот подход отличается от атрибута scoped на теге style.
Далее, мы попытаемся применить на практике, знания которые получили в некоторых, предыдущих главах.