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.