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

v-bind
директива
полная синхронизация

она позволяет связывать какие-то данные с каким-то конкретным компонентом.
на примере input-а v-bind:value=»ИмяМодели»

На примере в input-aх всегда будет находится то значение, которое находится в наших моделях

при написании что то в input модель не изменяется тогда как если менять саму модель input меняется.
мы модель забайдили через v-bind, но ни как не отслеживаем изменение в input-те. Для этого надо подписаться на событие @input и на прямую из input-a уже забирать value введённое значение и поэтому создадим для обработки input-a соответствующую функцию, в которой через event.target получаем введённые данные, которые можем поместить в соответствующую переменную (например this.title)

Добавление поста через кнопку (функцию)

к кнопке привязываем прослушивание click c вызовом функции

@submit.prevent

директива отменяет действие по умолчанию кнопки submit

при добавлении поста через кнопку страница обновляется и мы пост теряем.
Это стандартное поведение браузера на действие submit

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

<input 
type="text" 
v-bind:value="title"
@input="title=$event.target.value" прямое изменение
@input="inputTitle" через функцию изменение
class="input"
placeholder="Название">

<input 
type="text" 
v-bind:value="body"
@input="body=$event.target.value"
placeholder="Описание">

<button class="btn" @click="createPost">Создать</button>
</form>
<div class="post" v-for="post in posts">
 <div><strong>Название:</strong> {{post.title}}</div>
 <div><strong>Описание:</strong> {{post.body}}</div>
</div>
<div>
</template>

<script>
export default{

data(){
return {
posts:[
{id:1,title: 'Javascript', body: 'Описание поста'},
{id:2,title: 'Javascript 2', body: 'Описание поста 2'},
{id:3,title: 'Javascript 3', body: 'Описание поста 3'},
{id:4,title: 'Javascript 4', body: 'Описание поста 4'},
]
}
}
methods:{
 createPost(){
 const newPost={
  id:Date.now(),уникальный из даты
  title:this.title,
  body:this.body,
 }
 добавление в массив через push
 this.posts.push(newPost);
 очистка текста после добавления
 this.title='';
 this.body='';
}
 inputTitle(event){
  this.title = event.target.value;
} 
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.post{
 padding: 15px;
 border: 2px solid teal;
 margin-top:15px; 
}

.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.app{
 padding: 20px;
}

.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>