What are Vue 3 directives and how do I use them?

What are Vue 3 directives and how do I use them?

Vue 3 directives are special tokens in the markup that tell the library to do something to a DOM element. Common directives include v-bind, v-model, and v-if.

Can you give me an example of using v-if?

Sure! You can use v-if to conditionally render an element. For example: <div v-if="isVisible">This is visible</div> will only show the div if isVisible is true.

What about v-for? How does that work?

v-for is used to render a list of items. For example: <li v-for="item in items" :key="item.id">{{ item.name }}</li> will create a list item for each item in the items array.

Are there any new directives in Vue 3 compared to Vue 2?

Yes, Vue 3 introduced the Composition API, which allows for more flexible and reusable code, but the core directives like v-if and v-for remain the same.