Приложения для одиночных страниц с vue.js и колбой: настройка vue.js

Посмотрите на содержимое раздела скрипта. Здесь вы увидите, что объект экспортируется. Этот объект будет введен в Vue Экземпляр, который был инициализирован в файле Main.js. Внутри этого объекта JavaScript это данные Метод, который возвращает объект. Этот объект - это то, где вы можете разместить состояние компонента (данные), и в этом примере это одно свойство, называемое Msg Отказ

Вы можете получить доступ и отобразить состояние своего компонента по имени свойства в HTML в разделе Шаблон. В приведенном примере вы видите это как {{msg}} Отказ Двойные вьющиеся кронштейны - это синтаксис шаблона по умолчанию для выполнения текстовой интерполяции и вдохновлен Усы Шаблонная система. В любое время вы хотите отобразить данные в HTML вашего компонента, обертывают его в двойных вьющихся скобках.

Принося в какой-то стиль

Чтобы дать это приложение немного лучше обоснованной привлекательности, я буду использовать Bulma CSS Framework. Целью этого учебного пособия не будет о том, как использовать Bulma, но я все еще хочу включить его, чтобы устроить робкий внешний вид нестандартного HTML.

Вернуться в терминал в том же каталоге, что и файл package.json Установите и сохраняют Bulma в проект со следующей командой:

$ npm install --save bulma

Кроме того, мне нужно будет установить некоторые инструменты разработки для правильной загрузки стилей для приложения, чтобы компоненты знали, как работать с ними. Для этого NPM устанавливает эти дополнительные пакеты.

$ npm install --save-dev vue-style-loader
$ npm install --save-dev css-loader
$ npm install --save-dev sass-loader
$ npm install --save-dev node-sass

Теперь открывайте app.vue и замените раздел стиля с тем, что ниже, которое будет импортировать рамки Bulma с использованием синтаксиса импорта SCSS.

Дайте ему дом (страница)

Хорошо, теперь, когда у нас есть базовое понимание структуры и основных частей SPA VUE.JS, я могу начать запись кода.

Начните с переименования файла helloworld.vue на home.vue, а затем очистите содержимое шаблона, сценария и секции стилей. Кроме того, в App.Vue Удалить строку для логотипа Vue Image и очистить содержимое <СТИЛЬ> Элемент во время вашего там. Наконец, откройте маршрутизатор/index.js и импортируйте компонент home.vue вместо helloworld.vue и обновите объект маршрута, чтобы использовать домашний компонент.

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

Теперь открыть файл home.vue и заполните раздел скрипта с тем, что ниже.

export default {
  data() {
    return {
      surveys: [{
      id: 1,
      name: 'Dogs',
      created_at: new Date(2017, 12, 1),
      questions: [
        {
          id: 1,
          text: 'What is your favorite dog?',
          choices: [
            { id: 1, text: 'Beagle', selected: 0 },
            { id: 2, text: 'Labrador', selected: 0 },
            { id: 3, text: 'Rottweiler', selected: 0 }]
        }, {
          id: 2,
          text: 'What is your second favorite dog?',
          choices: [
            { id: 5, text: 'Beagle', selected: 0 },
            { id: 6, text: 'Labrador', selected: 0 },
            { id: 7, text: 'Rottweiler', selected: 0 }]
        }]
      }, {
        id: 2,
        name: 'Cars',
        created_at: new Date(2017, 12, 3),
        questions: [
          {
            id: 5,
            text: 'What is your favorite car?',
            choices: [
              { id: 17, text: 'Corvette', selected: 0 },
              { id: 18, text: 'Mustang', selected: 0 },
              { id: 19, text: 'Camaro', selected: 0 }]
          }, {
            id: 6,
            text: 'What is your second favorite car?',
            choices: [
              { id: 21, text: 'Corvette', selected: 0 },
              { id: 22, text: 'Mustang', selected: 0 },
              { id: 23, text: 'Camaro', selected: 0 }]
          }]
      }]
    }
  }
}

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

Теперь в разделе шаблона я добавлю Div которые будут обернуть все мои другие элементы. Каждый VUE компонент должен иметь один родительский элемент, не может быть элементов брата высшего уровня или компонент не будет компитенна. Внутри этого Div я добавлю раздел для Bulma Герой заголовок Отказ

Ниже заголовок будет еще один раздел для отображения имени каждого опроса и дату его созданного. Это в этом блоке HTML, где мы начнем видеть некоторые из удивительности, которые предоставляются Vue.js.

Сохраните любые несохраненные файлы в проекте и обновите браузер, который теперь должен появиться, как показано ниже:

Как вы можете видеть на скриншоте, появляются два опроса карт Bulma. Эти две опросы отображаются на массив объектов опроса, которые были в моей функции данных моего Главная Компонент, который я подал в свой HTML с помощью V-для директивы.

Посмотрите еще раз на подразделе ниже оригинального шаблонного кода, который представляет собой опрос. Весь этот элемент и его дети повторяются один раз для каждого опроса в Опросы множество. По сути, данные заводят генерацию HTML.

V-Bind: ключевая часть добавляет атрибут под названием ключ равно удостоверение личности опроса каждому Div С классовой «картой». Vue использует эти ключи, чтобы сохранить явную дорожку каждого узла, создаваемого в DOM, который помогает в бухгалтерии и производительности. Рекомендуется всегда установить уникальный ключ к внешнему элементу, используемую в сочетании с V-для директивы.

    

      
{{ survey.name}}
      
{{survey.created_at.toDateString()}}
    

V-для Директивы использует синтаксис Товар в предметах где Предметы является линейным, таким как массив или свойства объекта и Предмет является псевдоним для каждого элемента в утечке. Однако существуют вариации этого синтаксиса, что обеспечивает большую гибкость и контроль.

Например, скажем, у меня был массив букв Вар буквы = [«A», «D», «A», «M»] Что я хотел использовать для управления созданием регулярного неупорядочатого списка OLE HTML, который отображает каждую букву и соответствующий индекс. Ну, это можно сделать с этим вариантом V-для:

  

    

      Index position {{ i }} has letter {{ letter }}
    
  

В результате следующего выхода:

• Index position 0 has letter a
• Index position 1 has letter d
• Index position 2 has letter a
• Index position 3 has letter m

Для итерации по свойствам объекта синтаксис очень похож. Учитывая объект, такой как VAR Person = {Название: «Адам», занятие: «Разработчик программного обеспечения», проживание: «Линкольн, Небраска»} , Итализатор с V-для директивы будет выглядеть так:

  

    

      key -> {{ key }}, value -> {{ value }}
    
  

• key -> name, value -> adam
• key -> occupation, value -> software developer
• key -> residence, value -> lincoln, nebraska

Издеваться над запрос AJAX для опросов

У меня есть свой первый функциональный компонент пользовательского интерфейса, отображающий коллекцию опросов, но в конце концов, фактическое приложение необходимо для получения данных опроса из нашего API для отдыха. Чтобы сделать это немного более реалистичным, я хотел бы высмеивать функции для AJAX-запроса, чтобы накормить Главная Обзоры компонентов.

В каталоге SRC создайте новую папку «API», затем добавьте скрипт под названием Index.js внутри него. Это где я буду издеваться от моих функций AJAX. В этом новом вырезании файла и вставьте Опросы Массив из компонента Home.vue как глобальная константа.

// api/index.js

const surveys = [{
  id: 1,
  name: 'Dogs',
  created_at: new Date(2018, 1, 1),
  questions: [{
    id: 1,
    text: 'What is your favorite dog?',
    choices: [
      { id: 1, text: 'Beagle', selected: 0 },
      { id: 2, text: 'Labrador', selected: 0 },
      { id: 3, text: 'Rottweiler', selected: 0 }]
  }, {
    id: 2,
    text: 'What is your second favorite dog?',
    choices: [
      { id: 5, text: 'Beagle', selected: 0 },
      { id: 6, text: 'Labrador', selected: 0 },
      { id: 7, text: 'Rottweiler', selected: 0 }]
  }]
}, {
  id: 2,
  name: 'Cars',
  created_at: new Date(2018, 1, 3),
  questions: [{
    id: 5,
    text: 'What is your favorite car?',
    choices: [
      { id: 17, text: 'Corvette', selected: 0 },
      { id: 18, text: 'Mustang', selected: 0 },
      { id: 19, text: 'Camaro', selected: 0 }]
  }, {
    id: 6,
    text: 'What is your second favorite car?',
    choices: [
      { id: 21, text: 'Corvette', selected: 0 },
      { id: 22, text: 'Mustang', selected: 0 },
      { id: 23, text: 'Camaro', selected: 0 }]
  }]
}]

Ниже этого массива опросов создайте функцию под названием fetchsurveys который возвращает обещание с массивом опросов после ожидания 300 миллисекунд (для моделирования задержки API). Функция должна быть экспортирована так, чтобы ее можно было добраться из Главная составная часть.

export function fetchSurveys() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(surveys)
    }, 300)
  })
}

Вернуться в функцию данных Главная Компонент инициализирует Опросы свойство для пустого массива и импортировать fetchsurveys Функция в разделе скрипта.

Компоненты Vue имеют серию определенных этапов жизненного цикла, которые осмыслены разработчику при выполнении различных вещей, таких как вытягивание данных, используя запрос AJAX. Для того, чтобы кормить данные опроса в Главная Компонент мне понадобится присоединиться к одному из стадий жизненного цикла Vue, специально Beforemount сцена. Есть несколько других этапов, которые полезны для многих других вещей, чем просто запросы AJAX, но я отложию официальному Vue.js Документы для подробностей объяснения.

Beforemount Этап жизненного цикла хорошо работает для вызова API, потому что он выполняется прямо до начала монтажа нашего компонента, а прямо до оказывать вызывается на нашем компоненте. Это дает время для получения данных перед отображением пользователю.

Воспользоваться преимуществами Beforemount Этап Главная Компонент все, что мне нужно сделать, это добавить его в качестве нового метода в Vue объекта компонента. Внутри этой функции я позвоню мне fetchsurveys Функция и назначить возвращенные опросы на обследования данные имущество.

Сохранение всех файлов в проекте и обновлении браузера теперь дает мне одну и ту же домашнюю страницу, которую мы видели ранее, но теперь с вызовом AJAX.

Ресурсы

Хотите узнать больше о Vue.js и строить веб-приложения для интерфейса? Попробуйте проверить некоторые из следующих ресурсов для более глубокого погружения в эту внешнюю структуру:

Заключение

Этот пост охватывал основы создания приложения SPA Vue.js с Vue-CLI, используя шаблон WebPack. В дополнение к установке проекта я охватил, как использовать данные в форме, которая является динамически генерировать контент UI, используя мощную V-для директивы Vue.js. Для последней крупной темы я попал на стадии жизненного цикла компонентов и как Beforemount Этап может быть полезен при загрузке данных в компонент с помощью просьбы MOCK AJAX.

Следующий пост Я буду охватывать, как использовать расширение VUE-маршрутизатора для потока с одной страницы к другому, давая наше приложение концепцию рабочего процесса. Код для этого урока можно найти в мой аккаунт github который содержит ветку для каждого поста. Спасибо за чтение и, пожалуйста, не стесняйтесь комментировать или критиковать ниже.