{"type":"doc","content":[{"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":", который связывает значение элемента ввода (input, textarea, select, компонент) с переменной в состоянии Vue."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","marks":[{"type":"bold"}],"text":" связывает данные и UI так, что изменение одного автоматически обновляет другое."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Как работает "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" под капотом?"}]},{"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":"Vue превращает это в два действия:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Привязка значения (model → view)"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":":value=\"message\"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI всегда показывает актуальные данные."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Обработчик события (view → model)"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"@input=\"message = $event.target.value\"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда пользователь вводит текст → переменная "},{"type":"text","marks":[{"type":"code"}],"text":"message"},{"type":"text","text":" обновляется."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Именно объединение этих двух направлений даёт двустороннюю привязку."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧪 Пример"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь вводит текст → "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":" меняется."},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":" меняется в коде → input обновляется."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Как "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" работает в разных элементах формы?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ text input"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ checkbox"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ radio"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ select"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ checkbox с массивами"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если выбрано → добавится в массив."},{"type":"hardBreak"},{"type":"text","text":"Если снято → удалится."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Модификаторы "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" (Vue 3)"}]},{"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","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":"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":"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":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Как работает "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":" в компонентах (Vue 3)"}]},{"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":"Vue заменяет это на:"}]},{"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":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это и есть внутренний механизм "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Именованные модели (Vue 3)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно иметь несколько v-model:"}]},{"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":"start"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"событие: "},{"type":"text","marks":[{"type":"code"}],"text":"update:start"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"проп: "},{"type":"text","marks":[{"type":"code"}],"text":"end"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"событие: "},{"type":"text","marks":[{"type":"code"}],"text":"update:end"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как работает директива v-model?

Комментарии