¿Qué es una directiva VUE y cómo usarla??

¿Qué es una directiva VUE y cómo usarla??

Un marco tiene como objetivo proporcionar tales características que faciliten el proceso de desarrollo y más rápido para los desarrolladores. Vue.JS es un marco de JavaScript enriquecido con características que proporciona muchas funciones y directivas incorporadas para realizar rápidamente el proceso de desarrollo. Pero, debe llegar algunos escenarios cuando necesite alguna funcionalidad que no esté disponible para el marco, por lo que debe construir su propio.

En esta publicación, aprenderemos y echaremos un vistazo a las directivas incorporadas proporcionadas por el Vue.marco JS, y también aprenderemos a crear y usar nuestra propia Directiva VUE personalizada.

Directiva

Las directivas son atributos que puede vincular con los elementos DOM, prefijados por la cláusula "V-" que ayuda a saber la biblioteca que es un tipo especial de sintaxis utilizada para realizar algunas tareas. Las directivas generalmente se usan para la manipulación directa de DOM. Algunas de las directivas más utilizadas y famosas son "V-IF", "V-For" y "V-Show".

Las directivas se utilizan para aplicar efectos en los elementos DOM pero reactivamente. Entendámoslo con un ejemplo:

Directiva "V-IF"

Puedes ver el texto.

En la etiqueta anterior, el "V-IF" es una directiva que eliminará o agregará la etiqueta del párrafo "

", Depende de la veracidad de la variable" showText ".

Directiva "V-Show"

Del mismo modo, tenemos la directiva "V-Show" que puede realizar la misma funcionalidad descrita anteriormente:

Puedes ver el texto.

La sutil diferencia entre "v-if" y "v-show" es que "v-if" no representa el elemento al cargar la página si la variable unida no es verdadera y se carga cuando la variable se hace verdadera. Por el contrario, "V-Show" hará el elemento en el tiempo de carga de la página web, pero lo oculta. Entonces, "V-IF" es efectivo en el tiempo de carga de la página y que consumen mucho tiempo cuando la variable se vuelve verdadera. Tiene que renderizar todo el elemento mientras que el "show en V" es efectivo en la veracidad de la variable que requiere tiempo en el tiempo de carga de la página web.

Está bien! Echemos un vistazo a una directiva que toma la discusión.

Directiva "V-Bind"

Otra directiva más utilizada es el "vínculo en V", que se utiliza para interactuar y actualizar los atributos HTML. Por ejemplo, si queremos unir alguna variable al atributo "href" de la etiqueta, podemos unir el atributo "href" así:

Directiva "V-ON"

Al igual que la directiva "v-bind", Vue proporciona una directiva "V-ON" para vincular la variable para escuchar los eventos disparados en el DOM. Por ejemplo, para escuchar el evento de clic y vincular alguna variable, la sintaxis sería así:

En las comas invertidas, podemos proporcionar la expresión y las funciones.

Conclusión

Hemos aprendido sobre las directivas en Vue y ver cómo usar las directivas en Vue.js. Hemos discutido algunas de las directivas incorporadas más utilizadas y básicas de Vue.JS, que ayuda mucho y ahorra una gran cantidad de tiempo en el desarrollo.