Все, что вам нужно знать о Vue v-model
Vue v-model - это директива, которая обеспечивает двустороннюю привязку данных между входными данными и данными формы или между двумя компонентами.
Это простая концепция при разработке Vue, но для того, чтобы понять истинные возможности v-модели, нужно время.
К концу этого руководства вы узнаете все варианты использования Vue v-model и узнаете, как использовать ее в своих собственных проектах.
Готовый?
Я тоже. Приступим к кодированию.
Что такое Vue v-model?
Как мы только что обсуждали, Vue v-model - это директива, которую мы можем использовать в коде шаблона. Директива - это токен шаблона, который сообщает Vue, как мы хотим обрабатывать нашу DOM.
В случае v-модели он сообщает Vue, что мы хотим создать двустороннюю привязку данных между значением в нашем шаблоне и значением в наших свойствах данных.
Типичный вариант использования v-модели - проектирование форм и входов. Мы можем использовать его, чтобы наши элементы ввода DOM могли изменять данные в нашем экземпляре Vue.
Давайте посмотрим на простой пример, в котором для ввода текста используется v-модель.
<template>
<div>
<input
type='text'
v-model='value'
/>
<p> Value: {{ value }} </p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Hello World'
}
}
}
</script>Когда мы набираем текст в поле ввода, мы видим, что свойство данных меняется.
Идеально.
Разница между v-моделью и v-bind?
Директива, которая обычно включается в v-model, - это v-bind directive.
Разница между ними в том, что v-модель обеспечивает двустороннюю привязку данных.
В нашем примере это означает, что если наши данные изменяются, наши входные данные тоже изменятся, а если наши входные данные изменятся, наши данные тоже изменятся.
Однако v-bind связывает данные только в одну сторону.
Это полезно при создании четкого однонаправленного потока данных в ваших приложениях. Но вы должны быть осторожны при выборе между v-моделью и v-bind.
Модификаторы для v-модели
Vue предоставляет несколько модификаторов, которые позволяют нам изменять функциональность нашей v-модели.
Каждый из них может быть добавлен таким образом и даже может быть соединен вместе.
<input
type='text'
v-model.trim.lazy='value'
/>.ленивый
По умолчанию v-модель синхронизируется с состоянием экземпляра Vue (свойствами данных) при каждом событии ввода. Сюда входят такие вещи, как получение / потеря фокуса, размытость и т. Д.
.lazy modifier изменяет нашу v-модель, поэтому она синхронизируется только после событий изменения.
Это уменьшает количество попыток синхронизации нашей v-модели с нашим экземпляром Vue, а в некоторых случаях может повысить производительность.
.количество
Часто наши входные данные будут автоматически вводить входные данные как String - даже если мы объявляем, что наши входные данные являются номером типа.
Один из способов убедиться, что наше значение обрабатывается как число, - это использовать модификатор .number.
Согласно документации Vue, если ввод изменяется и новое значение не может быть проанализировано parseFloat(), то вместо этого возвращается последнее действительное значение ввода.
<input
type='number'
v-model.number='value'
/>.отделка
Подобно методам обрезки в большинстве языков программирования, модификатор .trim удаляет начальные или конечные пробелы перед возвратом значения.
Использование Vue v-model в пользовательских компонентах
Хорошо, теперь, когда мы знаем основы v-модели внутри форм / входных данных, давайте рассмотрим интересное использование v-модели - создание двусторонней привязки данных между компонентами.
В Vue привязка данных состоит из двух основных этапов:
- Передача наших данных от нашего родителя
- Генерация события от нашего дочернего элемента для обновления родительского экземпляра
Использование v-модели в пользовательском компоненте позволяет нам передавать опору и обрабатывать событие с помощью всего одной директивы.
<custom-text-input v-model="value" />
<!-- IS THE SAME AS -->
<custom-text-input
:modelValue="value"
@update:modelValue="value = $event"
/>Хорошо ... что это вообще значит?
Давайте продолжим наш пример использования v-модели для форм и воспользуемся настраиваемым вводом текста с именем CustomTextInput.vue.
Имя по умолчанию для значения, переданного с использованием v-модели, - modelValue - это то, что мы будем использовать в нашем примере.
Однако мы можем передать собственное имя модели вот так.
<!-- We can name v-model, but for our example leave unnamed. -->
<custom-text-input v-model:name="value" />Примечание: когда мы используем собственное имя модели, имя созданного метода будет update:name.
Вот удобный рисунок из документации Vue, чтобы резюмировать его.
Использование v-модели из нашего пользовательского компонента
У нас есть настройка родительского компонента, поэтому давайте получим к нему доступ из нашего дочернего компонента.
Внутри CustomTextInput.vue нам нужно сделать две вещи:
- Примите нашу ценность v-модели как опору
- Испускать событие обновления при изменении нашего ввода
Хорошо, давайте сначала объявим это как опору в нашем скрипте.
export default {
props: {
modelValue: String,
}
}Затем давайте создадим наш шаблон, чтобы установить значение как вашу modelValue опору, и всякий раз, когда есть событие ввода, мы генерируем новое значение через update:modelValue.
<template>
<div>
<label> First Name </label>
<input
type='text'
placeholder='Input'
:value='modelValue'
@input='$emit("update:modelValue", $event.target.value)'
/>
</div>
</template>Теперь, если мы вернемся и посмотрим на наш код, мы сможем увидеть его в действии.
Советы по использованию v-модели
Хорошо!
Мы рассмотрели базовый пример использования v-модели для привязки данных между двумя компонентами.
Давайте рассмотрим несколько более сложных способов использования директивы v-model.
Многократное использование v-модели для одного компонента
v-модель не ограничивается одним использованием каждого компонента.
Чтобы использовать v-модель несколько раз, мы просто должны убедиться, что каждому объекту присваивается уникальное имя и обеспечивается правильный доступ к нему внутри нашего дочернего компонента.
Давайте добавим в наши входные данные вторую v-модель с именем lastName.
Внутри нашего родительского компонента…
<template>
<div>
<custom-text-input
v-model='value'
v-model:lastName='lastName'
/>
<p> Value: {{ value }} </p>
<p> Last Name: {{ lastName }} </p>
</div>
</template>
<script>
import CustomTextInput from './CustomTextInput.vue'
export default {
components: {
CustomTextInput,
},
data() {
return {
value: 'Matt',
lastName: 'Maribojoc'
}
}
}
</script>Затем внутри нашего дочернего компонента
<template>
<div>
<label> First Name </label>
<input
type='text'
:value='modelValue'
placeholder='Input'
@input='$emit("update:modelValue", $event.target.value)'
/>
<label> Last Name </label>
<input
type='text'
:value='lastName'
placeholder='Input'
@input='$emit("update:lastName", $event.target.value)'
/>
</div>
</template>
<script>
export default {
props: {
lastName: String,
modelValue: String,
}
}
</script>Если мы посмотрим на наш проект, то увидим, что обе v-модели работают независимо.
Пользовательские модификаторы для нашей v-модели
Как мы уже говорили, в Vue встроено несколько модификаторов. Но наступит время, когда мы захотим добавить свои собственные.
Допустим, мы хотим создать модификатор, который удаляет все пробелы из нашего ввода. Мы назовем это no-whitespace
<custom-text-input
v-model.no-whitespace='value'
v-model:lastName='lastName'
/>Внутри нашего входного компонента мы можем захватить модификатор с помощью свойств. Имя пользовательских модификаторов - nameModifiers.
props: {
lastName: String,
modelValue: String,
modelModifiers: {
default: () => ({})
}
},Хорошо, первое, что мы хотим сделать, это изменить наш @input обработчик на использование специального метода. Мы можем назвать его emitValue, и он примет имя редактируемого свойства, а также объект события.
<label> First Name </label>
<input
type='text'
:value='modelValue'
placeholder='Input'
@input='emitValue("modelValue", $event)'
/>В нашем emitValue методе перед вызовом $emit мы хотим проверить наши модификаторы. Если наш модификатор no-whitespace истинен, мы можем изменить наше значение перед передачей его родительскому элементу.
emitValue(propName, evt) {
let val = evt.target.value
if (this.modelModifiers['no-whitespace']) {
val = val.replace(/\s/g, '')
}
this.$emit(`update:${propName}`, val)
}Потрясающие. Давайте теперь посмотрим на наше приложение.
Всякий раз, когда наш ввод изменяется и у нас появляется пробел, он будет удален из родительского значения!
Потрясающие.
Заключение
Надеюсь, это руководство научило вас чему-то новому о Vue v-model.
В базовом варианте использования, таком как формы и входные данные, v-модель представляет собой действительно простую концепцию. Однако, когда мы начнем создавать пользовательские компоненты и работать с более сложными данными, мы действительно сможем раскрыть истинную мощь v-модели.
Если у вас есть какие-либо вопросы, дайте мне знать в комментариях ниже!
И, как всегда, удачного кодирования 🙂
