/VueJS

Repositorio con material para aprender VueJS desde cero.

Primary LanguageVue

VueJS

VueJS es un framework de JavaScript que podríamos considerar como el hermano de React y de Angular

vuejs
Contenido

Conocimientos requeridos

Para aprender vuejs, es ampliamente recomendable contar con los siguientes conocimientos:

  • HTML 5

  • CSS 3

  • Javascript

Se hace enfásis en tener conocmientos sólidos de JS ya que el lenguaje por defecto del framework es JS. [1]

Requisitos de software

Roadmap in 2021

Frontend developer

frontend

Backend developer

backend

VueJS en un README.adoc

Ciclo de desarrollo de un sitio web

architecture

Ventajas y desventajas

Ventajas

  • Fácil de aprender

  • Ligero

  • PWA (Progressive Web Applications)

  • SPA (Single Page Applications)

  • Conserva la aplicación en orden y modulada

Desventajas

  • La comunidad aún es relativamente pequeña

  • SPA

    • Utilizar el SEO (Search Engine Optimization) se vuelve algo más complicado, nos referimos a la indexado de búsqueda de nuestra página

    • No se habilitan los "bookmarks" del lado del usuario.

    • Problemas con la navegación del usuario.

    • ¿Cómo se corrige? Se utiliza el Side Server Render (SSR), por medio de Nuxt.js

La idea básica

Vamos a poder utilizar sentencias de control con HTML

Se busca descomponer el desarrollo en componentes

components

separate by components

Conceptos a desarrollar de desarrollo Web

  • DOM (Document Object Model)

  • Virtual DOM

  • Linter

Ciclo de vida de la instancia de VueJS

lifecycle

Conceptos de JavaScript

  • var vs let

  • == vs ===

  • Declaración de funciones en el estándar ES6

  • High order array methods

    • Map

    • Reduce

    • Filter

  • De-estructuración de objetos y de arreglos

Conceptos de VueJS

  • Hook functions

Notas rápidas

  • En cada componente de VueJS tenemos: template, funcionalidad, estilos

  • Interpolation en el template (Mostacho)

  • Solo puede haber un elemento de "HTML" por <template></template>

  • Operaciones en la interpolación

  • Directivas (v-if, v-on) : https://v3.vuejs.org/api/directives.html#v-html

  • Style scoped

  • Class binding

1. También se puede utilizar TypeScript.