Phenquestions
Vue.js - такая простая в освоении и доступная библиотека. Итак, со знанием HTML, CSS и Javascript мы можем начать создавать веб-приложения на Vue.js. Vue.js построен путем объединения лучших функций из уже существующих Angular и React Framework.
Связывание данных - одна из самых элегантных функций Vue.js, потому что он обеспечивает реактивную / двустороннюю привязку данных. В Vue.js, нам не нужно писать много строк для двусторонней привязки данных, в отличие от других фреймворков. Односторонняя привязка данных означает, что переменная просто привязана к DOM. С другой стороны, двусторонний означает, что переменная также связана с DOM. Когда DOM изменяется, переменная также изменяется. Итак, давайте посмотрим на обе привязки данных и увидим правильную разницу.
Односторонняя привязка данных
Если мы хотим привязать какую-либо переменную, мы можем просто использовать Vue.синтаксис двойных фигурных скобок js или синтаксис «усов» для привязки любой переменной из относительного экземпляра компонента.
linuxhintText
Или, если мы хотим связать любую переменную внутри атрибута HTML, мы можем использовать v-привязка директива.
Vue.js также предоставляет сокращение для привязки переменных в атрибуте HTML. Вместо того, чтобы писать v-bind: имя-атрибута, мы можем использовать только двоеточие «:» и имя атрибута.
Но это всего лишь привязки данных. Чтобы продемонстрировать двустороннюю привязку данных, мы можем использовать v-модель директива, предоставленная Vue.js.
Двусторонняя / реактивная привязка данных
Чтобы продемонстрировать реактивную привязку данных, мы можем использовать v-модель директива в поле формы ввода. Он внутренне испустит событие и изменит переменную. К которому мы можем привязать где-нибудь еще в шаблоне, используя двойные фигурные скобки или синтаксис «усов».
Вы набираете: linuxhintText
Теперь, когда мы вводим символ в поле формы ввода, мы видим, что переменная также обновляется одновременно.
Подведение итогов
В этой статье мы узнали, как привязать переменные в Vue.js с использованием двойных фигурных скобок или синтаксиса «усы». Мы также продемонстрировали двустороннюю / реактивную привязку данных во Vue.js с помощью директивы v-model. После прочтения этой статьи привязка данных больше не является сложной задачей для новичка, который только начал работать с Vue.js. Итак, продолжайте изучать концепции Vue.js с помощью linuxhint.ком. Спасибо!
