https://github.com/roverty/vuejs

Repositorio con material para aprender VueJS desde cero.
https://github.com/roverty/vuejs

vuejs

Last synced: 2 months ago
JSON representation

Repositorio con material para aprender VueJS desde cero.

• Host: GitHub
• URL: https://github.com/roverty/vuejs
• Owner: roverty
• Created: 2020-11-09T18:12:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-03T06:26:10.000Z (about 5 years ago)
• Last Synced: 2025-01-25T23:47:02.927Z (over 1 year ago)
• Topics: vuejs
• Language: Vue
• Homepage:
• Size: 2.38 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.adoc

Awesome Lists containing this project

README

          
= VueJS

Creado por Rodrigo Francisco 

Version 1.0, 11.11.2020

:description: Archivo README del repositorio de VueJS

:keywords: vuejs, js  

//:sectnums: 

// Configuracion de la tabla de contenidos

:toc: 

:toc-placement!:

:toclevels: 4                                          

:toc-title: Contenido

// Ruta base de las imagenes

:imagesdir: ./README.assets/ 

// Resaltar sintaxis

:source-highlighter: pygments

// Iconos para entorno local

ifndef::env-github[:icons: font]

// Iconos para entorno github

ifdef::env-github[]

:caution-caption: :fire:

:important-caption: :exclamation:

:note-caption: :paperclip:

:tip-caption: :bulb:

:warning-caption: :warning:

endif::[]

VueJS es un framework de JavaScript que podríamos considerar

como el hermano de http://react.org/[React] y de http://angular.io[Angular]

image::vuejs.jpg[vuejs]

toc::[]

== Conocimientos requeridos

Para aprender https://vuejs.org/[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. footnote:disclaimer[También se puede utilizar TypeScript.]

== Requisitos de software

* https://nodejs.org/en/[NodeJS]

* https://cli.vuejs.org/[Vue-CLI]

== Roadmap in 2021

=== Frontend developer

image:vue-in-a-readme/frontend.png[]

=== Backend developer

image:vue-in-a-readme/backend.png[]

== VueJS en un README.adoc

=== Ciclo de desarrollo de un sitio web

image:vue-in-a-readme/architecture.jpg[]

=== 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*

image:vue-in-a-readme/components.png[]

image:vue-in-a-readme/separate-by-components.png[]

=== Conceptos a desarrollar de desarrollo Web

* DOM (Document Object Model)

* Virtual DOM

* Linter

=== Ciclo de vida de la instancia de VueJS

image:vue-in-a-readme/lifecycle.png[]

=== 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 ``

* Operaciones en la interpolación

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

* Style scoped

* Class binding