README.md

Introducción a Vue.js

En este apartado veremos las bases de Vue.js como sustituto a jQuery y similares

• Introducción a Vue.js
  • Acerca de
  • Referencias
  • Vue.js
  • Puntos interesantes
  • Instalación y montaje
  • Representación declarativa
  • Estilos de uso: Options vs Composition
  • Representación del estado: data
  • Introducción a los eventos: métodos y v-on
  • Renderizado de listas o repeticiones: v-for
  • Enlazando reactividad con formularios: v-model
  • Modificadores
  • Renderizado condicional: v-if y v-else-if y v-show
  • Ejercicios
  • Autor
    • Contacto
    • ¿Un café?
  • Licencia de uso

Acerca de

Bases de Vue.js como sustituto de jQuery y similares

Referencias

• Vue.js

Vue.js

Es un framework de JavaScript que nos permite crear aplicaciones web de forma sencilla y rápida. Es un framework progresivo, lo que significa que podemos ir añadiendo funcionalidades a medida que vamos necesitándolas.

Puntos interesantes

Algunos puntos de interes que podemos observar en Vue.js son:

• fácil de iniciar
• versátil y escalable
• rendimiento en el DOM (más rápido que React y Angular)
• ecosistema: vite, pinia, vue router, vitest, cypres, vue utils, quasar...
• progresiva: lo tienes todo y lo agregas según te haga falta.

Instalación y montaje

Podemos usar Vue.js desde el CDN https://unpkg.com/vue@next. A partir de aquí, creamos nuestro script app.js, y en la web decimos que parte de la web (div) queremos que controle.

Representación declarativa

Podemos hacer interpolación de texto mediante sintaxis moustache. Todo tendrá efecto en en el DIV que controlamos.

  <h1>{{ title }}</h1>
  <p>{{ message }}</p>

Estilos de uso: Options vs Composition

Cuando usamos Vue.js tenemos dos estilos, Options API y Composition API. Cada una será más adecuada según el proyecto. Comenzaremos con Options API y poco a poco iremos al Composition API. Lo veremos más adelante.

Representación del estado: data

Podemos representado un estado y reaccionar reactivamente bajo el objeto data

  data() {
    return {
      message: "Hola Vue :)"
    }
  },

Introducción a los eventos: métodos y v-on

Podemos usar eventos y reaccionar reactivamente. Los eventos se manejan con la directiva v-on:evento, pero se puede simplificar usando @evento

  methods: {
    onClick() {
      this.message = "Has pulsado el botón :)"
    }
  }

  <button v-on:click="handleClick">Click me!</button>
  <button @click="handleClick">Click me!</button>

Renderizado de listas o repeticiones: v-for

Podemos renderizar una lista de elementos con la directiva v-for:

  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>

Enlazando reactividad con formularios: v-model

Podemos enlazar reactividad con formularios con la directiva v-model.

  <input type="text" v-model="message">

Modificadores

Podemos usar modificadores de eventos, teclas o ratón para mejorar la lógica de nuestro código de una forma muy sencilla.

  <input type="text" v-model.trim="message" @keyup.enter"addName" />

Renderizado condicional: v-if y v-else-if y v-show

Podemos renderizar un elemento condicional con la directiva v-if y v-else-if y v-show.

  <div v-if="isVisible">
    <p>Esto sólo se muestra si isVisible es true</p>
  </div>
  <div v-else-if="!isVisible">
    <p>Esto sólo se muestra si isVisible es false</p>
  </div>
  <div v-show="isVisible">
    <p>Esto sólo se muestra si isVisible es true</p>
  </div>

Ejercicios

• Ejercicio 1

Autor

Codificado con 💖 por José Luis González Sánchez.

Contacto

Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.

              

¿Un café?

Licencia de uso

Este repositorio y todo su contenido está licenciado bajo licencia Creative Commons, si desea saber más, vea la LICENSE. Por favor si compartes, usas o modificas este proyecto cita a su autor, y usa las mismas condiciones para su uso docente, formativo o educativo y no comercial.

JoseLuisGS by José Luis González Sánchez is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.
Creado a partir de la obra en https://github.com/joseluisgs.