{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Двусторонняя привязка данных (two-way data binding)"},{"type":"text","text":" — это механизм, при котором "},{"type":"text","marks":[{"type":"bold"}],"text":"данные в модели и отображение в интерфейсе автоматически синхронизируются между собой."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Если пользователь меняет значение в UI → изменяются данные в компоненте."},{"type":"hardBreak","marks":[{"type":"bold"}]},{"type":"text","marks":[{"type":"bold"}],"text":"Если данные в компоненте меняются → UI обновляется автоматически."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue этот механизм реализован через директиву "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Простой пример"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если пользователь вводит текст:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"name = \"Alex\"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ты меняешь переменную в коде:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"this.name = \"John\"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— значение в input тоже обновится."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это и есть двусторонняя привязка."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Как работает под капотом"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue превращает:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в два механизма:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Односторонняя привязка (model → view):"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":":value=\"name\"\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Обратная привязка (view → model):"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"@input=\"name = $event.target.value\"\n"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue автоматически объединяет это в удобный синтаксис."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎯 Что даёт двусторонняя привязка?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ Экономит код"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тебе не нужно писать вручную обработчики "},{"type":"text","marks":[{"type":"code"}],"text":"input"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"change"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"keyup"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ Упрощает формы"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Особенно многопользывательные, как валидации."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ Синхронный UI"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI всегда отображает актуальные данные."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧪 Двусторонняя привязка в компонентах (Vue 3)"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Работает через:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"проп: "},{"type":"text","marks":[{"type":"code"}],"text":"modelValue"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"событие: "},{"type":"text","marks":[{"type":"code"}],"text":"update:modelValue"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Отличие от односторонней привязки"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вид привязки"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"односторонняя (one-way)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обновляет только UI при изменении данных"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"двусторонняя (two-way)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI и данные обновляют друг друга"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример односторонней:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI нельзя использовать для изменения модели."}]}]}

Что такое двусторонняя привязка данных?

Комментарии