Что такое директивы? Почему они полезны?

Пользовательские директивы - это способ сделать наш код многоразовым, похожим на миксины, но вместо повторного использования функциональных возможностей компонентов директивы позволяют нам создавать отдельные методы, которые можно использовать повторно. Эти пользовательские директивы отлично подходят для доступа / манипулирования DOM. Vue поставляется с несколькими директивами по умолчанию, которые вы наверняка уже видели / использовали раньше, например v-model, v-bind & v-show. Это намного легче понять, если мы увидим несколько примеров того, что мы можем делать с пользовательскими директивами.

Vue также позволяет вам регистрировать свои собственные пользовательские директивы, где пользовательские директивы все еще могут быть полезны? Примером может быть фокус на элементе ввода при загрузке страницы.

Что мы будем делать?

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

Эта анимация очень тонкая, но она может помочь сделать скучную статическую веб-страницу более привлекательной и интересной для просмотра.

Если вы не заинтересованы в создании этой анимации и просто хотите понять, как добавлять директивы в свой проект, вы можете просто прочитать эти разделы:

  • Создание файла директивы
  • Сделайте директиву доступной в вашем проекте

Создание директивы

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

Прежде чем ты начнешь

Во-первых, нам нужно перейти в папку с нашими плагинами, обычно расположенную в корневом каталоге наших приложений (~/plugins), если у вас нет этой папки, вы можете просто создать ее.

Создание файла директивы

Внутри папки плагинов создайте файл и назовите его как хотите, я назвал свой animateOnScroll. Расширение вашего файла может быть просто .js или .client.js, если вы собираетесь развернуть свой сайт статически, оба этих расширения будут работать нормально, но если вы используете SSR на своем сайте, после развертывания .js не будет работать, вам придется использовать .client.js. Я всегда использую .client.js, чтобы избежать этой ошибки в будущем, если я решу перейти на рендеринг на стороне сервера.

Создание наблюдателя на пересечении

Внутри вашего animateOnScroll.client.js давайте создадим наблюдателя, который будет наблюдать за элементами и проверять, находятся ли они в поле зрения.

const animateOnScrollObserver = new IntersectionObserver()

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

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

Вы могли догадаться, что мы добавляем класс, который мы еще не создали, не беспокойтесь, что мы создадим его позже.

Создание директивы

Прежде чем мы сможем начать создавать нашу директиву, нам нужно импортировать Vue в наш animateOnScroll.client.js файл.

import Vue from 'vue'

Теперь мы можем, наконец, создать нашу директиву, используя Vue.directive(): функция директивы принимает два параметра: имя директивы (строка типа) и параметры / определение директивы. Это объект, который содержит «функции-перехватчики».

На данный момент существует около пяти функций ловушек, но в этом проекте мы будем использовать только одну из них - ловушку привязки.

Ловушка привязки вызывается только один раз, когда директива впервые привязывается к элементу. Здесь вы можете выполнить одноразовую настройку.

Подробнее о функциях ловушек

Здесь происходит следующее: после вызова хука bind он вызывает нашу анонимную функцию, которая имеет параметр el, это ссылка на целевой элемент (элемент, к которому привязана директива), и добавление класса .before-enter, а затем наблюдение за нашим целевым элементом .

Теперь внутренняя часть файла animateOnScroll.client.js должна выглядеть примерно так:

CSS анимация

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

Сделайте директиву доступной в вашем проекте

Перейдите в свой nuxt.config.js файл и найдите массив плагинов, если вы не можете его найти, вы можете добавить его в файл по умолчанию, он будет сгенерирован, если вы создали свой проект. Все, что осталось сделать, это добавить путь к массиву.

plugins: [
  '~/plugins/animateOnScroll.client.js'
]

Теперь вы можете использовать v-animate-on-scroll для любого элемента / компонента в любом месте вашего проекта следующим образом:

<UserCard v-animate-on-scroll />

Все директивы, которые вы определили, будут иметь префикс v- в начале имени директивы.

Подробнее о создании директив во Vue

Ссылки на документацию и ресурсы



Создание директивы Vue.js - урок Vue.js из нашего курса Vue.js: ...
В этом уроке вы узнаете, как создать собственный Vue Директива .js. Мы создадим очень важную директиву о том, что мы… vueschool.io