{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Во Vue есть набор "},{"type":"text","marks":[{"type":"bold"}],"text":"встроенных директив"},{"type":"text","text":", которые покрывают основные задачи — рендеринг, события, работа с формами, динамические атрибуты, списки и т. д."},{"type":"hardBreak"},{"type":"text","text":"Ниже — полный список "},{"type":"text","marks":[{"type":"bold"}],"text":"актуальных встроенных директив Vue 3"},{"type":"text","text":" + краткое объяснение каждой."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"✅ Основные встроенные директивы Vue"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"code"}],"text":"v-bind"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Динамическая привязка атрибутов и props."}]},{"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":"v-bind:class=\"classes\"\nv-bind:id=\"elemId\"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"code"}],"text":"v-model"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Двусторонняя привязка данных (input, select, textarea, компоненты)."}]},{"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":".lazy"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".trim"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".number"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"3. "},{"type":"text","marks":[{"type":"code"}],"text":"v-if"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"v-else-if"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"v-else"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Условный рендеринг (элемент полностью удаляется из DOM)."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

Maybe

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"4. "},{"type":"text","marks":[{"type":"code"}],"text":"v-show"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Показывает/скрывает элемент через CSS "},{"type":"text","marks":[{"type":"code"}],"text":"display"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

Появляюсь без удаления из DOM

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"5. "},{"type":"text","marks":[{"type":"code"}],"text":"v-for"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рендер списков."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

\n {{ item }}\n

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"6. "},{"type":"text","marks":[{"type":"code"}],"text":"v-on"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"@"},{"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":"Модификаторы: "},{"type":"text","marks":[{"type":"code"}],"text":".stop"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".prevent"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".once"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".self"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".capture"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".passive"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"7. "},{"type":"text","marks":[{"type":"code"}],"text":"v-slot"}]},{"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":"Сокращение для default slot:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

Какие встроенные директивы существуют в Vue?

Комментарии