Введение в динамический список рендеринга в Vue.js

Автор оригинала: FreeCodeCamp Community Member.

Hassan djirdeh.

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

В этой статье мы соберем понимание Vue V-для Директива в генерации динамических списков. Мы также пройдем несколько примеров того, почему ключ атрибут должен использоваться при выполнении этого.

Поскольку мы будем тщательно объяснить вещи, поскольку мы начинаем писать код, эта статья предполагает, что у вас нет или очень мало знаний с Vuue (и/или другими JavaScript Frameworks).

Тематическое исследование: Twitter

Мы собираемся использовать Twitter Как исследование дела для этой статьи.

При вошении в систему и в основном индексном порядке Twitter, мы представлены с видом, похожим на это:

На домашней странице мы привыкли видеть список тенденций, список твитов, список потенциальных последователей и так далее. Содержимое, отображаемое в этих списках, зависит от множества факторов – нашей истории Twitter, которую мы следуем, наши симпатии и так далее. В результате мы можем сказать, что все эти данные – динамический Отказ

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

Например, мы можем увидеть список твитов в виде списка Single Tweet-компонент Предметы. Мы можем думать о Tweet-компонент В качестве оболочки, которая принимает данные о видах, таких как имя пользователя, ручка, твит, и аватар, среди других частей, и просто отображает эти части в последовательной разметке.

Допустим, мы хотели сделать список компонентов (например, список Tweet-Component элементы) на основе большого источника данных, полученного с сервера. В Vue, первое, что должно прийти к уму до достижения, это V-для Директива.

V-для Директивы

V-для Директива используется для визуализации списка элементов на основе источника данных. Директива может быть использована на элементе шаблона и требует определенного синтаксиса по линиям:

Давайте посмотрим на пример этого на практике. Во-первых, мы предполагаем, что мы уже получили коллекцию Tweet Data:

const tweets = [
  {
    id: 1,
    name: 'James',
    handle: '@jokerjames',
    img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
    tweet: "If you don't succeed, dust yourself off and try again.",
    likes: 10,
  },
  { 
    id: 2,
    name: 'Fatima',
    handle: '@fantasticfatima',
    img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
    tweet: 'Better late than never but never late is better.',
    likes: 12,
  },
  {
    id: 3,
    name: 'Xin',
    handle: '@xeroxin',
    img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
    tweet: 'Beauty in the struggle, ugliness in the success.',
    likes: 18,
  }
]

Твиты это коллекция Tweet объекты с каждым Tweet Содержащие детали этого конкретного твита – уникальный идентификатор, имя/ручка учетной записи, Tweet Message и так далее. Давайте теперь попытаемся использовать V-для Директива оказать список компонентов Tweet на основе этих данных.

Прежде всего, мы создадим экземпляр Vue – сердце приложения Vue. Мы подключим/прикрепим наш экземпляр к элементу DOM ID приложение и назначить Твиты Коллекция как часть объекта данных экземпляра.

new Vue({
  el: '#app',
  data: {
    tweets
  }
});

Теперь мы будем идти вперед и создать Tweet-компонент что наше V-для Директива будет использовать для рендеринга списка. Мы будем использовать глобальный Vue.component Конструктор для создания компонента с именем Tweet-компонент :

Vue.component('tweet-component', {
  template: `  
    

      

        

          

            

              
            
          
          

            

              

                {{tweet.name}} {{tweet.handle}}
                

                {{tweet.tweet}}
              
            
              

                
                  
                  {{tweet.likes}}
                
              
          
        
      
    
  
  `,
  props: {
    tweet: Object
  }
});

Несколько интересных, чтобы отметить здесь:

1. Tweet-компонент ожидает, что Tweet Объект PROP Как видно в требовании к валидации вспоможения ( реквизит: {Tweet: Object} ). Если компонент отображается с помощью Tweet опоры это не объект VUE будет выделять предупреждения.
2. Мы обязательно связываем свойства Tweet Object Prop на шаблоне компонентов с помощью синтаксиса усов: {{}} Отказ
3. Разметка компонентов адаптируется Коробка Булмы Элемент Как это представляет собой хорошее сходство с твитом.

В шаблоне HTML нам нужно будет создать разметку, где будет установлен наше приложение Vue (I.e. Элемент с идентификатором ). В этой разметке мы будем использовать V-для Директива оказать список твитов.

С Твиты Является ли сборник, который мы будем итерации, Tweet будет подходящим псевдоним для использования в Директиве. В каждом сделанном Tweet-компонент , мы будем Также пройти в итерацию Tweet объект как реквизит для него доступен в компоненте.

Независимо от Как Еще гораздо больше объектов Tweet будет введен в коллекцию, или как они будут изменяться со временем – наша настройка всегда будет оказывать все твиты в коллекции в той же разметке, которую мы ожидаем.

С помощью некоторых пользовательских CSS наше приложение будет выглядеть что-то подобное:

Хотя все работает, как и ожидалось, мы можем быть вызваны подсказкой Vue в нашей консоли браузера:

[Vue tip]: : component lists rendered with v-for should have explicit keys...

Примечание: Вы не сможете увидеть предупреждение в консоли браузера при запуске кода через кодепен.

Почему Vue расскажет нам указать явные клавиши в нашем списке, когда все работает, как и ожидалось?

Ключевой атрибут

Общая практика для уточнения ключевого атрибута для каждого иетерального элемента в визуализации V-для список. Это потому, что Vue использует ключ атрибут для создания Уникальные привязки для идентичности каждого узла Отказ

Давайте объясним это еще несколько – если в нашем списке есть какие-либо изменения динамических интерфейсов для нашего списка (например, порядок элементов списка выталкивается), Vue будет выбрать изменения данных в каждом элементе вместо этого перемещения элементов DOM соответственно. Это не будет проблемой в большинстве случаев. Однако в определенных случаях, когда наш V-для Список зависит от состояния до DOM и/или состояния дочернего состава, это может вызвать некоторое непреднамеренное поведение.

Давайте посмотрим на пример этого. Что, если наш простой Tweet Component теперь содержит входное поле, которое позволит пользователю напрямую ответить на сообщение Tweet? Мы проигнорируем, как этот ответ может быть представлен и просто обратиться к новому входным поле сам:

Мы включаем это новое поле ввода на шаблон Tweet-компонент :

Vue.component('tweet-component', {
  template: `
    

      

        // ...
      
      

        
        
          
        
      
    
  `,
  props: {
    tweet: Object
  }
});

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

Для этого мы можем сначала включить «Shuffle!» Кнопка в вашем HTML шаблон:

  

    
      Shuffle!
    
    
  

Мы прикрепили слушатель события Click на элементе кнопки, чтобы вызвать Shuffle метод при срабатывании. В нашем экземпляре Vue мы создадим Shuffle Метод, ответственный за случайным образом перетасовывать Твиты Сбор в экземпляре. Мы будем использовать Lodash’s _shuffle Метод для достижения этого:

new Vue({
  el: '#app',
  data: {
    tweets
  },
  methods: {
    shuffle() {
      this.tweets = _.shuffle(this.tweets)
    }
  }
});

Давайте попробуем это! Если мы нажмеемся случайно в несколько раз, мы заметим, что наши элементы Tweet получают случайным образом сортированные с каждым кликом.

Однако, если мы введем некоторую информацию на входе каждого компонента и Тогда Нажмите Shuffle, мы заметим что-то своеобразное происшествие:

Так как мы не решили использовать ключ Атрибут, Vue не создал уникальные привязки к каждому узлу Tweet. В результате, когда мы стремимся перенаправить Tweets, Vue принимает более качественный подход к тому, чтобы просто Изменить (или патч) данные в каждом элементе. Поскольку временное состояние DOM (то есть введенный текст) остается на месте, мы испытываем этот непреднамеренный несоответствие.

Вот диаграмма, которая показывает нам данные, которые устанавливаются на каждый элемент и состояние DOM, которое остается на месте:

Чтобы избежать этого; Мы должны назначить уникальный ключ каждому Tweet-компонент отображается в списке.

Мы будем использовать ID из Tweet Быть уникальным идентификатором, поскольку мы должны безопасно сказать Tweet’s ID не должен быть равным этому другому. Потому что мы используем динамические значения, мы будем использовать V-bind Директива, чтобы связать наш ключ к Tweet.id :

  

    
      Shuffle!
    
    
  

Теперь Vue распознает личность у узла твита, так что это будет Переупорядочить Компоненты, когда мы намереваемся перетасовывать список.

Переходы

Поскольку каждый компонент Tweet теперь перемещается соответственно, мы можем сделать этот шаг вперед и использовать Vue Переход-группа к Показать Как элементы переупорядочены.

Для этого мы добавим Переход-группа элемент как обертка к V-для список. Мы уточним переходное имя Твиты и заявить, что переходная группа должна быть оказана как Div элемент.

  

    
      Shuffle!
    
    
      
    
  

На основании имени перехода Vue автоматически распознается, были ли указаны какие-либо переходы/анимации CSS. С тех пор мы стремимся вызвать переход для движение Из элементов в списке Vue будет искать указанный переход CSS по линиям твиты-ход (Где Tweets – это имя, данное нашей переходной группе).

В результате мы вручную введем .tweets-move Класс, который имеет указанный тип и время перехода:

#app .tweets-move {
  transition: transform 1s;
}

Примечание: Это очень короткий взгляд в применении переходов списка. Обязательно проверьте Vue Docs Для получения подробной информации о всех различных типах переходов, которые могут быть применены!

Наше Tweet-компонент Элементы теперь будут Переход надлежащим образом между местами, когда захватывается шаффл. Попробуй! Введите некоторую информацию на полях ввода и нажмите «Shuffle!» несколько раз.

Довольно круто, верно? Без ключ атрибут, Элемент перехода-группы не может быть использован для создания переходов списка Так как элементы являются исправлено на месте вместо того, чтобы быть переупорядоченным.

Должен ли ключ Атрибут всегда использоваться? Рекомендуется Отказ Vue Docs Укажите, что атрибут ключа должен быть опущен только в том случае, если:

• Мы намеренно хотим способ по умолчанию исправлять элементы на месте по причинам эффективности.
• Содержание DOM достаточно просто.

Заключение

И там у нас это есть! Надеюсь, эта короткая статья изобразила, насколько полезны V-для Директива, а также предоставила немного больше контекста, почему ключ атрибут часто используется. Дайте мне знать, если у вас могут быть какие-либо вопросы/мысли!

Если вам понравился мой стиль письма и потенциально заинтересован в том, чтобы научиться создавать настоящие мировые приложения с Vue, вам понравится книга FullStack Vue: полное руководство по Vue.js Что я помог опубликовать! Книга охватывает многочисленные аспекты Vue, включая маршрутизацию, простое государственное управление, обращение с формой, Vuex, настойчивость к серверу и тестирование, среди прочего. Если вы заинтересованы и/или хотите попробовать образец главы, вы можете получить больше информации с нашего сайта https://fullstack.io/vue !

Если у вас есть какие-либо вопросы/мысли/мнения, вы более чем приглашаете добраться до меня в любое время @djirdehh !