Пользовательские директивы Vue.js с компонентами

Vue Программирование и разработка

Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это эффективная, доступная и универсальная структура. Мы можем создавать одностраничные приложения, а также приложения полного стека. Он построен на основе HTML, CSS и Javascript, что упрощает разработчикам интеграцию Vue.js в любое приложение на любом этапе.

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

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

Синтаксис: В компоненте перед названием директивы добавьте «v-» следующим образом:

<script>
const customDirective = {
  ...
};
export default {
  directives: {
    customDirective,
  },
};
</script>
<template>
  ...
  <MyElement v-customDirective />
</template>

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

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

npm init vue@latest

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

Введите имя проекта и предустановите проект

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

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

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

Шаг 2. В разделе сценария файла App.vue создайте пользовательскую директиву и назовите ее как входные данные. В разделе mount добавляем элемент и привязку, через которую будем получать значение от элементов. Затем измените значение элемента соответствующим образом.

<script>
const input = {
  mounted: (el, binding) => {
    console.log(binding.value);
    el.placeholder = binding.value.placeholder;
    el.style.color = binding.value.color;
  },
};
export default {
  directives: {
    input,
  },
};
</script>

Шаг 3: В разделе шаблона файла App.vue добавьте два элемента ввода и добавьте значения для заполнителя и цвета.

<template>
  <center>
    <h1 style="text-align: center;
        color: green">GeeksforGeeks</h1>
    <strong>
        Vue.js Custom Directives with Components
       </strong>
    <br />
  </center>
  <center>
    <input type="text"
             v-input="{ placeholder: 'Green Color Input', 
                         color: 'green' }"  />
    <input type="text"
             v-input="{ placeholder: 'Red Color Input', 
                         color: 'red' }"/>
  </center>
</template>

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

npm run dev

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

Читайте также:  Введение в Java Swing

успешной сборки проекта откройте htt

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector