Узнайте, как использовать привязку данных в Vue с директивами интерполяции, v-bind и v-model.
Привязка данных в веб-приложениях создает связь между экземпляром приложения и пользовательским интерфейсом (пользовательским интерфейсом). Экземпляр приложения управляет данными, поведением и компонентами, а пользовательский интерфейс представляет визуальный аспект, с которым взаимодействуют пользователи. Связывание данных позволяет создавать динамические веб-приложения.
Здесь вы изучите различные привязки в Vue, включая односторонние и двусторонние привязки. Вы также научитесь реализовывать эти привязки с помощью шаблонов усов и директив, таких как v-bind и v-model.
Интерполяция в Vue
Интерполяция — один из самых популярных типов привязки данных в Vue. Интерполяция позволяет отображать значения данных в тегах языка гипертекстовой разметки (HTML) с помощью шаблона усов, обычно обозначаемого двойными фигурными скобками ({{ }}).
С помощью шаблона усов вы можете интегрировать динамическое содержимое приложения, такое как свойства данных и методов, в свой HTML. Этого можно добиться, заключив имена свойств данных или методов из
объект параметров в Vue внутри этих фигурных скобок.Вот пример приложения Vue, использующего шаблон усов для интерполяции в Vue:
<тело>
<дивидентификатор="приложение">
<h1>{{ заголовок }}h1>
<п>{{ text.toUpperCase() }}п>
див>
<сценарий>
константное приложение = Vue.createApp({
данные() {
возвращаться {
заголовок: "Добро пожаловать",
текст: "Это твой мир?",
};
},
});
app.mount("#приложение");
сценарий>
тело>
Приведенный выше блок кода использует шаблон усов для отображения значения свойства title в объекте данных приложения Vue. Вы также можете отображать результаты выражений JavaScript с интерполяцией. Например, {{text.toUpperCase()}} выражение в п Тег отображает текстовое значение в верхнем регистре, как показано на изображении ниже:
Когда вы монтируете приложение Vue, Vue оценивает выражения в шаблонах и отображает полученные значения в теле HTML. Любые изменения свойств данных обновляют соответствующие значения в пользовательском интерфейсе.
Например:
<сценарий>
константное приложение = Vue.createApp({
данные() {
возвращаться {
заголовок: "Здравствуйте",
текст: "Это твой мир?",
};
},
});
app.mount("#приложение");
сценарий>
Приведенный выше блок кода изменяет свойство title на «Привет". Это изменение автоматически отразится в пользовательском интерфейсе, поскольку приложение Vue привязывает свойство title к элементу пользовательского интерфейса, как показано ниже:
Интерполяция выводит данные только тогда, когда двойные фигурные скобки находятся между открывающим и закрывающим тегами HTML.
Односторонняя привязка данных с директивой v-bind
Подобно интерполяции, односторонняя привязка данных связывает экземпляр приложения с пользовательским интерфейсом. Разница в том, что он связывает такие свойства, как данные и методы, с атрибутами HTML.
Односторонняя привязка данных поддерживает однонаправленный поток данных, не позволяя пользователям вносить изменения, влияющие на свойства данных в экземпляре приложения. Это полезно, когда вы хотите отобразить данные для пользователя приложения, но запретить пользователю изменять их.
Вы можете добиться односторонней привязки данных в Vue с помощью v-связать директива или ее сокращенный символ (:):
директива v-bind
<входтип="текст"v-привязка: значение="текст">
the: сокращенный символ
<входтип="текст":ценить="текст">
Блок кода показывает использование директивы v-bind и ее сокращения для привязки значения входного тега HTML к свойству текстовых данных. Вот пример приложения Vue, использующего v-связать директива для достижения односторонней привязки данных:
<тело>
<дивидентификатор="приложение">
<входтип="текст"v-привязка: значение="текст">
<п>{{ текст }}п>
див><сценарий>
константное приложение = Vue.createApp({
данные() {
возвращаться {
текст: «Vue — это круто!»
}
}
})
app.mount('#приложение')
сценарий>
тело>
Выше поле ввода и элемент абзаца отображают значение текст свойство. ценить атрибут поля ввода привязан к текстовому свойству с помощью v-связать директива.
Этот блок кода создает одностороннюю привязку, где изменения в текст свойство обновит значение поля ввода, но изменения, сделанные в поле ввода, не обновят текст свойство в экземпляре приложения Vue.
Чтобы показать это, мы можем начать с начального значения текст свойство, "Вью потрясающий!»:
После изменения значения поля ввода на «Привет, мир!", обратите внимание, что приложение Vue не было обновлено, а текст в теге абзаца остался прежним:
Однако, когда мы меняем значение текст собственность на Привет, мир! в экземпляре приложения Vue, а не из поля ввода, поле ввода обновляется, чтобы отразить новое значение:
Этот способ привязки данных удобен в сценариях, когда вы хотите отобразить данные для пользователя, но запретите пользователю изменять их напрямую. Используя v-bind в Vue.js, вы можете установить одностороннюю привязку, легко подключая данные вашего приложения к элементам пользовательского интерфейса.
Двусторонняя привязка данных с помощью директивы v-model
Двусторонняя привязка данных позволяет автоматически отражать изменения значения элемента пользовательского интерфейса в базовой модели данных и наоборот. Самый передовой JavaScript-фреймворки нравиться Angular использует двустороннюю привязку для обмена данными и обработки событий в реальном времени.
Vue.js делает возможной двустороннюю привязку с помощью v-модель директива. v-модель создает двустороннюю привязку данных между элементом ввода формы и свойством данных. Когда вы вводите в элемент ввода, значение автоматически обновляется в свойстве данных, и любые изменения в свойстве данных также будут обновлять элемент ввода.
Вот пример приложения Vue, использующего v-модель директива для достижения двусторонней привязки данных:
<голова>
<заголовок>Двусторонняя привязка данных в Vueзаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<входтип="текст"v-модель="текст">
<п>{{ текст }}п>
див><сценарий>
константное приложение = Vue.createApp({
данные() {
возвращаться {
текст: «Vue — это круто!»
}
}
})
app.mount('#приложение')
сценарий>
тело>
Блок кода выше имеет элемент ввода с v-модель директива, связывающая его с текст свойство данных. текст изначально установлено свойство "Вью потрясающий!".
Поле ввода обновляет свойство текста, когда вы вводите в него текст, и отражает изменения в свойстве текста в поле ввода. п ярлык. Vue.js использует директиву v-model и элемент input для двусторонней привязки данных.
В то время как v-bind обеспечивает одностороннюю связь между приложением Vue и пользовательским интерфейсом, v-model обеспечивает двустороннюю связь между приложением Vue и пользовательским интерфейсом. Благодаря своей способности обеспечивать двустороннюю связь, v-модель часто используется при работе с элементами формы в Vue.
Расширьте свой опыт в создании приложений Vue
Вы узнали о привязке данных в Vue, включая интерполяцию и директивы v-bind и v-model. Эти привязки данных необходимы, поскольку они служат основой приложений Vue.
Vue имеет много других директив для вариантов использования, таких как рендеринг списка, привязка событий и условный рендеринг. Понимание директив Vue поможет вам создать динамичный и интерактивный интерфейс для ваших веб-приложений.