Пользовательские директивы Vue.js с сокращением функций

На чтение 3 мин Просмотров 185 Опубликовано 12.04.2022

Пользовательские директивы позволяют разработчикам легко создавать и использовать некоторые пользовательские функции для элементов. Как и встроенные директивы, такие как v-model, v-for, v-if и т. д., мы можем создавать собственные директивы, которые будут соответствовать тому, что мы установили. Это позволяет повторно использовать некоторую логику, имея доступ к нижнему уровню DOM. Мы также можем передавать данные в пользовательские директивы.

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

Синтаксис: объявите имя директивы, а затем объявите саму функцию. Это вызывается всякий раз, когда элемент монтируется или обновляется.

const app = createApp(App);
app.directive("customDirective", (el, binding) => {
    // code for directive
});

Пример. В следующем примере у нас есть пользовательская директива input для элементов ввода, позволяющая легко размещать цвет и текст-заполнитель в элементах ввода. Мы создадим пользовательскую директиву с сокращением функции.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js, используя следующую команду.

npm инициализация vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта: После успешной установки будет сформирована следующая структура проекта.

Структура проекта

Шаг 2: В файле main.js перед монтированием объявите директиву с именем ввода, а затем измените заполнитель и значение в соответствии с вводом.

import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.directive("input", (el, binding) => {

  console.log(binding.value);

  el.placeholder = binding.value.placeholder;

  el.style.color = binding.value.color;

});

app.mount("#app");

Шаг 3: Внутри раздела шаблона файла App.vue мы можем использовать сокращение функции в наших элементах ввода.

<script>

  export default {

    name: "App",

    components: {},

  };

</script>

<template>

  <center>

    <h1 style="text-align: center;

        color: green">

        GeeksforGeeks

    </h1>

    <strong>

        Vue.js Custom Directives with Function Shorthand

    </strong>

    <br />

  </center>

  <center>

    <input

      type="text"

      v-input="{ placeholder: 'Yellow Input', color: 'yellow' }"/>

    <input

      type="text"

      v-input="{ placeholder: 'Search Tutorials', color: 'green' }"/>

  </center>

</template>