Vue обеспечивает двустороннюю привязку данных, имея специальную директиву, которая
наблюдает за свойством данных в вашем компоненте Vue.
Директива v-model запускает обновление данных, когда целевое свойство данных изменяется в пользовательском интерфейсе.
Эта директива обычно полезна для элементов формы HTML, которым необходимо
отображать данные и изменять их реактивно — например, ввод, текстовое поле, радиокнопки и так далее.
Мы можем включить двустороннюю привязку, добавив директиву v-model в нужный нам элемент и привязать его к нужным данным из объекта data:
<template>
<input v-model="name" />
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>Связывание огромного количества данных с помощью v-model может повлиять на производительность вашего
приложения. Рассмотрите свой пользовательский интерфейс и разделите данные на разные компоненты или представления Vue. Данные в локальном состоянии data не являются неизменяемыми и могут быть переопределены в любом месте шаблона.
Создайте и импортируйте компонент, как показано в упражнении.
Создайте простую форму:
<template>
<div class="form">
<label>
Name
<input type="text" v-model="name" />
</label>
</div>
</template>Завершите привязку ввода текста, создав переменную реактивных данных с именем name в теге script:
<script>
export default {
data() {
return {
name: '',
}
},
}
</script>Затем создайте список - select, и также привяжите его к новой реактивной переменной - language:
<template>
<div class="form">
<label>
Name
<input type="text" v-model="name" />
</label>
<label>
Preferred JavaScript style
<select name="language" v-model="language">
<option value="Javascript">JavaScript</option>
<option value="TypeScript">TypeScript</option>
<option value="CoffeeScript">CoffeeScript</option>
<option value="Dart">Dart</option>
</select>
</label>
</div>
</template>А код в теге script, будет таким:
<script>
export default {
data() {
return {
name: '',
language: '',
}
},
}
</script>Под полями формы выведите значение имени и языка:
<template>
<section>
<div class="form">
<label>
Name
<input type="text" v-model="name" />
</label>
<label>
Preferred JavaScript style
<select name="language" v-model="language">
<option value="JavaScript">JavaScript</option>
<option value="TypeScript">TypeScript</option>
<option value="CoffeeScript">CoffeeScript</option>
<option value="Dart">Dart</option>
</select>
</label>
</div>
<ul class="overview">
<li><strong>Overview</strong></li>
<li>Name: {{ name }}</li>
<li>Preference: {{ language }}</li>
</ul>
</section>
</template>И добавте стили в секцию <style>
<style>
.form {
display: flex;
justify-content: space-evenly;
max-width: 800px;
padding: 40px 20px;
border-radius: 10px;
margin: 0 auto;
background: #ececec;
}
.overview {
display: flex;
flex-direction: column;
justify-content: space-evenly;
max-width: 300px;
margin: 40px auto;
padding: 40px 20px;
border-radius: 10px;
border: 1px solid #ececec;
}
.overview > li {
list-style: none;
}
.overview > li + li {
margin-top: 20px;
}
</style>Теперь можно увидеть, как работает наше приложение, указанные в input данные и данные выбранные внутри select теперь синхронизируются.
В этом упражнении мы использовали директиву v-model для привязки имени и
выпадающего списка к данным нашего локального состояния. Когда мы изменяем данные, они реактивно обновляются внутри элементов DOM, в которых мы
выводим данные значения.
Далее мы обсудим директиву v-for и различные подходы к обработке итеративных данных во Vue.