Phenquestions
Un marco tiene como objetivo proporcionar características que faciliten y aceleren el proceso de desarrollo para los desarrolladores. Vue.js es un marco de JavaScript enriquecido con características que proporciona muchas funciones y directivas integradas para hacer rápidamente el proceso de desarrollo. Pero, debe haber algunos escenarios en los que necesite alguna funcionalidad que no esté disponible en el marco, por lo que debe crear la suya propia.
En esta publicación, aprenderemos y echaremos un vistazo a las directivas integradas proporcionadas por Vue.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, precedidos por la cláusula "v-" que ayuda a saber que la biblioteca es un tipo especial de sintaxis que se utiliza para realizar algunas tareas. Las directivas se utilizan generalmente 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 elementos DOM pero de forma reactiva. Entendamos con un ejemplo:
Directiva "v-if"
Puedes ver el texto.
En la etiqueta anterior, "v-if" es una directiva que eliminará o agregará la etiqueta de párrafo "
", Depende de la veracidad de la variable" showText ".
Directiva "v-show"
De manera similar, 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 mientras se carga la página si la variable vinculada no es verdadera y se carga cuando la variable se convierte en verdadera. Por el contrario, "v-show" representará el elemento en el momento de carga de la página web, pero lo ocultará. Entonces, "v-if" es efectivo en el tiempo en el tiempo de carga de la página y consume mucho tiempo cuando la variable se vuelve verdadera. Tiene que representar todo el elemento, mientras que "v-show" es efectivo en el tiempo sobre la veracidad de la variable, lo que requiere mucho tiempo en el tiempo de carga de la página web.
Bien! Echemos un vistazo a una directiva que toma el argumento.
Directiva "v-bind"
Otra directiva más utilizada es "v-bind", que se utiliza para interactuar y actualizar los atributos HTML. Por ejemplo, si queremos vincular alguna variable al atributo "href" del etiqueta, podemos vincular el atributo "href" de esta manera:
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 Click y vincularle alguna variable, la sintaxis sería la siguiente:
Entre comillas, podemos proporcionar la expresión y las funciones.
Conclusión
Hemos aprendido sobre las directivas en Vue y vemos cómo usar las directivas en Vue.js. Hemos discutido algunas de las directivas integradas básicas y más utilizadas de Vue.js, que ayuda mucho y ahorra una gran cantidad de tiempo en el desarrollo.
