scoped
флаг говорит о том что стили будут применимы только этому компоненту и не будут доступны извне
для корневого компонента он не нужен
src\App.js
<template>
<div>
<div class="post">
<div><strong>Название:</strong> Пост о Javascript</div>
<div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>
<div class="post">
<div><strong>Название:</strong> Пост о Javascript</div>
<div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>
<div class="post">
<div><strong>Название:</strong> Пост о Javascript</div>
<div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>
<div>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>
<script>
export default{
data(){return {likes: 0,dislikes: 5}}
methods:{
addLike(){this.likes +=1;}
addDislike(){this.dislikes +=1;}
}
</script>
<style>
классическое обнуление
убрать отступы на странице
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.post{
padding: 15px;
border: 2px solid teal; темно зелёная рамка
margin-top:15px; отступ сверху
}
</style>