Как и обещал, вот и вторая часть 😃
В первой части этого руководства я представил Vue, и мы узнали, как настроить и создать простое приложение в vue. Если вы этого не читали, вот ссылка.
Шаг 2
Собирайте и систематизируйте данные
Для моей веб-страницы мне нужно было собрать имена, роли, ссылки на профили в социальных сетях и т. Д. Вот JSON, который я создал с моими данными.
Поместите файл json в папку src / assets.
Шаг 3
Импортировать Json в компонент
Hello.vue - это файл компонента Vue внутри src / components. Компоненты - одна из самых мощных функций Vue. Они помогают расширить базовые элементы HTML для инкапсуляции кода многократного использования. На высоком уровне компоненты - это настраиваемые элементы, к которым компилятор Vue прикрепляет поведение.
Если вы знакомы с React или Angular2, идея компонентов и передачи состояния не будет для вас новой. Если нет, давайте рассмотрим некоторые из основных понятий.
Веб-сайты, большие и маленькие, обычно состоят из разных частей, и их абстрагирование на более мелкие части упрощает их структурирование, рассуждение, повторное использование и делает наш код более разборчивым. Вместо того, чтобы копаться во всей разметке на длинной многогранной странице, мы могли бы составить ее из компонентов.
Хорошо, теперь вернемся к нашему веб-приложению.
В файле Hello.vue я изменил строки между тегами скрипта, как показано выше.
Сначала импортируйте данные json. Затем внутри default {} задайте имя для вашего компонента, а внутри data () {} поместите импортированный json.
И это конец шага 3.
Шаг 4
Напишите шаблон ‹/›
Vue.js использует синтаксис шаблона на основе HTML, который позволяет декларативно привязать визуализированную модель DOM к данным базового экземпляра Vue. Все шаблоны Vue.js представляют собой действительный HTML-код, который может анализироваться браузерами, соответствующими спецификациям, и анализаторами HTML.
Под капотом Vue компилирует шаблоны в функции рендеринга Virtual DOM. В сочетании с системой реактивности Vue может разумно определять минимальное количество компонентов для повторной визуализации и применять минимальное количество манипуляций с DOM при изменении состояния приложения.
Если вы знакомы с концепциями Virtual DOM и предпочитаете грубую мощь JavaScript, вы также можете напрямую писать функции рендеринга вместо шаблонов с дополнительной поддержкой JSX.
Директивы
Директивы - это специальные атрибуты с префиксом v-
. Пример:
<p v-if=”seen”>Now you see me</p>
Здесь директива v-if
удаляет / вставляет элемент <p>
на основе истинности значения выражения seen
.
Связывание данных
- Текст. Самая простая форма привязки данных - это интерполяция текста с использованием синтаксиса «Усы» (двойные фигурные скобки -
{{ msg }}
). - Необработанный HTML - двойные усы интерпретируют данные как простой текст, а не как HTML. Для вывода реального HTML вам потребуется директива
v-html
. - Атрибуты - усы нельзя использовать внутри атрибутов HTML, вместо этого используйте
v-bind
директиву: _ 8_ - Выражения JavaScript - до сих пор в наших шаблонах мы связывались только с простыми ключами свойств. Но Vue.js фактически поддерживает всю мощь выражений JavaScript внутри всех привязок данных. То есть
{{ 1+2 }}
будет отображаться как 3.
В нашем компоненте шаблон выглядит так:
Холод! Я объясню. Сначала создайте div для хранения всего нашего содержимого. Затем нам нужно написать эти две части.
Часть 1
У нас есть 5 объектов в нашем массиве Json. Итак, сначала мы открываем тег ul и внутри него пишем общий тег li для визуализации всех 5 объектов.
<li v-for="mem in members">
Директива v-for перебирает все элементы в нашем массиве и создает li для каждого из них. Теперь, используя объект mem, мы можем получить доступ к содержимому объекта Json.
Часть 2
На данный момент у нас есть доступ к каждому объекту через объект mem. Итак, теперь давайте напишем код для соответствующей визуализации всех данных.
Первый - это изображение профиля:
<img class="round-profile-image" :src="mem.image"/>
: src - это сокращение от директивы vue.
Во-вторых, это имена, роли и прочее:
<span class="name"> {{ mem.name + ' ' + mem.surname }} </span><BR /> <span class="secondary-text"> {{ mem.role + ' & ' + mem.title }} <BR /> {{ mem.city + ', ' + mem.country }} </span><BR /> <span class="bio"> {{'\"' + mem.bio + '\"'}} </span>
Третий - это гиперссылки на профили в социальных сетях:
<ul> <li> <a :href="mem.links.facebook.profile" target="_blank"> <img class="round-icon panin_animation_on_hover" :src="mem.links.facebook.icon"/> </a> </li> <!-- Repeat same for all other profiles --> </ul>
Во всех приведенных выше фрагментах кода мы использовали директивы vue для доступа к данным из нашего экземпляра vue.
Хорошо, на этом шаг 4 завершен.
Шаг 5
Добавляем стили и строим
Ставьте несколько стилей по своему усмотрению.
Теперь весь файл выглядит так:
Вот и все, миссия выполнена.
Теперь запустите сервер разработки и протестируйте приложение. В папке проекта введите следующее.
$ npm run dev
Чтобы построить для производства:
$ npm run build
Идите вперед и создавайте потрясающие вещи с Vue.Js
Удачного кодирования 💻