D4 - What are Vue Directives
A Vue directive is essentially a special type of command that can be added to HTML content and often appears as a prefixed HTML attribute.
Directives are reusable chunks of code or logic that developers can use within an HTML template.
These can allow you to manipulate your HTML in many different ways, such as conditionally rendering an element, connecting events to an element, or creating dynamic attributes that depend on your Vue code.
There most common built-in Vue directives, such as v-if
, v-show
, v-on
, v-bind
, v-model
, and
v-html
V-if Directive
Oftentimes, we may find ourselves interested in conditionally rendering content based on the value of an expression. In Vue, we can achieve this with the help of the v-if and v-show directives.
<template><p v-if="user.firstName && user.lastName"> Welcome, {{ user.firstName }} {{ user.lastName }}! </p><p v-else-if="user.username"> Welcome, {{ user.username }}! </p><div v-else><button>Login</button><button>Create Account</button></div></template><script setup> const user = { firstName: 'Sammy', lastName: 'Shark', username: 'sammyDO' }</script>try on ⇒ https://sfc.vuejs.org/
V-show Directive
Beyond the v-if -related directives, there is another directive that you can use to display HTML elements based on a condition. That directive is v-show . It’s similar to v-if , with the exceptions that there are no else-if and else counterparts and the elements are conditionally displayed rather than conditionally rendered.
<template> <div v-show="!userIsLoggedIn"> <button>Login</button> <button>Create Account</button> </div> <div v-show="userIsLoggedIn"> <p>Welcome!</p> </div></template><script setup> const userIsLoggedIn = true</script>Event Handling with v-on
The v-on directive can be used to create event listeners within the DOM to enable us to do something when a particular event happens. This can be a custom event or a standard JavaScript event, such as click , hover , or mouseenter.
<template> <button v-on:click="handleClick">Click Me</button></template><script setup> function handleClick() { alert('You clicked the button!') }</script>Some modifiers provided by Vue include:
once: Limits the event to fire only once.self: Event will only trigger if the event target is the same element that holds the directive.prevent: Stops the event from happening.stop: Stops the event from propagating.
Data binding with Vue
The simplest form of data binding in Vue is the Mustache Syntax (i.e. double curly braces) which is used to bind data values on to text content of HTML elements.
<template><p>I am from {{ city }}.</p></template><script setup> const city = 'Cincinnati'</script>Another example
<template> <p>I am from<a :href="wikipediaLink">{{ city }}</a>.</p></template><script setup>import { computed } from 'vue' const city = 'Cincinnati' const wikipediaLink = computed(() =>`https://en.wikipedia.org/wiki/${city}`)</script>Input handling in Vue
It is used to bind a value to a data property. However, this directive only works for input tags. When using the v-model directive, you are binding the input fields value attribute to the data property in the quotation marks. It is recommended to use the v-model directive over v-bind for form <input /> tags.
<template> <input v-model="city" type="text" /></template><script setup> const city = 'Cincinnati'</script>