Монтирование элементов

Монтирование элементов в библиотеке Petite-Vue — это процесс привязки компонентов к определённой части HTML-документа. В отличие от фреймворков, использующих виртуальный DOM, Petite-Vue предлагает минималистичный подход, где компоненты привязываются напрямую к элементам DOM, что делает его лёгким и быстрым инструментом для внедрения реактивных данных в страницы.

Основы монтирования

Для монтирования компонента в Petite-Vue используется метод PetiteVue.mount(). Этот метод принимает два аргумента:

  1. Целевой элемент DOM — это элемент, в котором будет монтироваться компонент. Обычно это может быть любой HTML-элемент, например, div, span или section.
  2. Объект с данными компонента — объект, который определяет реактивные данные и методы компонента.

Пример монтирования компонента:

<div id="app">
  <p x-text="message"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@latest"></script>
<script>
  const app = {
    message: "Привет, мир!"
  };

  PetiteVue.mount("#app", app);
</script>

В этом примере компонент монтируется в элемент с id app. Внутри этого элемента используется директива x-text, которая отображает значение переменной message.

Структура компонента

Каждый компонент в Petite-Vue представляет собой объект, который может содержать несколько свойств:

  • Реактивные данные — объект с переменными, значения которых могут изменяться и автоматически обновлять представление на странице.
  • Методы — функции, которые могут изменять данные или выполнять другие действия.
  • Прочие опции — дополнительные настройки компонента, такие как жизненные циклы или обработчики событий.

Пример компонента с методами:

<div id="app">
  <button @click="increment">Увеличить</button>
  <p>Счёт: <span x-text="count"></span></p>
</div>

<script>
  const app = {
    count: 0,
    increment() {
      this.count++;
    }
  };

  PetiteVue.mount("#app", app);
</script>

Здесь компонент включает кнопку, которая вызывает метод increment при клике. Этот метод увеличивает значение переменной count, что в свою очередь обновляет текст в параграфе.

Обработка событий

Для обработки событий в Petite-Vue используется синтаксис @event, где event — это тип события (например, click, input, submit). При срабатывании события вызывается соответствующий метод компонента.

Пример:

<div id="app">
  <button @click="toggleVisibility">Переключить видимость</button>
  <p x-show="isVisible">Этот текст можно скрыть</p>
</div>

<script>
  const app = {
    isVisible: true,
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  };

  PetiteVue.mount("#app", app);
</script>

В данном примере кнопка переключает видимость текста с помощью директивы x-show. Когда значение переменной isVisible меняется, элемент автоматически скрывается или отображается.

Реактивность

Petite-Vue автоматически следит за изменениями данных и обновляет DOM при их изменении. Это происходит за счёт использования реактивных объектов. Все данные, которые определяются в компоненте, становятся реактивными, и любые изменения этих данных автоматически приводят к обновлению всех привязанных элементов.

Пример с реактивными данными:

<div id="app">
  <input x-model="name" placeholder="Введите имя">
  <p>Привет, <span x-text="name"></span>!</p>
</div>

<script>
  const app = {
    name: ""
  };

  PetiteVue.mount("#app", app);
</script>

Здесь используется директива x-model, которая создаёт двустороннюю привязку между значением поля ввода и переменной name. При изменении текста в поле ввода, автоматически обновляется содержимое абзаца.

Жизненный цикл компонента

Petite-Vue позволяет использовать хуки жизненного цикла компонента. Эти хуки можно использовать для выполнения действий на разных стадиях жизненного цикла компонента, таких как при монтировании, обновлении или уничтожении.

Пример:

<div id="app">
  <p x-text="message"></p>
</div>

<script>
  const app = {
    message: "Загрузка...",
    mounted() {
      setTimeout(() => {
        this.message = "Данные загружены!";
      }, 2000);
    }
  };

  PetiteVue.mount("#app", app);
</script>

В этом примере используется хук mounted, который срабатывает после монтирования компонента. В данном случае он изменяет текст через 2 секунды, имитируя процесс загрузки данных.

Директивы для монтирования

Petite-Vue предоставляет несколько директив для управления поведением элементов на странице:

  • x-text — привязка текста к элементу.
  • x-html — привязка HTML-содержимого к элементу.
  • x-show — условное отображение элемента.
  • x-if — условное добавление элемента в DOM.
  • x-model — двусторонняя привязка данных.
  • x-bind — привязка атрибутов.

Каждая директива позволяет управлять определёнными аспектами элемента и связать его с реактивными данными компонента.

Монтирование нескольких компонентов

Можно монтировать несколько компонентов на одной странице, каждый из которых будет работать независимо от других. Для этого нужно просто вызвать PetiteVue.mount() для каждого компонента, передавая соответствующий элемент DOM и данные.

Пример:

<div id="app1">
  <p x-text="message"></p>
</div>
<div id="app2">
  <p x-text="greeting"></p>
</div>

<script>
  const app1 = { message: "Привет из первого компонента!" };
  const app2 = { greeting: "Привет из второго компонента!" };

  PetiteVue.mount("#app1", app1);
  PetiteVue.mount("#app2", app2);
</script>

В этом примере на одной странице монтируются два разных компонента, каждый из которых управляет своим элементом DOM.

Заключение

Монтирование элементов в Petite-Vue позволяет легко внедрить реактивность в веб-страницу. Простота синтаксиса и низкая нагрузка на производительность делают её отличным выбором для небольших проектов, где не требуется сложная структура и управление состоянием.

Оглавление