Vue.js

Vue.js

Unidad 1. Vue.js – El Framework progresivo de JavaScript

Laila Calderón Ramos

Iniciando con Vue.js

¿Qué es Vue.js?

Es un framework open source de JavaScript, que nos permite la creación de interfaces de usuario y aplicaciones de una sola página (single-page application o SPA, en inglés), de una forma muy sencilla.

Características

Enfoque Declarativo

Directivas

Binding de datos

Manejo de eventos

Sistemas de componentes

Transiciones y animaciones

Ventajas de usar vue.js

ofrece una gran flexibilidad a los desarrolladores. Es posible utilizarlo tanto en proyectos pequeños como en grandes aplicaciones empresariales. .

Su sintaxis intuitiva y su enfoque declarativo hacen que sea fácil para los desarrolladores crear aplicaciones web interactivas y dinámicas.

Instalando Vue.js

Instalar vue.js

Vue CLI

Para instalar vue, debemos asegurarnos de tener instalado node.js, en mi caso ya no tenía instalado pero podemos corroborar escribiendo el siguiente comando en la terminal o cmd:node -v Posteriormente escribimos el comando de instalacion de vue: npm install -g @vue/cli

+ Info

Instalando vue.js

Vue instalado

Para corroborar nuestra instalación podemos escribir el siguiente comando: vue --version Posteriormente podemos empezar a crear nuestro proyecto con vue.js

¡MuchasGracias!

Sistema de componentes

Los componentes son unidades autónomas y reutilizables que encapsulan tanto la vista como el comportamiento. Esto facilita la organización y la modularidad del código.

Transiciones y animaciones

Proporciona un sistema de transiciones y animaciones que permite crear efectos visuales atractivos al mostrar u ocultar elementos en la interfaz de usuario.

Binding de Datos

Proporciona enlaces bidireccionales entre los datos y la vista. Esto significa que los cambios en los datos se reflejarán automáticamente en la vista y viceversa, sin necesidad de manipulación manual del DOM.

Enfoque Declarativo

Utiliza una sintaxis declarativa para definir la interfaz de usuario. Esto significa que se enfoca en "qué" debe hacerse en lugar de "cómo" debe hacerse.

Directivas

Ofrece directivas integradas que se pueden utilizar en las plantillas HTML para aplicar comportamientos específicos. Algunas de las directivas más comunes son v-bind, v-model, v-for, v-if, v-show, entre otras.

Manejo de eventos

Puedes manejar eventos en Vue.js utilizando la directiva v-on, que permite enlazar eventos del DOM a métodos en el componente.

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Lorem ipsum dolor sit

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Lorem ipsum dolor sit