Начало работы с Vue.js 2.0 Framework

 // src/App/script.js import GithubInput from '../GithubInput/index.vue' import GithubOutput from '../GithubOutput/index.vue' export default { name: 'App', components: { 'github-input': GithubInput, 'github-output': GithubOutput, }, data() { return {} }, } 

И включите его в шаблон:

 <!-- src/App/index.vue --> <template> <div> <github-input></github-input> <github-output></github-output> </div> </template> 

Хотя мы еще не написали код представления, чтобы отобразить извлеченные данные на экране, вы должны быть в состоянии заполнить форму с вашим именем пользователя и затем проверить Vue devtools, чтобы увидеть данные, запрошенные с GitHub. Это показывает, насколько полезны и мощны эти devtools; Вы можете проверить локальное состояние любого компонента и точно увидеть, что происходит.

Отображение некоторых показателей в представлении

Теперь мы можем обновить шаблон, чтобы показать некоторые данные. Давайте обернем этот код в другую директиву v-if чтобы мы отображали данные только после завершения запроса:

 <!-- src/GithubOutput/index.vue --> <p v-if="currentUsername == null"> Enter a username above to see their GitHub data </p> <p v-else> Below are the results for {{ currentUsername }} <div v-if="githubData[currentUsername]"> <h4>{{ githubData[currentUsername].name }}</h4> <p>{{ githubData[currentUsername].company }}</p> <p>Number of repos: {{ githubData[currentUsername].public_repos }}</p> </div> </p> 

Теперь мы можем отобразить детали GitHub на экране, и наше приложение готово!

Refactors

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

Давайте создадим компонент GithubUserData , следуя той же структуре, что и с другими нашими компонентами:

 mkdir src/GithubUserData touch src/GithubUserData/{index.vue,script.js,style.css} 

С этим компонентом есть только одно крошечное отличие: он будет принимать свойство, data , которые будут данными для пользователя. Свойства (или «реквизиты») — это биты данных, которые компонент будет передавать своим родителем, и они ведут себя в Vue так же, как в React. В Vue вы должны явно объявить каждое свойство, в котором нуждается компонент, поэтому здесь я скажу, что наш компонент будет принимать одну подпорку data :

 // src/GithubUserData/script.js export default { name: 'GithubUserData', props: ['data'], data() { return {} } } 

Одна вещь, которая мне действительно нравится в Vue, это то, насколько четко вы должны быть; все свойства, данные и компоненты, которые будет использовать компонент, объявлены явно. Это делает код более приятным для работы и, как мне кажется, намного проще, поскольку проекты становятся все больше и сложнее.

В новом шаблоне у нас точно такой же HTML, как и раньше, хотя мы можем ссылаться на data а не на githubData[currentUsername] :

 <!-- src/GithubUserData/index.vue --> <template> <div v-if="data"> <h4>{{ data.name }}</h4> <p>{{ data.company }}</p> <p>Number of repos: {{ data.public_repos }}</p> </div> </template> <script src="./script.js"></script> <style scoped src="./style.css"></style> 

Чтобы использовать этот компонент, нам нужно обновить компонент GithubOutput . Во-первых, мы импортируем и регистрируем GithubUserData :

 // src/GithubOutput/script.js import bus from '../bus' import Vue from 'vue' import GithubUserData from '../GithubUserData/index.vue' export default { name: 'GithubOutput', components: { 'github-user-data': GithubUserData, }, ... } 

Вы можете использовать любое имя для компонента при его объявлении, поэтому там, где я разместил github-user-data , вы можете разместить все, что захотите. Желательно, чтобы вы придерживались компонентов с чертой в них. Vue не применяет это, но спецификация W3C для пользовательских элементов гласит, что они должны содержать тире, чтобы предотвратить конфликты имен с элементами, добавленными в будущих версиях HTML.

После того, как мы объявили компонент, мы можем использовать его в нашем шаблоне:

 <!-- src/GithubOutput/index.vue --> <p v-else> Below are the results for {{ currentUsername }}: <github-user-data :data="githubData[currentUsername]"></github-user-data> </p> 

Важной частью здесь является то, как я передаю свойство data компоненту:

 :data="githubData[currentUsername]" 

Двоеточие в начале этого атрибута имеет решающее значение; это говорит Vue, что атрибут, который мы передаем, является динамическим и что компонент должен обновляться каждый раз, когда изменяются данные. Vue оценит значение githubData[currentUsername] и обеспечит GithubUserData компонента GithubUserData по мере изменения данных.

Если вы находите :data немного коротки и волшебны, вы также можете использовать более длинный синтаксис v-bind :

 v-bind:data="githubData[currentUsername]" 

Эти два эквивалента, так что используйте любой, который вы предпочитаете.

Вывод

При этом наше приложение GitHub находится в довольно хорошем состоянии! Вы можете найти весь код на GitHub и даже проверить приложение, работающее онлайн .

Когда я начинал с Vue, у меня были большие надежды, так как я слышал только хорошие вещи, и я счастлив сказать, что это действительно оправдало мои ожидания. Работать с Vue — все равно что брать лучшие части React и объединять их с лучшими частями Angular. С некоторыми директивами (такими как v-if , v-else , v-model и т. Д.) Действительно легко начать (и их легче понять, чем выполнять условные выражения в синтаксисе React JSX), но система компонентов Vue выглядит очень похожей реагировать.

Вам предлагается разбить вашу систему на мелкие компоненты, и в целом я нашел, что это очень ценный опыт. Я также не могу похвалить команду Vue достаточно высоко за их документацию: это абсолютно блестяще. Руководства превосходны, а справочник по API — исчерпывающий, но с ним легко ориентироваться, чтобы найти именно то, что вам нужно.

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