{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 1. Что такое "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"директива"},{"type":"text","text":", которая связывает значение переменной компонента"},{"type":"hardBreak"},{"type":"text","text":"с элементом формы ("},{"type":"text","marks":[{"type":"bold"}],"text":"input, textarea, select и т.д."},{"type":"text","text":") "},{"type":"text","marks":[{"type":"bold"}],"text":"в обе стороны"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда данные меняются → обновляется интерфейс"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда пользователь вводит в форму → обновляется переменная"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 То есть "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" = "},{"type":"text","marks":[{"type":"bold"}],"text":"“данные ↔ интерфейс”"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 2. Пример базового использования"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"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":"message.value"},{"type":"text","text":" обновляется."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда "},{"type":"text","marks":[{"type":"code"}],"text":"message.value"},{"type":"text","text":" меняется → "},{"type":"text","marks":[{"type":"code"}],"text":"input"},{"type":"text","text":" автоматически показывает новое значение."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"синхронизацию в обе стороны"},{"type":"text","text":" без необходимости писать обработчики вручную."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 3. Как "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" работает “под капотом”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вот этот код:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue "},{"type":"text","marks":[{"type":"bold"}],"text":"транслирует"},{"type":"text","text":" в обычные атрибуты и события:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"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","marks":[{"type":"code"}],"text":":value"},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"bold"}],"text":"односторонняя привязка данных"},{"type":"text","text":" (в компонент → в DOM);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"@input"},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"bold"}],"text":"обратная связь"},{"type":"text","text":" (из DOM → в компонент)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вот и получается "},{"type":"text","marks":[{"type":"bold"}],"text":"двустороннее связывание данных"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧮 4. Работа с разными типами элементов"}]},{"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":"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","marks":[{"type":"code"}],"text":""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":" ↔ текст"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"checked"},{"type":"text","text":" ↔ boolean"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"checked"},{"type":"text","text":" ↔ значение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 5. Двустороннее связывание между "},{"type":"text","marks":[{"type":"bold"}],"text":"компонентами"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" можно использовать не только с элементами формы,"},{"type":"hardBreak"},{"type":"text","text":"но и "},{"type":"text","marks":[{"type":"bold"}],"text":"для связи родитель ↔ дочерний компонент"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Родитель:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Дочерний компонент:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Родитель передаёт значение через "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" → проп "},{"type":"text","marks":[{"type":"code"}],"text":"modelValue"},{"type":"hardBreak"},{"type":"text","text":"🔹 Дочерний сообщает об изменениях через событие "},{"type":"text","marks":[{"type":"code"}],"text":"update:modelValue"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это стандартный контракт "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" в Vue 3:"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"prop:"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"code"}],"text":"modelValue"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"bold"}],"text":"emit:"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"code"}],"text":"update:modelValue"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔁 6. Несколько "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" в одном компоненте"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue 3 позволяет использовать "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько независимых v-model"},{"type":"text","text":" с именами:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Дочерний компонент:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 7. Модификаторы "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue предлагает удобные "},{"type":"text","marks":[{"type":"bold"}],"text":"модификаторы"},{"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":"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","marks":[{"type":"code"}],"text":".lazy"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обновляет значение только после "},{"type":"text","marks":[{"type":"code"}],"text":"change"},{"type":"text","text":", а не "},{"type":"text","marks":[{"type":"code"}],"text":"input"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".trim"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Автоматически убирает пробелы в начале и конце"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".number"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Преобразует значение в число"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔍 8. Под капотом реактивности"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда вы пишете "},{"type":"text","marks":[{"type":"code"}],"text":"v-model=\"x\""},{"type":"text","text":":"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue отслеживает, что DOM элемент "},{"type":"text","marks":[{"type":"bold"}],"text":"зависит от "},{"type":"text","marks":[{"type":"code"}],"text":"x"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При изменении "},{"type":"text","marks":[{"type":"code"}],"text":"x"},{"type":"text","text":" обновляется атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При событии "},{"type":"text","marks":[{"type":"code"}],"text":"input/change"},{"type":"text","text":" Vue вызывает "},{"type":"text","marks":[{"type":"bold"}],"text":"обратное обновление"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"x = $event.target.value"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти два направления образуют "},{"type":"text","marks":[{"type":"bold"}],"text":"реактивную петлю"},{"type":"text","text":", обеспечивая мгновенное обновление UI и состояния."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📘 Итог"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" — это механизм двустороннего связывания данных во Vue.js."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он автоматически синхронизирует состояние компонента и интерфейса:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"из кода → в DOM"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":":value=\"...\""},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"из DOM → в код"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"@input=\"...\""},{"type":"text","text":")"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Работает как с элементами формы, так и с компонентами,"},{"type":"hardBreak"},{"type":"text","text":"поддерживает "},{"type":"text","marks":[{"type":"bold"}],"text":"модификаторы"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"множественные модели"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как работает двустороннее связывание (v-model)?

Комментарии