5 декабря 2016 года : этот учебник охватывает Vue.js 1.x. Если вы ищете контент Vue 2, смотрите здесь: Начало работы с Vue.js 2.0 Framework .
21 июля 2016 года : статья была обновлена и теперь включает Vue.js 1.0.x, а также добавлен раздел о компонентах.
Vue.js — это библиотека JavaScript, которая помогает создавать веб-приложения с использованием архитектурного шаблона MVVM (Model-View-ViewModel) . На первый взгляд, он может показаться очень похожим на AngularJS , но как только вы начнете работать с ним, вы быстро поймете, что Vue.js не только намного проще и проще в освоении, но и более гибким.
В этом вводном руководстве я познакомлю вас с основными понятиями Vue.js и предоставлю полный обзор его наиболее важных функций.
Vue.js 1.0.x имеет несколько синтаксических изменений, которые не совместимы с Vue.js 0.12.x. Если у вас есть опыт использования этих ранних версий, возможно, вы уже заметили некоторые изменения в этом руководстве. Вы можете получить обзор всех изменений здесь: Что нового в Vue.js 1.0
Добавление Vue.js на вашу страницу
Хотя вы можете получить последний выпуск Vue.js от GitHub , вам может быть проще загрузить его из CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"> </script> Создание View-Model
В Vue.js view-модели создаются с использованием класса Vue . Если вам интересно, что такое модель представления, вы можете думать о ней как об объекте, который позволяет очень просто отображать данные вашей модели внутри представления (вы можете рассматривать любой литерал объекта как модель и любой элемент HTML UI). как мнение).
Чтобы увидеть, как работает модель представления, давайте начнем с создания представления. Пустой <div> пока подойдет:
<div id="my_view"> </div>
И вот объектный литерал, который будет нашей моделью. Поскольку он работает с кодом JavaScript, убедитесь, что вы создали его внутри <script> или в отдельном файле JS.
var myModel = { name: "Ashley", age: 24 };
Теперь, когда у нас есть представление и модель, пришло время создать модель представления (экземпляр Vue ), которая связывает их вместе:
var myViewModel = new Vue({ el: '#my_view', data: myModel });
Как видите, свойство el указывает на представление (здесь можно использовать любой селектор CSS), а свойство data указывает на модель. Наша модель просмотра теперь готова к использованию.
Чтобы отобразить данные вашей модели в представлении, вы должны использовать привязки в стиле усов. Например, чтобы отобразить свойство age вашей модели, вы должны добавить строку {{ age }} внутри вашего представления. В следующем фрагменте кода используются оба свойства модели:
<div id="my_view"> {{ name }} is {{ age }} years old. <!-- Evaluated to "Ashley is 24 years old" --> </div>
Любые изменения, сделанные вами в вашей модели, будут сразу же видны в представлении.
Создание двусторонних привязок
Привязка в стиле усов, которую мы использовали в предыдущем примере, является односторонней. Это означает, что он может только показывать данные модели, но не изменять их. Если вы хотите разрешить представлению редактировать модель, вы должны вместо этого создать двустороннюю привязку, используя директиву v-model .
Давайте изменим наше представление так, чтобы оно содержало input элемент, v-model указывает на свойство name :
<div id="my_view"> <label for="name">Enter name:</label> <input type="text" v-model="name" id="name" name="name" /> <p>{{ name }} is {{ age }} years old.</p> </div>
На этом этапе, если вы измените значение в поле ввода, ваша модель изменится немедленно.
Использование фильтров
Фильтр — это функция, которую вы можете использовать внутри директивы или привязки в стиле усов. Фильтру всегда предшествует символ канала ( | ). Например, если вы хотите отобразить свойство name в верхнем регистре, ваша привязка в стиле усов будет выглядеть так:
{{ name | uppercase }}
Также в этом случае есть демо для фильтров, которые вы можете проверить:
Фильтры lowercase и lowercase capitalize могут использоваться аналогичным образом.
Мы поговорим подробнее о фильтрах в следующем разделе.
Рендеринг массивов
Если ваша модель имеет массив, вы можете отобразить содержимое этого массива, добавив директиву v-for в элемент <li> списка. Чтобы продемонстрировать это, давайте добавим массив к нашей модели:
var myModel = { name: "Ashley", age: 24, friends: [ { name: "Bob", age: 21 }, { name: "Jane", age: 20 }, { name: "Anna", age: 29 } ] };
Следующий код показывает, как отобразить свойство name каждого объекта в массиве friends :
<div id="my_view"> <ul> <li v-for="friend in friends"> {{ friend.name }} </li> </ul> </div>
Чтобы изменить порядок, в котором перечислены элементы, используйте фильтр orderBy внутри директивы v-for . Например, если вы хотите упорядочить элементы по age , ваш код должен выглядеть следующим образом:
<div id="my_view"> <ul> <li v-for="friend in friends | orderBy 'age'"> {{ friend.name }}</li> </ul> </div>
Вы также можете сделать элементы условно. Для достижения этой цели используйте фильтр filterBy . Например, в следующем примере показано, как отобразить только те элементы, которые содержат символ «a» в поле name :
<div id="my_view"> <ul> <li v-for="friend in friends | filterBy 'a' in 'name'"> {{ friend.name }} </li> </ul> </div>
Эта третья демонстрация использует двустороннюю привязку данных и фильтр filterBy для имитации поиска:
Обработка событий
В Vue.js, если вам нужно обрабатывать события, связанные с вашим представлением, вы должны добавить обработчики событий в свойстве methods модели представления. Внутри всех обработчиков событий Vue.js вы можете использовать this для доступа к элементам в модели данных.
Следующая модель представления содержит обработчик щелчка:
var myViewModel = new Vue({ el: '#my_view', data: myModel, // A click handler inside methods methods: { myClickHandler: function(e) { alert("Hello " + this.name); } } });
Чтобы связать обработчик событий, определенный в модели представления, с одним или несколькими элементами пользовательского интерфейса в представлении, вы должны использовать директиву v-on . Например, в следующем представлении есть <button> которая использует директиву v-on для вызова myClickHandler :
<div id="my_view"> Name: <input type="text" v-model="name"> <button v-on:click="myClickHandler">Say Hello</button> </div>
Соединение этих фрагментов приводит к демонстрации обработчика кликов :
Создание компонентов
Vue.js позволяет создавать собственные элементы HTML, которые можно использовать в ваших представлениях. Используя такие элементы, вы можете сделать свой код не только более кратким, но и более читабельным.
Чтобы определить и зарегистрировать пользовательский элемент HTML, необходимо создать компонент Vue, используя метод component класса Vue . Вы можете указать содержимое пользовательского элемента, используя свойство template компонента.
Вот фрагмент кода, который определяет и регистрирует простой пользовательский элемент HTML с именем <sitepoint> .
Vue.component('sitepoint', { template: '<a href="https://www.sitepoint.com">Sitepoint</span>' });
Элемент <sitepoint> теперь можно использовать внутри вашего представления, как и любой другой стандартный элемент HTML.
<div id="my_view"> <sitepoint></sitepoint> </div>
Стандартные элементы HTML обычно имеют связанные с ними атрибуты, которые позволяют контролировать их внешний вид и поведение. Пользовательские элементы, которые вы создаете с помощью Vue.js, тоже могут иметь такие атрибуты. Чтобы указать, какие атрибуты может иметь ваш элемент, вы должны использовать свойство props при создании связанного компонента.
Вот как бы вы добавили опору с названием channel в элемент <sitepoint> :
Vue.component('sitepoint', { props: ['channel'], template: '<a href="https://www.sitepoint.com/{{ channel | lowercase }}">{{ channel }} @Sitepoint</span>', });
Как видно из кода выше, привязки в стиле усов могут использоваться для встраивания значения реквизита в template .
Теперь вы можете использовать атрибут channel внутри <sitepoint> . Например, вот как вы можете использовать его для ссылки на два разных канала Sitepoint:
<div id="my_view"> <sitepoint channel="JavaScript"></sitepoint> <sitepoint channel="Web"></sitepoint> </div>
Не стесняйтесь изменять код в следующей демонстрации, чтобы поэкспериментировать с другими шаблонами и реквизитом.
Вывод
В этом вводном руководстве по Vue.js мы рассмотрели, как использовать одностороннее и двустороннее связывание данных, директивы, фильтры и события. Мы также узнали, как создавать свои собственные элементы HTML с использованием компонентов Vue.js.
Охватываемых тем должно быть достаточно, чтобы начать создавать интерактивные веб-интерфейсы с использованием этой простой структуры. Если вам нужны дополнительные функции, такие как поддержка Ajax или операции маршрутизации, существует все больше плагинов Vue.js, доступных для добавления в ваши проекты.
Чтобы узнать больше о Vue.js, я предлагаю ознакомиться со справочной информацией по API Vue.js, а также взглянуть на руководство, доступное на веб-сайте .