Автор: bo52

Рубрики
Vue project Vue.js

Удаление поста из списка

Для этого нужно в шаблон компонента PostItem добавить кнопку удаления.

Рубрики
Vue project Vue.js

Отдельно взятый пост

PostItem

Выделяется ещё один компонент
Возможно в какой то ситуации не потребуется отрисовывать список постов PostList, а нам потребуется отрисовывать отдельно взятый пост.

компонент должен принимать пропс как раз сам пост, где тип этого пропса является объект и он обязателен.

Рубрики
Vue project Vue директива Vue директива v-model Vue.js

Директива v-model

Директива v-model
PostForm

src\components\PostForm.vue 

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-model="post.title"
class="input"
placeholder="Название">

<input 
type="text" 
v-model:"post.body"
class="input"
placeholder="Описание">

<button 
class="btn"
вешаем слушатель события при нажатии на кнопку
@click="createPost"
>Создать</button>
</form>
</template>

<script>
export default{
data(){
return {
post{
title:'',
body:'',
}
}
}
methods:{
 createPost(event){
 this.post.id=Date.now();

 this.posts.push(newPost);
 this.title='';
 this.body='';
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>
Рубрики
Vue project Vue.js

Декомпозиция

Создаем переиспользуемые компоненты

можно чётко выделить компоненты, которые четко можно переиспользовать (пример добавлять на разные страницы)

  • создание поста
  • список постов

src\components
папка содержит компоненты

vbase и нажимаем Tab
сразу разворачивается соответствующая структура для IDE PHPStorm или WebStorm

Рубрики
Vue project Vue.js

Динамическое добавление, Двусторонние связывание

создание формы в шаблоне компонента с input и button, которая будет добавлять пост в массив