Guia Rápida de VueJs

Hola a todos, este blog es para darle un vistazo rápido y compacto a como se desarrolla aplicaciones con este framework, veremos la sintaxis que usa el template de archivos de vue como las características que esta poseen, esta guía es válida para las versiones 2 y 3. Con conocimientos básicos de HTML, CSS y JS, ya es posible entender esta guía al 100%. Dicho esto comenzamos.

Contenidos

Que es Vue.js
Como crear un proyecto en vue
2.1 Vue CLI
2.2 Vite
Template
3.1 Directivas
3.1.1 Renderizado condicional con v-if y v-else
3.1.2 Renderizado de lista con v-for
Script
4.1 Invocación de Eventos
Styles
Conclusión

Que es Vue.js

Vue es un framework progresivo para construir interfaces de usuario, que es fácil de utilizar e integrar con otras librerías o proyectos existentes, de codigo abierto. Similar a Angular, React y Svelte.

Como crear un proyecto en Vue.js

Para poder crear un proyecto en Vue.js es necesario tener instalado nodejs en nuestro computador.
Mencionar que en esta sección no se tomara la instalación por CDN, ya que no van acordes a los ejemplos de la guia, pero si desean saberlo les dejo el link, Instalacion por CDN.
Existen dos formas válidas de crear un proyecto uno es usando Vue CLI y la otra es con Vite, dejare una pequeñas descripciones para que elijan cuál les llama mas la atencion.

Vue CLI

Es una herramienta para construir el entorno de Vue.js completa sin estar peleando con las configuraciones, con la flexibilidad de poder elegir las herramientas con las que deseas construir el entorno. todo desde la línea de comandos de una forma interactiva.
También viene con el plus de añadir nuevas herramientas dentro del entorno a un futuro de forma rápida mediante comandos.
Haremos todo este proceso con npm.
Primero debemos de descargar la herramienta que nos permite generar estos entornos:

npm install -g @vue/cli @vue/cli-service-global

Y/o verificamos las instalación con:

vue --version

Y creamos el proyecto con:

vue create nombre-app

Mencionar que esta herramienta construye al entorno de Vue.js con webpack.
Para mas informacion de como crear un proyecto en Vue CLI.

Vite

Vite es una solución relativamente nueva para crear entornos de Vue.js que usa esbuild. No da opción a incrementar con otras herramientas dentro del entorno rapidamente como la hace Vue CLI . Pero promete ser mucho más rápido que la anterior y viene con lo necesario para empezar a desarrollar.
Para crear un proyecto usamos:

npm init vite@latest

Y seguimos las instrucciones que nos da para crear el proyecto en Vue.js.
Esta herramienta nos crea el entorno usando Vue 3 pero en esencia no cambia a lo que veremos en la guía.

Template

Si es tu primera vez creando un proyecto en vue, y creaste un nuevo proyecto, te recomiendo que apliques todos estos conceptos en el archivo App.vue.
El template es donde se escribe el HTML de la instancia las directivas y donde se invocarán los eventos.

<template>
    <div>
        <p> Hola Mundo </p>
    </div>
</template>

Es importante que el template solo tenga un único hijo directo, para contener a todas las etiquetas que se renderizan, en este ejemplo el elemento padre es el div, pero no necesariamente tiene que ser un div, esto en la versión 2 de Vue, para la versión 3 ya no es necesario seguir esta regla.

Directivas

Las directivas de Vue es como renderizamos el HTML de la instancia. Las más usadas con v-if que renderiza un elemento con una booleano y v-for que itera un array de elementos.

Renderizado condicional con `v-if` y `v-else`

La directiva v-if tiene que estar en el elemento que se desea renderizar condicionalmente y contener booleano para comprobar si se debe de renderizar o no.

<template>
    <div>
        <div v-if="Math.random() > 0.5">
          Ahora me ves
        </div>
        <div v-else>
          Ahora no
        </div>
    </div>
</template>

En este caso, el 'Ahora me ves' se renderiza si el número randómico es mayor a 0.5, caso contrario se renderiza el 'Ahora no'.
Más información respecto al tema en Renderizacion Condicional.

Renderizado de lista con `v-for`

Se agrega el atributo v-for a la etiqueta que se desea usar para la iteración.

<template>
    <div>
        <ul>
          <li v-for="number in [1, 2, 3, 4, 5]">
            {{ number }}
          </li>
        </ul>
    </div>
</template>

Y de esta manera queda una lista de números en el HTML.

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

El number representa la variable el elemento que se está iterando y el array de números es la estructura que estamos iterando, esta no necesariamente tiene que estar en el HTML sino que podemos tenerla en una variable dentro de la instancia.
Más información respecto al tema en Renderizacion de Lista.

Script

El script es el contenedor del JS que se usa en la aplicación que vendría siendo la logia, similar a como se incrusta JS en el HTML. Vue maneja options API que son secciones que manejan alguna característica de vue, que tienen que estar contenidas en el export default, donde las más importante es la sección de Data donde rescatamos a la opción de methods que sirve para agregar métodos a la instancia de Vue y data que maneja y almacena todas las variables que se usarán dentro de la instancia.

<script>
    export default {
        data() {
            return {
                bestForum: 'SCESI'
            }
        },
        methods: {}
    }
</script>

Para todas las variables que están en data, estas variables se pueden acceder dentro del script con this como si se tratase de un atributo del objeto.
Acceder desde un método de la instancia:

methods: {
    sayHelloToTheBestForum() {
        console.log('Hello' + this.bestForum)
    }
}

Acceder desde el template:

<template>
    <div>
        <p>{{ bestForum }}</p>
    </div>
</template>

Existen otras options API como los Hooks del Ciclo de Vida de Vue y las Propiedades Computadas y Observables.

Invocación de Eventos

Los eventos son necesarios para interactuar con la aplicación, estos son invocados como atributos de HTML pero que inicien con un v-on o también con @ que este es un alias identificarlos como eventos, y luego especificar qué evento se quiere invocar.

<template>
    <div>
        <div>{{count}}</div>
        <button @click="addCount()">Click Me</button>
        <!-- o -->
        <!-- <button v-on:click="addCount()">Click Me</button> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            addCount(){
                this.count += 1
            }
        }
    }
</script>

Existe una gran cantidad de eventos disponibles, para aprender mas ver en Manejo de Eventos.

Styles

Style son para contener los selectores que se usarán dentro de la instancia, y pueden ser enlazadas directamente al HTML de la instancia.

<template>
    <section class="frontend-layout">
        <p>Hola Mundo</p>
    </section>
</template>

<style scoped>
    .frontend-layout {
        min-heigth: 100vh;
    }
    p {
        color: red;
    }
</style>

El atributo opcional scoped se usa para que las selectores tengan valor solo dentro de la instancia que donde estén escritas, su uso es recomendable por no decir obligatorio. Ya que no usarlo puede traer problemas a un futuro si no se manejan los estilos con una metodología correcta.
Existen distintas maneras de enlazar clases y estilos al template de la instancia más explicado en Enlace de Clases y Estilos.

Conclusión

Este es mi primer blog, espero que les sirva, trate de comprimir lo más importante, omitiendo quizás algunos contenidos.
Este es un framework muy fácil de aprender, y no contiene tantos tecnicismos como otros. También hace recuerdo a tener todo en un HTML con el CSS y el JS incrustados en etiquetas.
Si se quedaron con ganas de más traere otra guia de uso y comunicación de componentes proximamente.
Para aprender más sobre Vue y su entorno está la Guia en Español Vue.js.
Con esto me despido, si tienen alguna duda o sugerencia no duden en escribirme, me pueden contactar por mis redes sociales.