createApp

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

Основное назначение createApp

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

Синтаксис метода createApp

import { createApp } from 'petite-vue';

const app = createApp({
  // Определение состояния и методов компонента
});
app.mount('#app');
  • createApp(options): Принимает объект с опциями, который описывает поведение и данные приложения. Этот объект может содержать различные ключи, такие как data, methods, computed и другие.
  • app.mount(selector): Привязывает приложение к конкретному DOM-элементу, выбранному с помощью CSS-селектора.

Структура объекта options

Объект, передаваемый в createApp, содержит несколько важных элементов, которые управляют логикой компонента:

  1. data: Определяет начальное состояние данных, доступных в компоненте.
  2. methods: Содержит методы, которые могут быть вызваны внутри компонента.
  3. computed: Определяет вычисляемые свойства, которые являются производными от данных и автоматически обновляются при изменении состояния.
  4. watch: Позволяет наблюдать за изменениями в данных и выполнять дополнительные действия при их изменении.

Пример базового компонента:

import { createApp } from 'petite-vue';

const app = createApp({
  data() {
    return {
      message: 'Привет, Petite-Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Сообщение обновлено';
    }
  }
});

app.mount('#app');

Привязка данных к DOM

Одной из ключевых особенностей Petite-Vue является его способность динамически привязывать данные к элементам DOM. Это достигается с помощью директив, таких как x-text, x-bind, и других. После того как приложение создано и смонтировано, все изменения в данных автоматически отражаются на соответствующих элементах.

Пример использования привязки:

<div id="app">
  <span x-text="message"></span>
  <button x-on:click="updateMessage">Обновить сообщение</button>
</div>

Здесь директива x-text привязывает текстовое содержимое элемента к переменной message. При изменении этого значения текст в элементе автоматически обновится. Директива x-on:click позволяет привязать событие к кнопке, чтобы вызвать метод updateMessage при клике.

Монтирование приложения

После создания приложения с помощью createApp и определения всех данных и методов, необходимо смонтировать приложение на выбранном DOM-элементе. Это делается с помощью метода mount(selector).

Пример:

app.mount('#app');

Метод mount ищет элемент с идентификатором #app в DOM и привязывает к нему состояние и логику, описанную в объекте, переданном в createApp.

Особенности работы с Petite-Vue

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

Пример применения createApp с компонентами

Хотя Petite-Vue и фокусируется на упрощении, он поддерживает компоненты, позволяя создавать более структурированные приложения.

<div id="app">
  <my-component></my-component>
</div>

<script type="module">
  import { createApp } from 'petite-vue';

  const MyComponent = {
    template: `<div>Компонент</div>`
  };

  const app = createApp({
    components: {
      MyComponent
    }
  });

  app.mount('#app');
</script>

Здесь компонент MyComponent определён и использован внутри основного приложения. Данный подход позволяет создавать более гибкие и масштабируемые структуры, оставаясь при этом в рамках минимализма и производительности, характерных для Petite-Vue.

Использование createApp с динамическими данными

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

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

<script type="module">
  import { createApp } from 'petite-vue';

  const app = createApp({
    data() {
      return { message: '' };
    }
  });

  app.mount('#app');
</script>

В этом примере используется директива x-model, которая автоматически синхронизирует значение поля ввода с переменной message. Всё изменение, произведённое пользователем в поле ввода, сразу же отобразится в параграфе с помощью директивы x-text.

Резюме

Метод createApp является основным инструментом для создания и монтирования приложений в Petite-Vue. Он позволяет легко и быстро инициализировать приложение с реактивными данными и привязать их к DOM-элементам с помощью различных директив. Механизм монтирования через mount(selector) упрощает внедрение библиотечного кода в существующие веб-страницы, что делает Petite-Vue удобным инструментом для небольших и средних проектов.

Оглавление