Несколько дней назад мне поручили создать небольшой проект по поиску изображений. Я использую этот проект в качестве учебного материала по Vue.js и ссылаюсь на него из Code Pen, так как у меня не было много времени, чтобы заняться этим проектом в эти выходные.

Основные выводы в этом проекте:

  1. http.jsonp: метод для отправки запроса jsonp в API общедоступной ленты flickr (можно использовать, поскольку данные jsonp обычно общедоступны/видимы и безопаснее).
    Затем используйте функцию обратного вызова по умолчанию jsonFlickrFeed, чтобы получить ответ и обновить данные изображения в нашей модели vue.
  2. Vue.directive: настраиваемый атрибут HTML для работы с объектами DOM.
  3. directive.inserted : при вставке ограниченных элементов --› первое, что должна сделать директива
    directive.updated : срабатывает при изменении ограниченных элементов
  4. Преимущества использования onload:
    1) улучшить взаимодействие с пользователем (с отложенной загрузкой)
    2) можно проверить тип и версию браузера посетителя и загрузить правильную версию веб-страницы. на основании информации (при необходимости)
  5. V-if: удобная директива для условного рендеринга, которая не будет существовать в DOM, пока условие не будет выполнено.
    V-show: еще одна аналогичная директива условного рендеринга в V-if, но по-прежнему будет существовать в DOM и будет скрыт с помощью тега ‹style›, как только условие не будет выполнено.

Ошибки, которые нужно исправить:

Я пытаюсь сделать так, чтобы сообщение об ошибке появлялось после 1) отправки http-запроса 2) подтверждения отсутствия возвращенных изображений. Теперь я сделал с первым, но все еще не мог закончить второй. Надеюсь поскорее разберусь.....

Обновлять:

Я исправил ошибку выше, отслеживая длину содержащегося объекта Flickr Response. Таким образом, сообщение об ошибке появится после того, как запрос будет отправлен, а в ответе нет прикрепленных элементов.