Comenzaremos con las bases de Vue.js
- Vue.js Inicial
Bases de Vue.js iniciales
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.
Algunos puntos de interés 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, Cypress, Vue-Utils, Quasar...
- progresiva: lo tienes todo y lo agregas según te haga falta: solo web, spa, ssr...
SPA (Single Page Application) es una aplicación web que se carga una sola vez y que se actualiza dinámicamente a medida que el usuario interactúa con ella. En lugar de cargar una nueva página cada vez que el usuario hace clic en un enlace, la aplicación web carga una sola página HTML y actualiza el contenido de la página según sea necesario en base al código JavaScrip. Esto permite que las aplicaciones web sean más rápidas y fluidas para el usuario.
Este es el gran poder de los frameworks de JavaScript, ya que nos permiten crear aplicaciones web de forma rápida y sencilla, además de potente.
Vamos a usar la plantilla oficial basada en Vite(le da muchas más rapidez que el antiguo Vue CLI). Debemos tener la extensión Volar instalada
$ npm init vue@latestNos dará a elegir una plantilla de Vue.js
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesFinalmente:
> cd <your-project-name>
> npm install
> npm run devEn mi caso vamos a usar JS con Pinia, ESlint y Prettier.
La estructura del proyecto es la siguiente:
- src: carpeta donde se encuentra el código de nuestra app
- assets: carpeta donde se encuentran los assets o recursos estáticos de nuestra app
- components: carpeta donde se encuentran los componentes de nuestra app. Puede tener recursos propios por cada componente o test de dichos componentes
- views: carpeta donde se encuentran las vistas de nuestra app (opcional)
- App.vue: archivo principal de nuestra app (como solo hay uno, no se necesita views)
- main.js: código de inicialización de nuestra app
- test: carpeta donde se encuentran los tests de nuestra app (opcional)
npm installnpm run devnpm run buildRun Unit Tests with Vitest
npm run test:unitLint with ESLint
npm run lintUn SFC o Single File Component es una forma de encapsular los elementos de componente en base a su estructura, lógica y presentación. Su extensión es .vue
- templete: plantilla de la vista con el DOM
- script: código de nuestro componente siguiendo Options API o Composition API
- style: estilo de nuestro componente, puede ser scooped lo cual este estilo solo se aplica al componente en cuestión
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.
Se crea un componente, es importante indicar su nombre, name. El nombre nos sirve para poder localizarlo con las Vue Developer Tools. Se importa en el destino el componente. Se incluye en el objeto components y se usa según el nombre con el que se ha importado.
<template>
<p>Init</p>
<MyCounter />
{{ msg }}
</template>
<script>
import MyCounter from '@/components/MyCounter.vue'
export default {
name: 'App',
components: {
MyCounter,
},
data() {
return {
msg: 'Hello Vue.js',
}
},
}
</script>
<style scoped>
p {
color: red;
}
</style>Es la parte de HTML que se va a renderizar en base a la lógica del componente. Es la vista
Es la lógica del componente. Aquí se define el componente, se importan los componentes hijos, se definen los datos, métodos, etc. Es el controlador y modelo de la vista.
Define los estilos del componente. Puede ser scoped, lo cual significa que solo afecta al componente en cuestión. Si no se indica scoped afecta a toda la app.
A la hora de trabajar con el Template y comunicarlo con el controlador y el modelo, tenemos las directivas. Son pequeñas instrucciones que se añaden a los elementos del DOM.
Podemos hacer interpolación de texto mediante sintaxis moustache. Todo tendrá efecto en en el DIV que controlamos.
<h1>{{ title }}</h1>
<p>{{ message }}</p>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>Podemos renderizar una lista de elementos con la directiva v-for:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>Podemos usar eventos y reaccionar reactivamente. Los eventos se manejan con la directiva v-on:evento, pero se puede simplificar usando @evento
<button v-on:click="handleClick">Click me!</button>
<button @click="handleClick">Click me!</button>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" />Podemos enlazar reactividad con formularios con la directiva v-model.
<input type="text" v-model="message">Podemos representar un estado reactivo con el objeto data
data() {
return {
message: "Hola Vue :)"
}
},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 :)"
}
}Las propiedades computadas son propiedades que se calculan en base a otras propiedades del objeto y su valor está cacheado en el componente. Al contrario que los métodos que siempre se ejecutan, las computed properties solo se ejecutan si detectan un cambio en el estado que les afectan, por ejemplo, si se cambia el valor de una propiedad. Muy útil para optimizar el rendimiento de nuestra app, pues pueden usar caché para mejorar su rendimiento.
computed: {
counterSquare() {
return this.counter * this.counter
},
},Los watchers son métodos que se ejecutan cuando se detecta un cambio en el estado de nuestra app. Es decir son observables que reaccionan a los cambios en el estado de nuestra app y con ello mejoran la reactividad.
// Mi estado
data() {
return {
question: '',
}
},
// Mis watchers
watch: {
// Observamos question
question(newQuestion, oldQuestion) {
// Si la pregunta cambia
// console.log(oldQuestion, newQuestion)
// Si la pregunta termina con un signo de interrogación
if (newQuestion.endsWith('?') && newQuestion.length > 1) {
// Respuesta aleatoria
console.log('Si tiene el signo de interrogación')
}
},
},Este tema tiene varios ejercicios, puedes realizarlos aquí
Codificado con 💖 por José Luis González Sánchez.
Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.
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.
