How can I integrate directives in Vue.js?

How can I integrate directives in Vue.js?

In Vue.js, directives are special tokens in the markup that tell the library to do something to a DOM element. You can integrate them by using built-in directives like v-bind, v-model, and v-if, or by creating your own custom directives.

Can you give me an example of a custom directive?

Sure! Here's a simple example of a custom directive that changes the text color of an element:

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value;
  }
});

You can use it in your template like this: <p v-color="'red'">This text will be red.</p>.

What are some common built-in directives?

Some common built-in directives in Vue.js include:

• v-bind: Dynamically bind one or more attributes.
• v-model: Create two-way data bindings on form input elements.
• v-if: Conditionally render elements based on a boolean expression.

How do I use v-for to render a list?

You can use v-for to render a list by iterating over an array. For example:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

This will render a list of items from the items array.