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

Ionic – это гибридная платформа для мобильных приложений. Мы можем создавать приложения для Android и iOS, используя Ionic Framework. Изначально платформа Ionic создавалась для поддержки только Angular. Теперь они также поддерживают React и Vue. Итак, мы можем создать мобильное приложение с помощью Vue. Гибридное мобильное приложение сократит время разработки, а также стоимость разработки.

В этом уроке мы рассмотрим следующие темы.

  1. Как создать проект Ionic с помощью Vue?.
  2. Структура ионного проекта.
  3. Привязка данных.
  4. Двусторонняя привязка данных.
  5. Нажмите «Привязка события».

Предпосылки

Для работы с Ionic вам понадобится Node.js. Загрузите и установите Node.js по ссылке ниже.



Загрузить | Node.js
Node.js® – это среда выполнения JavaScript, созданная на базе JavaScript-движка Chrome V8.nodejs.org



Установить Ionic

Мы можем установить Ionic Framework с помощью файла npm. Используйте приведенную ниже команду, чтобы установить Ionic в командной строке или на терминале.

npm install -g @ionic/cli

Приведенная выше команда установит Ionic. Это займет некоторое время, в зависимости от скорости вашего интернета.

Создать ионный проект

Мы уже установили Ionic. Теперь мы можем создать проект Ionic Vue, используя приведенную ниже команду.

ionic start --type=vue
  1. ionic start => Стандартная команда для создания проекта.
  2. — type=vue => Он используется, чтобы указать Ionic CLI создать проект Vue. Почему, потому что Ionic также поддерживает Angular и React. Поэтому необходимо упомянуть vue.
  3. Он попросит вас ввести имя проекта после того, как вы выполните команду на терминале.
  4. Затем он попросит вас выбрать шаблон проекта. Выберите пустой проект

Загрузка нужного файла из Интернета займет некоторое время. После завершения загрузки откройте папку проекта с помощью редактора кода VS (вы можете использовать любой редактор).

Структура проекта Ionic Vue

Структура проекта очень похожа на структуру веб-приложения Vue.

  1. App.vue => Это основной файл, в котором отображаются все выходные данные компонента с использованием тега ‹ion-router-outlet›.
  2. router-›index.ts =› Используется для определения маршрутов. По умолчанию домашняя страница установлена ​​как корневая. Вы можете найти Home.vue в папке представлений.
  3. папка представлений => Мы создадим все компоненты представления только здесь.

Предварительный просмотр проекта

Мы можем просмотреть проект с помощью браузера. Он будет отображать оба представления Android iOS. Запустите приведенную ниже команду в терминале вашего проекта, и она откроет предварительный просмотр в браузере.

ionic serve --lab

Предварительный просмотр Android и iOS в браузере:

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

Мы можем определить нашу переменную внутри функции data(). Посмотрите на приведенный ниже код в файле views-›Home.vue. Home.vue объединяет код HTML, CSS и Vue JS в одном файле.

Здесь я объявил две переменные.

  1. имя – это строковая переменная.
  2. А emp — это объектная переменная.

Мы можем отобразить (связать) переменную, используя двойную фигурную скобку ({{ }}). Поэтому используйте приведенный ниже код в разделе HTML на Home.vue и сохраните его. Он будет отображать вывод автоматически.

Вывод из браузера:

Двусторонняя привязка данных

Двусторонняя привязка данных — это не что иное, как привязка переменной к полям ввода. При односторонней привязке данных мы будем отображать только значения переменных. При двусторонней привязке данных мы также можем изменять значения из HTML. Мы можем привязать переменную к полю ввода, используя свойство v-model.

Чтобы использовать любой компонент пользовательского интерфейса в Ionic, мы должны его импортировать. Поэтому импортируйте компонент, связанный с вводом, как показано ниже, в файл Home.vue и включите компонент в раздел components.

Мы собираемся выполнить простое действие сложения, используя два числа. Поэтому создайте три переменные в разделе data().

  1. Переменные value1 и value2 используются для представления полей ввода.
  2. Переменная total используется для хранения суммы value1 и value2.

Создайте поля ввода, используя приведенный ниже код в разделе HTM, и привяжите переменную, используя свойство v-model vue.

Нажмите Событие

Пока что мы создали поля ввода для добавления. Теперь создайте кнопку и привяжите событие клика, используя свойство v-on:click. Скопируйте приведенный ниже код и вставьте после полей ввода.

Затем создайте функцию add() в разделе ts файла Home.vue. Функции создаются в разделе методы.

Теперь сохраните все изменения. А протестировать дополнение можно с помощью браузера.

Вывод добавления:

Ссылка на полный исходный код:

https://github.com/bharathirajatut/ionic-vue/tree/main/data%20%26%20event%20binding%20example

Обзор:

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

  1. Односторонняя привязка с использованием свойства v-model
  2. Двусторонняя привязка с использованием свойства v-модели и входного поля.
  3. Привязка событий с использованием свойства v-on:click.

Я надеюсь, что это руководство поможет вам начать свой путь в разработке мобильных приложений. Я планирую написать больше руководств по Ionic и Vue. Следите за новыми статьями.

Спасибо за чтение.