Что нового в Vue.js 1.0

 // src/index.js import Vue from 'vue' import App from './components/App.vue' import Home from './components/Home.vue' import Users from './components/Users.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' Vue.use(VueResource) Vue.use(VueRouter) var router = new VueRouter() // Pointing routes to the components they should use router.map({ '/home': { component: Home }, 'users': { component: Users }, }) // Any invalid route will redirect to home router.redirect({ '*': '/home' }) router.start(App, '#app') 

навигация

Мы сразу используем все преимущества ES6, импортируя нужные нам товары. Мы еще не создали компоненты App , Home или Users , но мы будем дальше.

Настройка маршрутизации проста, и vue-router дает нам возможность сопоставления маршрутов непосредственно с компонентами, которые они должны использовать, что мы и сделали в router.map . Чтобы начать все, нам просто нужно вызвать router.start и указать компонент App на div с идентификатором app расположенным в файле index.html .

Итак, почему у нас есть App и Home компонент? Компонент App будет отвечать за размещение панели навигации и выставление выхода для других маршрутов, тогда как компонент Home будет просто приветствием.

 <!-- src/components/App.vue --> <template> <div id="wrapper"> <nav class="navbar navbar-default"> <div class="container"> <ul class="nav navbar-nav"> <li><a v-link="'home'">Home</a></li> <li><a v-link="'users'">Users</a></li> </ul> </div> </nav> <div class="container"> <router-view></router-view> </div> </div> </template> <!-- src/components/Home.vue --> <template> <h1>Home</h1> </template> 

В контейнере под панелью навигации у нас есть <router-view> , где будет отображаться контент из других компонентов. Для навигации между другими представлениями мы установили ссылки на них с помощью v-link на тегах привязки панели навигации. Эти ссылки указывают на названия наших маршрутов, которые мы определили в router.map .

Внутри этих компонентов мы просто определяем <template> , и это потому, что им не нужно ничего делать, кроме разметки экрана. Давайте установим компонент Users далее, чтобы увидеть, как мы можем работать с JavaScript.

Маршрут пользователей

Для этого компонента нам нужно сделать HTTP-вызов к GitHub API, чтобы получить список пользователей. Отправив запрос GET на https://api.github.com/users мы получим 30 профилей GitHub.

 <!-- src/components/Users.vue --> <template> <h1>Users</h1> <button class="btn btn-primary" @click="fetchUsers()"> Get Users </button> <div class="row"> <div class="col-xs-6 col-md-3" v-for="user in users"> <div class="thumbnail"> <img :src="user.avatar_url" alt="{{ user.login }}"> <div class="caption"> <a :href="user.html_url"> <h3 class="username">{{ user.login }}</h3> </a> </div> </div> </div> </div> </template> <script> export default { data() { return { users: [] } }, methods: { fetchUsers() { this.$http.get('https://api.github.com/users', (data) => { this.users = data }) .error((err) => console.log(err)) } } } </script> <style> .username { text-align: center; } </style> 

В этом компоненте происходит нечто большее, чем в предыдущем. Давайте начнем с области <script> . Компонентам Vue необходимо экспортировать простой объект, который впоследствии преобразуется в функцию конструктора компонента. Этот объект будет выглядеть как обычный экземпляр Vue с некоторыми отличиями.

В объекте methods у нас есть функция fetchUsers . Этот метод делает запрос GET к API GitHub и устанавливает возвращаемые данные в массиве users . Если есть ошибка, она регистрируется на консоли.

В <template> у нас есть некоторая структура, настроенная для отображения аватара и имени пользователя со ссылкой на их профиль. Как вы можете видеть, мы используем новый синтаксис директивы сокращений: @click «Get Users» @click :src для тега img и :href a тега a .

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

Горячая замена модуля в действии

Как упоминалось ранее, одним из преимуществ использования Webpack с vue-loader является то, что мы получаем горячую замену модуля бесплатно. Мы можем увидеть это в действии, поставив нашего редактора и обозревателя рядом. Простое редактирование одного из шаблонов позволит нам сразу же увидеть, как изменения вступят в силу. Например, если мы изменим h1 в нашем компоненте Users.vue и сохраним, новый компонент будет заменен, изменения будут отражены автоматически.

 <!-- src/components/Users.vue --> <template> <h1>GitHub Users</h1> ... 

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

Завершение

Vue.js 1.0 вносит несколько изменений синтаксиса, которые делают сглаживание шаблонов. Более заметными изменениями являются улучшения в других частях экосистемы Vue, таких как vue-loader и vueify . Горячая замена модуля и ES6 делают процесс разработки очень приятным.

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