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

Полное руководство по слотам Vue Изучение

Пользовательские директивы позволяют разработчикам легко создавать и использовать некоторые пользовательские функции для элементов. Как и встроенные директивы, такие как 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>

Шаг 4: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

Вывод: после успешной сборки проекта откройте http://localhost:3000, и результат будет следующим. шной сборки проекта открой

Читайте также:  Изучение TypeScript: классы, интерфейсы и многое другое
Оцените статью
bestprogrammer.ru
Добавить комментарий