curso-vue-ts

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Requirement

• Node > v14
• Vs Code
• las bases de html, css y javascript

Deploy

vite build --mode prod

Index

• Historia
• Alternativas ( otros framewors para la creación de interfaces )
• Vue ( introducción a la programación reactiva )
  • reactividad en JavaScript
  • reactividad
  • estado
  • interfaz basada en el estado
  • componentes
  • Programación Reactiva orientada a Componentes
  • framework progresivo
  • características principales
  • SPA
  • SSR
  • Ecosystem Vue Js
• directivas
  • interpolacion
• options api
• ciclos de vida
• composition API
• vue router
• vue 2 vs vue 3 (vue 3 -> Tiene mejor soporte para typescript)
• tree-shaking ( mejoras en el bundle en vue 3 )
• example post data
• composition function or composables ( custom hooks )
• vuex

Historia

Documental de Evan You
Pagina de Evan You

Alternativas

Vue no es la única herramienta que nos permite crear interfaces para nuestros desarrollos, existen gran variedad de frameworks y librerías que nos dan las herramientas para crear nuestras interfaces.

• Vanilla
• Solid
• Inferno
• Svelte
• Preact
• Vue
• React
• Angular
• Ember

Las características principales de estos frameworks es que cada uno de ellos destaca de javascript, y todos con un enfoque diferente para actualizar el DOM, manejando los eventos del navegador, y brindado una experiencia más satisfactoria para crear nuestros desarrollos.

The Progressive JavaScript Framework

An approachable, performant and versatile framework for building web user interfaces. (Un marco accesible, eficaz y versátil para crear interfaces de usuario web.)

Vue

• Documentación de Vue

reactividad en JavaScript

Para comprender el paradigma de la programación reactiva en JavaScript y entender cómo es que funcionan internamente librerías y frameworks como React, Angular, Vue, Svelte, Polymer, etc; es necesario comprender algunos conceptos importantes:

reactividad

¿Qué es reactivo ?

La reactividad de los datos, simplemente es que la interfaz de usuario de un sitio o aplicación se modifica a los cambios en los datos de la misma.

Cada vez que se actualizan los datos, la interfaz de usuario lo hace automáticamente para que coincida con la lógica de programación de la aplicación.

estado

¿Cuál es el estado ?

El estado son los datos de tu aplicación.

Entonces, ¿por qué se le llama estado en lugar de datos?

Porque tiene una duración determinada, el estado son datos en un momento particular de la aplicación, por ello decimos: el estado actual de los datos de la aplicación.

interfaz basada en el estado

Una interfaz basada en el estado, es aquella que usa los datos de la aplicación en todo momento para pintar sus elementos visuales.

Los elementos visuales de la interfaz suelen llamarse componentes.

componentes

Para definir el término componente citaré la definición de Nicole Sullivan que dice:

“It's a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS and possibly JavaScript.” Nicole Sullivan.

Traduciendo:

Es un patrón visual repetido, que se puede resumir en un fragmento independiente de HTML, CSS y posiblemente JavaScript.

Los componentes:

Son un fragmento de la interfaz que cumple una única función. Son reutilizables ( principio DRY - Don´t Repeat Yourself ). Son independientes, tanto de su contexto como del resto de componentes. Son autocontenidos, no filtran estilos o funcionalidad a otros componentes.

Programación Reactiva orientada a Componentes

Con lo descrito anteriormente podemos decir que una aplicación reactiva y basada en componentes nos permiten separar el código y los elementos de la interfaz en pequeñas piezas independientes y reutilizables que estarán aisladas una de otras, y en lugar de intentar apuntar y manipular directamente los elementos del DOM cuando la aplicación reaccioné a las acciones del usuario, ésta actualizará su estado y luego la interfaz se repintará con los cambios en el estado.

más información

framework progresivo

¿Qué es un framework "progresivo"?

Vue es considerado un framework progresivo, lo que quiere decir que puede ser usado tanto para tareas muy básicas, como alternativa a JQuery, como para tareas bastante más complejas como puede ser la creación de una SPA (Single-page application) completa.

Dejen de usar jquery en 2022!

Las funcionalidades principales (el renderizado y el sistema de componentes) están en una pequeña biblioteca, sin embargo es posible añadir todas las funcionalidades que tienen otros frameworks completos como el routing en el lado del cliente , build systems como webpack o systemjs y manejo de estados con herramientas como vuex o redux, añadiendo bibliotecas adicionales. La filosofía detrás de esta forma de construir el framework la explica su creador en esta conferencia donde explica que los frameworks introducen complejidad con el objetivo de disminuir la complejidad de la construcción de aplicaciones, sin embargo muchas veces, o se quedan cortos (si la aplicación es muy grande), o se pasan (si el framework introduce más complejidad de la que necesita la aplicación). Por lo tanto este esquema progresivo permite incluir en la aplicación solo las herramientas que se necesitan.

características principales

Entre las características principales de vue, encontramos que es un framwork Reactivo que implementa el enlace de datos en dos direcciones (entre vista y modelo) de una manera muy eficiente y rápida.

Lo que nos permite crear componentes re-utilizables dentro de nuestra aplicacion.

¿que pasa con vue y el virtual dom?

El DOM o Document Object Model es el árbol de nodos que generan los navegadores para entender nuestro código HTML. Y el Virtual DOM es un falso DOM, una copia que nos permite hacer cálculos pesados sin afectar el rendimiento del verdadero DOM.

Ventajas:

• Te permite controlar cuando se actualiza el DOM real, si un elemento se modifica repetidas veces podemos hacer que se renderize solo su última modificación.
• Es mucho menos costoso modificar una propiedad de un objeto JS que un elemento de un árbol, por lo que una aplicación web con DOM virtual será mucho mas eficiente.
• Sólo se vuelven a renderizar los elementos que hayan sufrido algún cambio, por ejemplo, si queremos cambiar de una página a otra sólo se velverán a renderizar los elementos que tengan alguna diferencia con el de la página anterior.

Desventajas:

• Consume mas recursos, ya que necesita tener una copia del DOM cargada en memoria mientras siga funcionando la aplicación.
• En un programa pequeño y con cambios pocos frecuentes en sus elementos el DOM virtual puede hacer que la aplicación funcione mas lenta que con el DOM real, ya que agrega lógica a cada actualización.

referencias https://platzi.com/blog/virtual-dom/ https://somospnt.com/blog/88-post-dom-virtual-2

SPA

¿Qué es una SPA ? ( Single page application )

SSR

¿Qué es una SSR ( Server side rendering )

Ecosystem Vue Js

Project	Status	Description
vue-router		Single-page application routing
vuex		Large-scale state management
vue-cli		Project scaffolding
vue-loader		Single File Component (*.vue file) loader for webpack
vue-server-renderer		Server-side rendering support
vue-class-component		TypeScript decorator for a class-based API
vue-rx		RxJS integration
vue-devtools		Browser DevTools extension

Directivas

{{ interpolacion }} Guía de atajos de vue

v-model

Puede usar la directiva v-model para crear bindings de datos bidireccionales (two-way binding) en elementos input, textarea y select de un formulario. La directiva busca automáticamente la manera correcta de actualizar el elemento según el tipo de entrada. Aunque un poco mágico, v-model es esencialmente syntax sugar para actualización de datos a través de eventos de entradas del usuario, además de mostrar un cuidado especial para algunos casos de borde.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <div id="app">
    <span>El mensaje multilínea es:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="agregar múltiples líneas"></textarea>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "v-model"
      }
    })
  </script>
</body>
</html>   

propiedades computadas

Las expresiones en el template son muy convenientes, pero están diseñadas para operaciones simples. Poner demasiada lógica en sus templates puede hacerlos grandes, complejos y difíciles de mantener. Por ejemplo:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

En este punto, el template ya no es simple y declarativo. Debe mirarlo por un segundo antes de darse cuenta de que muestra message al revés. El problema se agrava cuando desea incluir el mensaje invertido en su template más de una vez.

Es por eso que para cualquier lógica compleja, deberia usar una propiedad computada.

<div id="example">
  <p>Mensaje original: "{{ message }}"</p>
  <p>Mensaje invertido computado: "{{ reversedMessage }}"</p>
  <textarea v-model="message" placeholder="agregar múltiples líneas"></textarea>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
  const vm = new Vue({
  el: '#example',
  data: {
    message: 'test'
  },
  computed: {
    // un getter computado
    reversedMessage: function () {
      // `this` apunta a la instancia vm
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

https://es.vuejs.org/v2/guide/computed.html

watch

<div id="example">
  <p>Mensaje watch: "{{ fullMessage }}"</p>
  <p>Mensaje original: "{{ message }}"</p>
  <p>debouncedSearchValue: "{{ debouncedSearchValue }}"</p>
  <p>Mensaje invertido computado: "{{ reversedMessage }}"</p>
  <textarea v-model="message" placeholder="agregar múltiples líneas"></textarea>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
  const vm = new Vue({
  el: '#example',
  data: {
    message: 'test',
    firstName: 'Foo',
    lastName: 'Bar',
    debouncedSearchTiemeOut: null,
    debouncedSearchValue: null
  },
  computed: {
    // un getter computado
    reversedMessage: function () {
      // `this` apunta a la instancia vm
      return this.message.split('').reverse().join('')
    },
    fullMessage: function() {
      return this.firstName + " " + this.lastName + " " + this.message;
    },
  },
  watch: {
    message: "serchValue"
  },
  methods: {
    serchValue(value, oldValue) {
      // Create debounced
      console.log({value, oldValue})
      if (this.debouncedSearchTiemeOut)
        clearTimeout(this.debouncedSearchTiemeOut);

      this.debouncedSearchTiemeOut = setTimeout(() => {
        this.debouncedSearchValue = value
      }, 1000);
    }
  },
})
</script>

Practica 1 de vue con refactore (Todo App)

Generar un proyecto de vue con vue-cli

$ npm i -g npm install -g @vue/cli

$ vue create vue-todolist-app

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 () TypeScript
 (*) Progressive Web App (PWA) Support
 ( ) Router
 (*) Vuex
 ( ) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

vue 2

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

Vuex

documentación de vuex

curso de vuex

Que problematica resolvemos con vuex ?

• flujo del estado sin vuex

• flujo del estado con vuex

store reactivo con vuex

!Importante todas nuestras acciones son procesos asíncronas (async) y todos nuestros commits deberan ser síncronos

lo que no tenemos que hacer con vuex

Conceptos generales de vuex

• State: Es muy similar a la data, es reactiva.

• Getters: Es muy similar a las propiedades computadas.

• Mutations: Funciones que pueden modificar nuestro state.

• Actions: Funciones que pueden ser asíncronas y tambien pueden llamar a las mutations.

• Modulos: Es un Agrupador de nuestro state, getters, mutations, actions y otros modulos.

cuando usamos vuex ?

Proyecto de Backend

• Link Repository

Proyecto de fetch github

Creacion de proyecto con vue desde un solo componente para ver nuevas propiedades y practicar desde 0 hasta refactorizar y separa en componentes.

vue-github-commits

Proyecto de vuex y router blog

Creacion de proyecto de un blog con vuex y vue router

link del proyecto

generar un proyecto de typescript con vue@2 y ts.

npm init vue@2

C:\Users\omiramontes\Documents\proyectos4k>npm init vue@2
√ Project name: ... blog-vuex-router
√ Add TypeScript? ... No / *Yes
√ Add Vue Router for Single Page Application development? ... No / *Yes
√ Add Pinia for state management? ... *No / Yes
√ Add Cypress for testing? ... No / *Yes

Mixins: https://es.vuejs.org/v2/guide/mixins.html Vue class components: https://class-component.vuejs.org/guide/ Vue Router:https://v3.router.vuejs.org/guide/#html Vuetify: https://vuetifyjs.com/en/getting-started/installation/

Vue Router

Official Documentation

• Vue 3
• Vee Validate Documentation