Директива v-model в Vue.js?

Frontend developer Vue.js
1

Подскажите пожалуйста, за что отвечает данная директива, что с помощью неё можно сделать, и в каких случаях использовать, было бы очень классно если бы с примером кто то показал и объяснил, заранее благодарю за помощь)

2

Эту директиву используют для двунаправленного связывания данных с элементами форм, такими как input, select и тд. 

var dynamic_message = new Vue({

    el: '#dynamic_message',

    data: {

        saySomething: 'Привет, Vue!'

    }

})

<div id="dynamic_message">

    {{ saySomething }}

    <input v-model="saySomething" placeholder="Input something">

По сути v-model это синтаксический сахар для обновления данных в элементах ввода, начальное состояние нужно объявить на стороне javascript, вот похожий пример но уже с использованием textarea:

<div id="dynamic_message">

    Многострочное сообщение:

    <p style="white-space: pre-line;">{{ message }}

    


    <textarea v-model="dynamic_message" placeholder="Введите пару строк">