Как и обещал, вот и вторая часть 😃

В первой части этого руководства я представил 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.

Связывание данных

  1. Текст. Самая простая форма привязки данных - это интерполяция текста с использованием синтаксиса «Усы» (двойные фигурные скобки - {{ msg }}).
  2. Необработанный HTML - двойные усы интерпретируют данные как простой текст, а не как HTML. Для вывода реального HTML вам потребуется директива v-html.
  3. Атрибуты - усы нельзя использовать внутри атрибутов HTML, вместо этого используйте v-bind директиву: _ 8_
  4. Выражения 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

Удачного кодирования 💻