Узнайте, как использовать привязку данных в Vue с директивами интерполяции, v-bind и v-model.

Привязка данных в веб-приложениях создает связь между экземпляром приложения и пользовательским интерфейсом (пользовательским интерфейсом). Экземпляр приложения управляет данными, поведением и компонентами, а пользовательский интерфейс представляет визуальный аспект, с которым взаимодействуют пользователи. Связывание данных позволяет создавать динамические веб-приложения.

Здесь вы изучите различные привязки в Vue, включая односторонние и двусторонние привязки. Вы также научитесь реализовывать эти привязки с помощью шаблонов усов и директив, таких как v-bind и v-model.

Интерполяция в Vue

Интерполяция — один из самых популярных типов привязки данных в Vue. Интерполяция позволяет отображать значения данных в тегах языка гипертекстовой разметки (HTML) с помощью шаблона усов, обычно обозначаемого двойными фигурными скобками ({{ }}).

С помощью шаблона усов вы можете интегрировать динамическое содержимое приложения, такое как свойства данных и методов, в свой HTML. Этого можно добиться, заключив имена свойств данных или методов из

instagram viewer
объект параметров в 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 поможет вам создать динамичный и интерактивный интерфейс для ваших веб-приложений.