Vue js android app

Представляем Vue и Weex для нативных мобильных приложений

Vue является популярной платформой JavaScript для веб-приложений с простой привязкой между данными в памяти и пользовательским интерфейсом. Теперь Weex позволяет нам кодировать собственные мобильные приложения с использованием фреймворка Vue!

Почему мы используем Vue и другие фреймворки привязки данных, такие как Angular и React? Что в них такого особенного? Мы используем их, чтобы гарантировать, что данные приложения, хранящиеся в памяти, синхронизируются с пользовательским интерфейсом и наоборот.

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

В этом уроке я покажу вам, как использовать фреймворк Vue, в частности, как понять его концепции привязки данных и шаблонов. Затем я расскажу о платформе Weex для кодирования собственных мобильных приложений с помощью Vue!

Связывание данных

Давайте рассмотрим простой пример, чтобы понять, как эти фреймворки могут фактически сэкономить нам время. Мы хотим простое поле ввода, которое синхронизируется с данными наших приложений. Наше приложение само по себе может программно изменить данные, и пользователь может изменить его с помощью пользовательского ввода, поэтому нам нужно наблюдать за данными пользовательского интерфейса и приложения.

Написание кода, который поддерживает эту привязку данных, будет подробным. Нам нужно будет создавать прослушиватели событий и объекты прокси и наблюдаемые данные для записи любых изменений в данных приложения. И эти сложности все растут и растут по мере добавления новых типов данных и полей для ввода. Vue и другие фреймворки с биндингом данных позволяют нам не писать весь этот код привязки.

С помощью Vue, если наш пользователь меняет некоторые входные данные, они будет синхронизироваться с данными приложения так:

Или, если приложение изменит данные, оно обновит пользовательский интерфейс следующим образом:

Когда мы синхронизируем пользовательский интерфейс и данные приложения, это означает, что наше приложение выполняет именно то, что мы ожидаем от него. Vue будет управлять всем этим и разрешать другие мощные процессы привязки данных.

Настройка

Теперь, когда мы знаем, почему мы используем эти фреймворки, давайте создадим простое приложение Vue для запуска некоторых примеров. Создайте новый HTML-файл в любом месте вашего компьютера и вставьте в него следующий код:

Это простой HTML-файл, который ссылается на библиотеку Vue JS. Он содержит элемент div с id app . Внутри тегов script у нас есть переменная, называемая app , которую мы используем, чтобы указать на наше отображение — я объясню эту часть позже.

Затем мы создаем новый экземпляр Vue или «view». Этот конструктор сообщает структуре, что элемент будет содержать наш пользовательский интерфейс приложения и держать его в синхронизации с данными приложения.

Теперь дважды щелкните файл HTML, чтобы открыть его в браузере, и откройте окно консоли браузера.

Текстовая интерполяция

Интерполяция текста позволяет вставлять выражения в наш HTML-код, который будет интерпретироваться при визуализации страницы. Выражения в реальном времени, поэтому, если данные, на которых они зависят, будут изменены, страница будет обновляться в реальном времени. Это называется декларативным рендерингом, который позволяет размещать выражения в любом месте содержимого элемента. Давайте рассмотрим простой пример.

Наш код JavaScript теперь содержит объект data , который сохранит все данные наших приложений для этого представления. Внутри я создал свойство message со строкой «Hello world» .

Затем давайте отобразим это свойство в HTML.

Выражения обозначаются синтаксисом двойной фигурной скобки. Vue JS управляет зависимостями каждого выражения и обновляет страницу в реальном времени, если они меняются. В нашем случае мы имеем два выражения со свойством message — как зависимость каждого из них. Первое выражение <> просто отображает свойство message. Второе выражение <> принимает свойство message, а затем:

• Разделяет строку в массив:
  [ «h»,»e»,»l»,»l»,»o»,» «,»w»,»o»,»r»,»l»,»d» ]
• Изменяет порядок массива:
  [ «d»,»l»,»r»,»o»,»w»,» «,»o»,»l»,»l»,»e»,»h» ]
• Объединяет массив вместе, чтобы получить «dlrow olleh» , который является тем же сообщением, но напечатанным назад.

Теперь откройте браузер и обновите страницу HTML. Затем откройте окно консоли браузера и присвойте app.message новое значение и посмотрите, как оно обновляется в браузере.

Вы также можете использовать математику в выражениях шаблонов или структурированные данные в объектах. На самом деле, как вы могли догадаться, выражения Vue — это просто JavaScript. Однако доступ к глобальным переменным изолирован песочницей, поэтому вы можете получить доступ к Math , но не к window . Это помогает поддерживать безопасность ваших приложений и ваших пользователей.

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

Директивы

Директивы — это еще один способ привязки данных к нашим представлениям. Мы можем использовать их для привязки данных приложения к атрибутам, событиям, полям ввода и повторяемым данным. Давайте рассмотрим каждую директиву и узнаем, как они работают.

• v-bind : привязать значение атрибута
• v-model : привязывать данные приложения к входному элементу, например textarea
• v-on : определить обработчик события
• v-for : привязка к массиву или объекту

Директива v-bind

Директива v-bind используется для привязки данных атрибута. Это позволяет нам привязывать данные приложения к значению атрибута. Рассматривайте это как текстовую интерполяцию, но в атрибуте. Вы можете связать class , id , value или любой другой атрибут с директивой v-bind .

В этом примере я хотел бы привязать данные приложения к атрибуту data-attr , используя директиву v-bind v-bind: data-attr .

В приведенном выше примере мы привязали атрибут, называемый data-attr , к ряду разных источников данных. Сначала мы привязали его к свойствам type и names у object . Затем мы привязали его к математическому выражению, а затем объединили все привязки в один атрибут массива.

Взгляните на вывод в браузере: вы можете щелкнуть вкладку «Элементы», чтобы увидеть результат каждого значения атрибута.

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

Смотрите на директиву v-bind как на разрешение выражений в значениях атрибутов. Это невероятно мощно и легко устанавливается с помощью библиотеки Vue.

Директива v-model

Эта директива используется специально для хранения данных приложения в синхронизации с полями ввода, текстовыми областями и элементами выбора. Вот пример:

Для первого раздела этой страницы у нас есть текстовое поле ввода и текстовая область, каждая из которых имеет директиву v-model , которая синхронизирует эти входные поля с свойством message , используя v-model = «message» . Таким образом, если вы измените один из них, модель будет обновлена, а затем будет обновлено другое поле ввода. Идите и попробуйте!

В следующем разделе у нас есть выпадающее меню, синхронизированное со свойством selected с помощью v-model = «selected» . Таким образом, если выбор будет изменен, наша модель будет обновлена.

Наконец, мы имеем множественный выбор. Я показал, как это сделать двумя способами: с несколькими чекбоксами и с несколькими селектами. Поскольку мы можем иметь несколько значений, я создал массив checkedNames , который может хранить несколько значений. Для ввода множественного выбора и чекбоксов у каждой есть директива v-model , ориентированная на свойство checkNames . Попробуйте, и они должны оставаться в синхронизации, когда вы делаете выбор.

Директива v-on

Эта директива позволяет нам присоединять события к элементам HTML. Эта директива может использоваться для определенных элементов, которые могут иметь прикрепленные к ним входные события, такие как зависание, клики, ввод текста, нажатия клавиш и многое другое. В этом примере мы создадим простую кнопку с событием клика.

В директиве v-on после двоеточия мы указываем событие, которое хотим присоединить. В этом примере, когда событие click активировано, мы будем запускать некоторые выражения. Сначала мы открываем диалоговое окно предупреждения, а затем мы изменяем значение свойства clicked . Обратите внимание, что вы можете вызывать функции в выражениях v-on .

Директива v-for

Эта директива является одной из самых мощных среди всех. Мы можем наблюдать за любыми объектами или массивами за изменения и повторно отображать часть нашего кода шаблона для каждого свойства или элемента, найденного в этом объекте или массиве. Например, чтобы отобразить массив имен в виде списка:

JS

В этом примере мы сначала присоединяем директиву v-for к элементу, который вы хотите повторить. Значение директивы указывает объект или массив, которые мы хотим перебрать ( names ), а также переменную, которая будет содержать значение для каждой итерации ( name ). Теперь в этом повторяющемся элементе мы можем использовать переменную name в выражениях.

Если мы затем модифицируем массив, например, с помощью метода push , sort или reverse , данные шаблона будут автоматически обновляться. Попробуйте запустить пример и измените массив в окне консоли.

Компоненты

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

Давайте снова используем директиву v-for для вывода элементов списка. Но на этот раз мы сделаем каждый элемент компонентом. Мы дадим этому компоненту имя, чтобы мы могли настроить его в нашем шаблоне: list-item . Компоненты также могут иметь «зарегистрированные свойства», которым мы можем назначить значение, которое будет назначено при создании компонента. В моем случае компонент list-item будет ожидать получить значение для свойства name , определенного с помощью props:[«name»] .

Давайте теперь создадим этот компонент. Добавьте в свои теги script следующий код:

Также убедитесь, что у вас есть следующие данные приложения:

Здесь вы можете увидеть, что компонент list-item будет повторяться для каждого имени, найденного в массиве. Каждому имени присваивается переменная имени, которая определена в директиве v-for . Мы передаем свойство name компоненту с помощью v-bind .

Каждый экземпляр — это всего лишь копия компонента. Мы можем изменять каждую копию или экземпляр независимо друг от друга. Поэтому подумайте о компонентах как о плане и о случаях, когда копии сделаны из чертежа. Вот конечный результат:

Компиляция и Vue CLI

Мы работаем с очень простым HTML-файлом и позволяем Vue интерпретировать все во время выполнения. Однако Vue имеет инструмент командной строки. Вы можете спросить себя, зачем. Одна из причин заключается в том, что предварительно скомпилированные шаблоны страниц будут работать лучше, чем шаблоны, которые Vue интерпретирует во время выполнения. Другая причина заключается в том, что, если бы мы должны были создать крупномасштабное приложение и попытаться поместить его в один файл HTML, он быстро станет неуправляемым.

Поэтому нам нужна модульность, чтобы разбить большое приложение на более мелкие кусочки.

Установка Vue CLI

Чтобы использовать командную строку, вам нужно открыть консольное окно для вашей операционной системы.

• Для Mac нажмите Command-Space, а затем введите Terminal и нажмите Return.
• Для Windows выполните поиск командной строки в меню запуска, щелкните правой кнопкой мыши и «откройте как администратор».
• Для Linux нажмите Control-Alt-T.

Прежде чем продолжить, убедитесь, что установлена последняя версия Node.js. Затем нам нужно установить Webpack, который сжимает размер нашего проекта, делая его быстрее в нашем браузере. Затем мы можем установить Vue CLI и запустить соответствующие команды для вашей платформы:

Mac и Linux

• sudo npm install -g webpack
• sudo npm install -g vue-cli

Windows (убедитесь, что вы запускаете консоль как администратор)

• npm install -g webpack
• npm install -g vue-cli

Готово! Теперь мы готовы начать настройку нашего продвинутого проекта Webpack. Во-первых, перейдите в каталог, в котором мы хотим создать наш проект, в моем случае на рабочем столе, а затем создадим проект. Вы можете заменить myapp любым желаемым именем проекта.

• vue init webpack myapp

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

Позвольте NPM установить все пакеты зависимостей, а затем мы будем готовы продолжить.

Создание проекта Vue

Как только пакеты будут установлены, мы сможем запустить сервер разработки, набрав npm run dev . Откроется окно вашего браузера, отображающее следующую страницу.

Мы не будем рассматривать структуру всего проекта, но когда вы откроете каталог myapp, вы увидите каталог src. Он содержит файл App.vue, файл main.js и в каталоге components файл Hello.vue.

Файлы Vue являются компонентами. Файл main.js также настраивает начальное представление и потенциально другие конфигурации. Давайте посмотрим на файлы App.vue и Hello.vue .

Здесь вы можете увидеть, что каждый компонент Vue разбит на три части:

: разметка HTML, составляющая часть пользовательского интерфейса.

Источник