Основы работы с CSS во Vue компонентах

Применение стилей CSS во Vue компонентах

Ну что ж, давайте рассмотрим, как мы можем работать со стилями оформления CSS каскадными таблицами стилей во Vue компонентах? 

Как можно оформлять какие-то элементы?

Первое, что нужно понимать, это то, что обычные атрибуты для элементов, которые мы используем в HTML разметке, такие как class или style, которые мы можем применять к различным элементам, мы точно также можем применять к различным элементам, которые находятся у нас в разделе template. 

<template>

   <div class="test"></div>

</template>

Например, мы можем написать класс "test" либо любой другой класс. Все работает также, как это делается в обычном HTML.

Элемент style Vue компонента

Для того, чтобы прописать значение какого-то класса, мы должны прописать это в специальном элементе нашего компонента, который называется style. В нём мы и прописываем все стили, которые есть в нашем компоненте. 

<style>
.test {
  color: red;
}
</style>

Например, стиль "test" и прописываем, что у него будет цвет текста красный. И видим, что действительно, наш элемент стал красным. 

Инлайновые стили CSS

Кроме атрибута класс, мы можем добавлять стандартный атрибут, такой как стили CSS - это атрибут style. И точно также здесь пишем все необходимые свойства, которые нам нужно применить к этому элементу. 

<div class="test" style="color:blue;"></div>

И видим, что действительно, всё это у нас успешно применяется. Что касается стандартных атрибутов стиля и класса, которые мы используем для обычных HTML элементов, всё точно также применяется для элементов, которые находятся в блоке template для Vue компонентов. 

Особенности применения стилей CSS во Vue

Но, здесь есть ряд особенностей, которые мы с вами будем рассматривать в следующих видео по поводу работы со стилями CSS во Vue компонентах. 

Если вы хотите каким-то образом эти стили кастомно настроить, связать с уровнем данных, передавать стили от одного компонента к другому, то здесь есть ряд особенностей, которые мы должны с вами учитывать. 

Об этом мы с вами уже и поговорим в следующих видео.