Directivas de Vue3
Las directivas de Vue (Directives) son una funcionalidad central de Vue.js; se pueden usar en plantillas HTML comov-atributos especiales que comienzan con el prefijo v-, utilizados para vincular datos reactivos a elementos del DOM o realizar operaciones en los elementos del DOM.
Las directivas de Vue son atributos HTML especiales que llevan un prefijov-especial, y otorgan funcionalidad adicional a las etiquetas HTML.
En comparación con los métodos tradicionales de JavaScript, crear páginas reactivas con Vue es mucho más fácil y requiere menos código.
A continuación se presentan algunas directivas comunes de Vue:
| Directiva | Descripción |
|---|---|
v-bind |
Se utiliza para vincular los datos de la instancia de Vue a los atributos de elementos HTML. |
v-if |
Se utiliza para renderizar condicionalmente elementos o componentes según el valor de una expresión. |
v-show |
v-show es una directiva proporcionada por Vue.js que se utiliza para mostrar u ocultar condicionalmente elementos según el valor de una expresión. |
v-for |
Se utiliza para renderizar en bucle elementos o componentes según los valores de las propiedades de una matriz o un objeto. |
v-on |
Se utiliza para vincular escuchadores de eventos a elementos HTML, permitiendo que estos activen métodos o funciones de la instancia de Vue. |
v-model |
Se utiliza para crear un enlace de datos bidireccional entre los controles de formulario y los datos de la instancia de Vue. |
Además de estas directivas comunes, Vue también proporciona otras directivas, como v-text, v-html, etc., así como directivas personalizadas, lo que permite a los desarrolladores manipular los elementos del DOM de forma más flexible.
Ejemplo
A continuación se muestran algunos ejemplos de uso de directivas de Vue:
Usando lav-modeldirectiva para lograr el enlace bidireccional de datos de formulario:
Ejemplo
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Pruébalo »
Usando lav-binddirectiva para vincular los datos de la instancia de Vue a los atributos de elementos HTML:
Ejemplo
<img v-bind:src="imageSrc">
</div>
<script>
const HelloVueApp = {
data() {
return {
imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Pruébalo »
Usando lav-ifyv-elsedirectiva para renderizar condicionalmente elementos o componentes según el valor de una expresión:
Ejemplo
<p v-if="showMessage">Hello Vue!</p>
<p v-else>Goodbye Vue!</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
showMessage: true
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Pruébalo »
Usando lav-fordirectiva para renderizar en bucle elementos o componentes según los valores de las propiedades de la matriz:
Ejemplo
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
<script>
const HelloVueApp = {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Pruébalo »
Usando la directiva v-on para vincular escuchadores de eventos en elementos HTML:
Ejemplo
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
</div>
<button v-on:click=" lightOn =! lightOn ">Encender/Apagar</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
Pruébalo »
El siguiente es un ejemplo que usa lav-showdirectiva:
Ejemplo
<button v-on:click="showMessage = !showMessage">Mostrar/Ocultar</button>
<p v-show="showMessage">Hello Vue!</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
showMessage: true
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
Pruébalo »