() translation by (you can also view the original English article)
Vue является популярной платформой JavaScript для веб-приложений с простой привязкой между данными в памяти и пользовательским интерфейсом. Теперь Weex позволяет нам кодировать собственные мобильные приложения с использованием фреймворка Vue!
Почему мы используем Vue и другие фреймворки привязки данных, такие как Angular и React? Что в них такого особенного? Мы используем их, чтобы гарантировать, что данные приложения, хранящиеся в памяти, синхронизируются с пользовательским интерфейсом и наоборот.
Мы также используем эти фреймворки, чтобы мы могли быстро создавать приложения и оптимизировать их для производительности.
В этом уроке я покажу вам, как использовать фреймворк Vue, в частности, как понять его концепции привязки данных и шаблонов. Затем я расскажу о платформе Weex для кодирования собственных мобильных приложений с помощью Vue!
Связывание данных
Давайте рассмотрим простой пример, чтобы понять, как эти фреймворки могут фактически сэкономить нам время. Мы хотим простое поле ввода, которое синхронизируется с данными наших приложений. Наше приложение само по себе может программно изменить данные, и пользователь может изменить его с помощью пользовательского ввода, поэтому нам нужно наблюдать за данными пользовательского интерфейса и приложения.
Написание кода, который поддерживает эту привязку данных, будет подробным. Нам нужно будет создавать прослушиватели событий и объекты прокси и наблюдаемые данные для записи любых изменений в данных приложения. И эти сложности все растут и растут по мере добавления новых типов данных и полей для ввода. Vue и другие фреймворки с биндингом данных позволяют нам не писать весь этот код привязки.
С помощью Vue, если наш пользователь меняет некоторые входные данные, они будет синхронизироваться с данными приложения так:
Или, если приложение изменит данные, оно обновит пользовательский интерфейс следующим образом:
Когда мы синхронизируем пользовательский интерфейс и данные приложения, это означает, что наше приложение выполняет именно то, что мы ожидаем от него. Vue будет управлять всем этим и разрешать другие мощные процессы привязки данных.
Настройка
Теперь, когда мы знаем, почему мы используем эти фреймворки, давайте создадим простое приложение Vue для запуска некоторых примеров. Создайте новый HTML-файл в любом месте вашего компьютера и вставьте в него следующий код:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Tuts+ Vue</title> |
5 |
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> |
6 |
</head>
|
7 |
<body>
|
8 |
|
9 |
<div id="app"> |
10 |
|
11 |
</div>
|
12 |
|
13 |
<script>
|
14 |
var app = new Vue({ el: '#app' }); |
15 |
</script>
|
16 |
|
17 |
</body>
|
18 |
</html>
|
Это простой HTML-файл, который ссылается на библиотеку Vue JS. Он содержит элемент div с id app. Внутри тегов script у нас есть переменная, называемая app, которую мы используем, чтобы указать на наше отображение - я объясню эту часть позже.
Затем мы создаем новый экземпляр Vue или «view». Этот конструктор сообщает структуре, что элемент будет содержать наш пользовательский интерфейс приложения и держать его в синхронизации с данными приложения.
Теперь дважды щелкните файл HTML, чтобы открыть его в браузере, и откройте окно консоли браузера.
Текстовая интерполяция
Интерполяция текста позволяет вставлять выражения в наш HTML-код, который будет интерпретироваться при визуализации страницы. Выражения в реальном времени, поэтому, если данные, на которых они зависят, будут изменены, страница будет обновляться в реальном времени. Это называется декларативным рендерингом, который позволяет размещать выражения в любом месте содержимого элемента. Давайте рассмотрим простой пример.
JS
1 |
<script> |
2 |
var app = new Vue({ |
3 |
el: '#app', |
4 |
data: |
5 |
{
|
6 |
message: "Hello world" |
7 |
}
|
8 |
});
|
9 |
</script> |
Наш код JavaScript теперь содержит объект data, который сохранит все данные наших приложений для этого представления. Внутри я создал свойство message со строкой «Hello world».
Затем давайте отобразим это свойство в HTML.
HTML
1 |
<div id="app"> |
2 |
<pre style="font-family: 'helvetica'; "> |
3 |
{{ message }}
|
4 |
|
5 |
{{ message.split('').reverse().join('') }}
|
6 |
</pre>
|
7 |
</div>
|
Выражения обозначаются синтаксисом двойной фигурной скобки. Vue JS управляет зависимостями каждого выражения и обновляет страницу в реальном времени, если они меняются. В нашем случае мы имеем два выражения со свойством message - как зависимость каждого из них. Первое выражение {{message}} просто отображает свойство message. Второе выражение {{message.split (''). Reverse (). Join ('')}} принимает свойство 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.
JS
1 |
<script> |
2 |
var app = new Vue({ |
3 |
el: '#app', |
4 |
data: |
5 |
{
|
6 |
number: 20, |
7 |
object: |
8 |
{
|
9 |
type: "Full Name Object", |
10 |
names: ["Lawrence","Anothy","Turton"] |
11 |
}
|
12 |
}
|
13 |
});
|
14 |
</script> |
HTML
1 |
<div id="app"> |
2 |
|
3 |
<div v-bind:data-attr=" object.type "> |
4 |
{{ object.type }}
|
5 |
</div>
|
6 |
|
7 |
<div v-bind:data-attr=" object.names "> |
8 |
{{ object.names }}
|
9 |
</div>
|
10 |
|
11 |
<div v-bind:data-attr=" number * 20 / 2 "> |
12 |
{{ number * 20 / 2 }}
|
13 |
</div>
|
14 |
|
15 |
<div v-bind:data-attr=" [ object.type, object.names, number * 20 / 2 ] "> |
16 |
{{ [ object.type, object.names, number * 20 / 2 ] }}
|
17 |
</div>
|
18 |
|
19 |
</div>
|
В приведенном выше примере мы привязали атрибут, называемый data-attr, к ряду разных источников данных. Сначала мы привязали его к свойствам type и names у object. Затем мы привязали его к математическому выражению, а затем объединили все привязки в один атрибут массива.
Взгляните на вывод в браузере: вы можете щелкнуть вкладку «Элементы», чтобы увидеть результат каждого значения атрибута.
Снова, вы можете изменить данные приложения в консоли, чтобы увидеть процесс привязки данных.
Смотрите на директиву v-bind как на разрешение выражений в значениях атрибутов. Это невероятно мощно и легко устанавливается с помощью библиотеки Vue.
Директива v-model
Эта директива используется специально для хранения данных приложения в синхронизации с полями ввода, текстовыми областями и элементами выбора. Вот пример:
JS
1 |
<script> |
2 |
var app = new Vue({ |
3 |
el: '#app', |
4 |
data: |
5 |
{
|
6 |
message: "message string", |
7 |
selected:"", |
8 |
checkedNames: [] |
9 |
}
|
10 |
});
|
11 |
</script> |
HTML
1 |
<div id="app"> |
2 |
|
3 |
<input type="text" v-model="message"> |
4 |
|
5 |
<textarea v-model="message"></textarea> |
6 |
|
7 |
<hr>
|
8 |
|
9 |
<select v-model="selected"> |
10 |
<option disabled value="">Select a name</option> |
11 |
<option>Jack</option> |
12 |
<option>John</option> |
13 |
<option>Mike</option> |
14 |
</select>
|
15 |
<span>Selected: {{ selected }}</span> |
16 |
|
17 |
<hr>
|
18 |
|
19 |
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> |
20 |
<label for="jack">Jack</label> |
21 |
<input type="checkbox" id="john" value="John" v-model="checkedNames"> |
22 |
<label for="john">John</label> |
23 |
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> |
24 |
<label for="mike">Mike</label> |
25 |
|
26 |
<select v-model="checkedNames" multiple> |
27 |
<option>Jack</option> |
28 |
<option>John</option> |
29 |
<option>Mike</option> |
30 |
</select>
|
31 |
<br>
|
32 |
<span>Selected Names: {{ checkedNames }}</span> |
33 |
|
34 |
</div>
|
Для первого раздела этой страницы у нас есть текстовое поле ввода и текстовая область, каждая из которых имеет директиву v-model, которая синхронизирует эти входные поля с свойством message, используя v-model = "message". Таким образом, если вы измените один из них, модель будет обновлена, а затем будет обновлено другое поле ввода. Идите и попробуйте!
В следующем разделе у нас есть выпадающее меню, синхронизированное со свойством selected с помощью v-model = "selected". Таким образом, если выбор будет изменен, наша модель будет обновлена.
Наконец, мы имеем множественный выбор. Я показал, как это сделать двумя способами: с несколькими чекбоксами и с несколькими селектами. Поскольку мы можем иметь несколько значений, я создал массив checkedNames, который может хранить несколько значений. Для ввода множественного выбора и чекбоксов у каждой есть директива v-model, ориентированная на свойство checkNames. Попробуйте, и они должны оставаться в синхронизации, когда вы делаете выбор.
Директива v-on
Эта директива позволяет нам присоединять события к элементам HTML. Эта директива может использоваться для определенных элементов, которые могут иметь прикрепленные к ним входные события, такие как зависание, клики, ввод текста, нажатия клавиш и многое другое. В этом примере мы создадим простую кнопку с событием клика.
JS
1 |
<script> |
2 |
var app = new Vue({ |
3 |
el: '#app', |
4 |
data: |
5 |
{
|
6 |
clicked: "" |
7 |
}
|
8 |
});
|
9 |
</script> |
HTML
1 |
<div id="app"> |
2 |
|
3 |
<button v-on:click=" [ alert('hello'), clicked = 'hello' ] ">Click me!</button> |
4 |
|
5 |
{{ clicked }}
|
6 |
|
7 |
</div>
|
В директиве v-on после двоеточия мы указываем событие, которое хотим присоединить. В этом примере, когда событие click активировано, мы будем запускать некоторые выражения. Сначала мы открываем диалоговое окно предупреждения, а затем мы изменяем значение свойства clicked. Обратите внимание, что вы можете вызывать функции в выражениях v-on.
Директива v-for
Эта директива является одной из самых мощных среди всех. Мы можем наблюдать за любыми объектами или массивами за изменения и повторно отображать часть нашего кода шаблона для каждого свойства или элемента, найденного в этом объекте или массиве. Например, чтобы отобразить массив имен в виде списка:
JS
1 |
<script> |
2 |
var app = new Vue({ |
3 |
el: '#app', |
4 |
data: |
5 |
{
|
6 |
names: [ "Lawrence", "John", "Mike", "Justin" ] |
7 |
}
|
8 |
});
|
9 |
</script> |
HTML
1 |
<div id="app"> |
2 |
|
3 |
<ul>
|
4 |
<li v-for="name in names">{{ name }}</li> |
5 |
</ul>
|
6 |
|
7 |
</div>
|
В этом примере мы сначала присоединяем директиву v-for к элементу, который вы хотите повторить. Значение директивы указывает объект или массив, которые мы хотим перебрать (names), а также переменную, которая будет содержать значение для каждой итерации (name). Теперь в этом повторяющемся элементе мы можем использовать переменную name в выражениях.
Если мы затем модифицируем массив, например, с помощью метода push, sort или reverse, данные шаблона будут автоматически обновляться. Попробуйте запустить пример и измените массив в окне консоли.
Компоненты
Процесс привязки данных происходит в представлениях. Компоненты - это просто многоразовые представления, которые мы можем повторить в нашем приложении. Каждый компонент должен иметь некоторые данные шаблона, которые должны отображаться как часть пользовательского интерфейса и некоторых данных приложения. Вы можете по желанию включить какой-то стиль, если хотите.
Давайте снова используем директиву v-for для вывода элементов списка. Но на этот раз мы сделаем каждый элемент компонентом. Мы дадим этому компоненту имя, чтобы мы могли настроить его в нашем шаблоне: list-item. Компоненты также могут иметь «зарегистрированные свойства», которым мы можем назначить значение, которое будет назначено при создании компонента. В моем случае компонент list-item будет ожидать получить значение для свойства name, определенного с помощью props:["name"].
Давайте теперь создадим этот компонент. Добавьте в свои теги script следующий код:
JS
1 |
Vue.component('list-item', { |
2 |
template: '<li>{{ name }}</li>', |
3 |
props: [ "name" ] |
4 |
});
|
Также убедитесь, что у вас есть следующие данные приложения:
1 |
var app = new Vue({ |
2 |
el: '#app', |
3 |
data: |
4 |
{
|
5 |
names: [ "Lawrence", "John", "Mike", "Justin" ] |
6 |
}
|
7 |
});
|
HTML
1 |
<div id="app"> |
2 |
<ul>
|
3 |
<list-item v-for="name in names" v-bind:name="name"></list-item> |
4 |
</ul>
|
5 |
</div>
|
Здесь вы можете увидеть, что компонент 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 webpacksudo npm install -g vue-cli
Windows (убедитесь, что вы запускаете консоль как администратор)
npm install -g webpacknpm install -g vue-cli
Готово! Теперь мы готовы начать настройку нашего продвинутого проекта Webpack. Во-первых, перейдите в каталог, в котором мы хотим создать наш проект, в моем случае на рабочем столе, а затем создадим проект. Вы можете заменить myapp любым желаемым именем проекта.
-
vue init webpackmyapp
Вам будет предложено ряд вопросов о вашем проекте, в которых вам будет предложено заполнить такие данные, как название и описание, а так же вас спросят, устанавливать ли сторонние плагины. В этом примере вы можете отвечать на все необязательные дополнительные функции. После его создания нам нужно установить зависимости, поэтому перейдите к каталогу проекта, и мы запустим команду установки.
-
cd myapp npm install
Позвольте NPM установить все пакеты зависимостей, а затем мы будем готовы продолжить.
Создание проекта Vue
Как только пакеты будут установлены, мы сможем запустить сервер разработки, набрав npm run dev. Откроется окно вашего браузера, отображающее следующую страницу.
Мы не будем рассматривать структуру всего проекта, но когда вы откроете каталог myapp, вы увидите каталог src. Он содержит файл App.vue, файл main.js и в каталоге components файл Hello.vue.
Файлы Vue являются компонентами. Файл main.js также настраивает начальное представление и потенциально другие конфигурации. Давайте посмотрим на файлы App.vue и Hello.vue.
Здесь вы можете увидеть, что каждый компонент Vue разбит на три части:
-
<template>: разметка HTML, составляющая часть пользовательского интерфейса. -
<script>: данные приложения, фильтры, методы, вычисленные свойства, наблюдатели и методы. -
<style>: стиль CSS или Sass для наших компонентов.
Компиляция
Компиляция всех компонентов вместе приведет к крупномасштабному применению. Это означает, что когда мы разрабатываем, мы работаем над небольшими модульными фрагментами кода, называемыми компонентами, а не для всего приложения. В Vue у нас есть однофайловые компоненты, которые содержат JavaScript, HTML и CSS. Он даже позаботится о переводе ES6 в ES5, Sass в CSS и Jade в HTML, если вы решите использовать эти языки.
Вы заметите, что в файле App.vue я выделил, где он импортирует компонент Hello.vue. Компоненты могут быть вложены в другие компоненты!
При компиляции наш проект строится следующим образом:
Мы по-прежнему используем тот же синтаксис, что и в предыдущих примерах. Однако теперь мы работаем с меньшими файлами Vue и скомпилируем их вместе. У нас также есть несколько дополнительных функций, таких как препроцессоры и Jade, Sass, ES6 и сжатие Webpack.
Weex
Теперь, когда мы понимаем работу фреймворка Vue, давайте быстро посмотрим, как мы можем взять наше веб-приложение и превратить его в нативное мобильное приложение, устанавливаемое на iOS или Android.
Weex - это гибридная система, то есть она позволяет использовать несколько технологий, так же как гибридный автомобиль может использовать как электрический, так и бензиновый двигатель. В нашем случае мы используем код JavaScript из нашего веб-приложения, но мы предоставляем собственный пользовательский интерфейс. Кроме того, из JavaScript мы можем получить доступ к собственным API-интерфейсам устройства для доступа к оборудованию, например, к камере, датчикам и файловой системе.
С Weed вместо представления нашего приложения в HTML мы используем XML. На самом деле HTML и XML очень похожи, поэтому синтаксис будет выглядеть знакомым. Затем этот XML будет преобразован в собственные компоненты. Теперь наш JavaScript сможет разговаривать с этими родными компонентами, точно так же, как он разговаривает с DOM в Vue с HTML. Не только это, но и собственные компоненты можно стилизовать и позиционировать с помощью CSS, включая анимацию, переходы и многое другое, и они могут быть интегрированы в собственный слой.
Это просто тизер того, что может сделать Weex. В следующих уроках я расскажу вам более подробно о Weex, и мы увидим, как создавать некоторые практические кросс-платформенные нативные приложения.
Плюсы
Vue имеет простой синтаксис и очень быстро растет. Weex позволяет нам создавать мобильные приложения с использованием JavaScript и Vue, но при этом создавать нативные мобильные приложения.
Минусы
Сам Vue стабилен, но Weex все еще находится в раннем развитии - он в настоящее время находится в инкубаторе Apache. Но не волнуйтесь, Weex скоро будет готово к продакшену, и его поддержал технический гигант Alibaba. Итак, если вы планируете использовать его, то можете подождать, пока Weex не достигнет полной версии.
Вывод
Теперь вы видели, как привязка данных является основной причиной использования Vue и ему подобных фреймворков. Они экономят время разработки и обеспечивают стандартный способ создания приложений. Вы также видели, как использовать текстовую интерполяцию, директивы и события в Vue и как эти функции работают вместе, чтобы синхронизировать данные приложения с пользовательским интерфейсом.
Мы начали с базового проекта с одним отображением. Но затем мы создали более продвинутый проект с меньшими, более модульными представлениями, называемыми компонентами. Компоненты позволяют нам разбить наш проект на более мелкие части, поэтому его легче кодировать и поддерживать. После этого мы увидели, как использовать компилятор Vue, чтобы разрешить использование ES6, Jade и Sass.
Все эти знания помогут вам при написании приложений с помощью Weex. Weex позволяет нам взять наше веб-приложение Vue и превратить его в мобильное приложение. Weex немного отличается: мы используем XML со специальными компонентами вместо HTML, но мы все равно можем использовать другие веб-технологии, такие как CSS и JavaScript. Это означает, что нам не нужно менять нашу логику приложений из веб-приложения в мобильное приложение.
Следите за моей следующей статьей о развитии Weex, а пока ознакомьтесь с некоторыми другими нашими статьями о разработке мобильных приложений с помощью веб-технологий.
