CURSO DE VUE JS 3
Contenido
PROGRAMAS A UTILIZAR
- Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
- NodeJs Node.js es un entorno en tiempo de ejecución que nos permite ejecutar comandos en el servidor.
REQUISITOS BÁSICOS
- Conocimiento en Html
- Conocimiento en Css
- Conocimiento en Javascript intermedio
CONCEPTOS BÁSICOS
Vue es un framework de
Javascript de código abierto
para la construcción de interfaces de usuario y
aplicaciones de una sola página(SPA)=>(Single-page application = aplicación de una
sola página)
Vue se caracteriza por ser un framework progresivo (No importa si tu proyecto es
pequeño o grande, Vue
se integra fácilmente)
EXTENSIONES vsc
- Vetur
- Vue 3 snippets
- VueVscode snippets
- Vue peek
- es6-string-html
- Vue.js devtools
QUE ES VUE JS
Vue es un framework open source
de JavaScript, el
cual nos permite construir interfaces de usuarios de
una forma muy sencilla. La curva de aprendizaje, desde mi punto de vista, es
relativamente baja, claro,
debes conocer muy bien JavaScript, saber trabajar con callbacks, promesas, objetos,
entre otros temas
más.
Si queremos hacer uso de Vue no será necesario instalar absolutamente nada en
nuestra computadora, sí
así lo deseamos podemos utilizar este framework mediante un CDN.
Vue fue creado por Evan You ex trabajador de Google, quien, es importante mencionar,
fue desarrollador
Angular. Vue fue lanzado en el año 2014. Aunque inicialmente fue pensado para ser un
biblioteca
personal, la comunidad hizo que el proyecto creciera a un ritmo impresionante,
posicionándolo hoy en día
como uno de los Frameworks web más populares, junto con Angular y React. 🖖
VUE CLI
- npm install -g @vue/cli
- vue --version
- ubicarse en la carpeta para tus proyectos
- vue create hello-world
- SELECCIONAR (babel-router-vueEx-sass-linter)
- Al final pregunta si deseas guardar esta configuracion
- cd hello-world
- npm run serve
SINTAXIS
<div id="app">
<h1>{{mensaje}}</h1>
<!-- EN LARAVEL agrega el @ -->
<h1>@{{mensaje}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script><!--cdn-->
<script src="https://unpkg.com/vue-router@4"></script><!--cdn VUE-ROUTER-->
<script>
const app = {
data() {
return {
mensaje: "Hola como estas"
}
}
}
const miApp = Vue.createApp(app).mount("#app")//creando un nuevo App y montando
</script>
SINTAXIS DE SCRIPTS
<script src="https://unpkg.com/vue@next"></script><!--cdn de vue 3-->
<script src="https://unpkg.com/vue-router@4"></script><!--cdn de vue router-->
<!-- scripts -->
<script src="componentes/main.js"></script><!--objeto principal-->
<script>const MiApp = Vue.createApp(app)</script><!--creando nuestra app-->
<script src="componentes/compo.js"></script><!--llamamos a los componentes-->
<script src="rutas/prueba.js"></script><!--llamamos a las rutas-->
<script>
MiApp.use(ruta)//usamos las rutas
MiApp.mount("#app")//montamos nuestra app en el container("#app")
</script>
V-MODEL
Nos permite manipular los datos de un input en tiempo real.
<div id="app">
<!-- Input - Textarea - Checkbox - Radio - Select -->
<!-- .lazy - .number - .trim -->
<input type="text" v-model="mensaje">
<input type="number" v-model.number="mensaje">
<p>Mensaje: {{mensaje}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
mensaje: ""
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
V-TEXT
Se usa para mejorar el renderizado en la página.
<div id="app">
<h1>Hola <span v-text="mensaje"></span></h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
mensaje: "como estas"
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
V-IF
Se usa para dar condiciones.
<div id="app">
<h1 v-if="mensaje!=''">Hola <span v-text="mensaje"></span></h1>
<h6 v-else>Sin texto</h6>
<input type="text" v-model="mensaje">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
mensaje: "",
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
V-SHOW
Es similar a V-IF pero en este caso el V-SHOW solo oculta el elemento, miestras que
el V-IF borra el
elemento.
<div id="app">
<h1 v-show="mensaje!=''">Hola <span v-text="mensaje"></span></h1>
<input type="text" v-model="mensaje">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
mensaje: "",
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
V-FOR
Sirve para recorrer elemntos de un array.
<div id="app">
<ol>
<li v-for="(lista, index) in semana">{{lista}}</li>
</ol>
<!-- ************************************* -->
<ul>
<li v-for="(fruta, index) in frutas">{{fruta.nombre}} <span>{{fruta.cantidad}}</span></li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
mensaje: "",
semana: [
"lunes", "martes", "miercoles", "jueves", "viernes"
],
frutas: [
{ nombre: "manzana", cantidad: 10 },
{ nombre: "pera", cantidad: 20 },
{ nombre: "platano", cantidad: 100 }
]
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
V-BIND
Nos permite agregar atributos a nuestra etiqueta de forma
dinámica.
1 FORMA: Clases estáticas
<div id="app">
<div class="bg-dark" :class="'p-4'">
<p :class="'text-dark alert alert-info'">Lorem, ipsum dolor.</p>
</div>
</div>
2 FORMA: Clases dinámicas
<div id="app">
<div :class="{'bg-info' : fondo == true , 'bg-danger' : fondo == false}">
<p>Lorem, ipsum dolor.</p>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
fondo: true
}
}
}
const vue = Vue.createApp(app).mount("#app")
</script>
EVENTOS
Los eventos sirven para ejecutar una acción.
<div id="app">
<!-- <button v-on:click="saludar">Saludar</button> -->
<button @click="saludar">Saludar</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
methods: {
saludar() {
alert("Hola como estas");
}
},
}
const vue = Vue.createApp(app).mount("#app")
</script>
MODIFICADORES DE EVENTOS
.stop
.prevent
.capture
.self
.once
.passive
<!-- Se detendrá la propagación del evento click. -->
<a v-on:click.stop="hasEsto"></a>
<!-- El evento de enviar ya no volverá a cargar la página. -->
<form v-on:submit.prevent="onSubmit"></form>
MODIFICADORES DE TECLAS
.enter
.tab
.delete (captura ambas teclas “Delete” y “Backspace”)
.esc
.space
.up
.down
.left
.right
<input @keyup.enter="agregarFruta()">
DIFERENCIAS EN METHODS Y COMPUTED
La diferencia es sencilla.
METHODS se ejecuta cada vez que se invoca al metodo y siempre lleva
los (con parametros).
COMPUTED se ejecuta solo cuando existen cambios y nunca lleva los (sin
parametros).
METODOS EN EL CICLO DE VIDA
Los más usados son el método created y el mounted.
Existen muchos más métodos en el ciclo de un componente de Vue como el beforeMounted
o el beforeUpdated,
pero no he querido explicar porque raras veces se utiliza.
BeforeCreate
En ese punto Vue todavía no ha cargado el componente, esto quiere decir que no
puedes acceder a ninguna
opción, , por ejemplo, puedes comporbar que el usuario esté logueado antes de entrar
en una ruta para
que en caso de no estarlo se redirija a la del login.
Created
Uno de los que más se usan. Se ejecuta después de beforeCreated. En ese punto Vue ya
ha cargado todas
las opciones del componente y por tanto ya existe la sección data y los métodos.
Aquí puedes hacer
llamadas a variables y puedes ejecutar métodos.
La única pega es que en este punto Vue todavía no ha cargado la vista, no la ha
renderizado y no puedes
leer o modificar nada que afecte a ls vista porque todavía no existe. No puedes
acceder al DOM de ese
componente.
Mounted
A diferencia del created, en el mounted si que tenemos acceso al DOM, es decir, el
computed se ejecuta
exactamente cuando se termina de pintar la vista en la página web y por tanto desde
aquí podemos hacer
cambios en la vista.
Updated
Con este método hay que tener mucho cuidado. Se ejecuta cada vez que se produce un
cambio en el
componente y cambia algo de la vista. Se recomienda aquí no hacer muchos cambios en
el data o en la
vista y utilizar propiedades computadas o watchers que veremos más adelante.
Destroyed
Como puedes suponer, el destroyed se ejecuta cuando eliminamos un componente, cuando
ya no esta cargado.
Esto puede pasar cuando cambias de vista o cuando o cuando se borra un componente
del DOM porque ha sido
ocultado con v-if.
COMPONENTES
Los componentes se pueden definir como bloques de código que pueden
ejecutar
funcionalidades y que pueden ser reutilizables
Ten en cuenta que si utiliza CamelCase en el props; En la vista se
utiliza el "-"
<div id="app">
<saludo color-boton="btn-success"></saludo>
<saludo color-boton="btn-danger"></saludo>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vue = Vue.createApp(app);
vue.component("saludo", {
data() {
return {
nombre: "ISAI"
}
},
/* props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise or any other constructor
},*/
props: [
"colorBoton"
],
template: /*html*/
`
<div>
<h1>Hola {{nombre}} como estas</h1>
<button class="btn" :class="colorBoton">esto es un saludo</button>
</div>
`
})
vue.mount("#app")
</script>
VUE ROUTER
Vue
Router
se utiliza para facilitar la creación de aplicaciones de una sola página con
Vue.js
<script src="https://unpkg.com/vue-router@4"></script>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-view></router-view>
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const misRutas = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
const ruta = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes:misRutas,
})
MiApp.use(ruta)
MiApp.mount("#app")
VUE ROUTER ANIDADO
<router-view></router-view>
<!-- esta vista tiene un nombre -->
<router-view name="b"></router-view>
<h3>PAGINA {{ $route.params.id }}</h3>
const uno = { template: '<div>UNO</div>' }
const dos = { template: '<div>DOS</div>' }
const misRutas = [
{ path: '/', component: Inicio },
{ path: '/servicios', component: Servicio },
{
path: '/contacto/:id', component: Contacto,
children: [
{
path: '/contactos/uno',
components: {
b: uno /* b es el nombre de la vista */
}
},
{
path: '/contactos/dos',
components: {
b: dos /* b es el nombre de la vista */
}
}
],
},
]
const ruta = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes:misRutas,
})
MiApp.use(ruta)
MiApp.mount("#app")
ELIMINAR ESLINT DE VUE-CLI
npm remove @vue/cli-plugin-eslint
npm install --save clipboard