Curso de Vue JS - Tutorial en Español 😍 [Desde Cero] (Parte II)

Curso de Vue JS - Tutorial en Español 😍 [Desde Cero]


#10 Introducción a Vuex (Instalación con CDN) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Página de Vuex.
  • Crear un nuevo proyeccto e incluir Vuex.
  • Ir la página de Vuex a la parte de instalación.
  • Hacer click abajo de Descarga directa / CDN.
  • Se desplegará una página con la librería de Vuex, finalmente copiar la url de la página y construir un script con esa dirección para incluirlo en el head del archivo html.
  • index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vuex</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- script de Vuex -->
    <script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script> 
</head>
<body>
    <div id="app" class="container">
        <titulo></titulo>
    </div>
    <script>
        Vue.component('titulo',{
            template: //
            `
            <div>
                <h1>numero {{$store.state.numero}}</h1>
                <hijo></hijo>
            </div>
            `
        });
        Vue.component('hijo',{
            template: //
            `
            <div>
                <button @click="$store.commit('aumentar')">+</button>
                <h1>numero {{$store.state.numero}}</h1>
            </div>
            `
        });
        const store = new Vuex.Store({
            state:{
                numero: 10
            },
            mutations:{
                aumentar(state){
                    //this.state.numero++
                    state.numero++
                }
            }
        });
        new Vue({
            el: '#app',
            // es lo mismo escribir un solo estore
            store: store
        })
    </script>
</body>
</html>

#11 mapState con Vuex | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vuex</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- script de Vuex -->
    <script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script> 
</head>
<body>
    <div id="app" class="container">
        <titulo></titulo>
    </div>
    <script>
        Vue.component('titulo',{
            template: //
            `
            <div>
                <h1>numero {{numero}}</h1>
                <hijo></hijo>
            </div>
            `,
            computed:{
                ...Vuex.mapState(['numero'])
            }
        });
        Vue.component('hijo',{
            template: //
            `
            <div>
                <button @click="$store.commit('aumentar')">+</button>
                <h1>numero {{$store.state.numero}}</h1>
            </div>
            `
        });
        const store = new Vuex.Store({
            state:{
                numero: 10
            },
            mutations:{
                aumentar(state){
                    //this.state.numero++
                    state.numero++
                }
            }
        });
        new Vue({
            el: '#app',
            // es lo mismo escribir un solo estore
            store: store
        })
    </script>
</body>
</html>

#12 mapMutation y Parámetros en Mutation con Vuex | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vuex</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- script de Vuex -->
    <script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script> 
</head>
<body>
    <div id="app" class="container">
        <titulo></titulo>
    </div>
    <script>
        Vue.component('titulo',{
            template: //
            `
            <div>
                <h1>numero {{numero}}</h1>
                <hijo></hijo>
            </div>
            `,
            computed:{
                ...Vuex.mapState(['numero'])
            }
        });
        Vue.component('hijo',{
            template: //
            `
            <div>
                <button @click="aumentar">+</button>
                <button @click="disminuir(2)">-</button>
                <h1>numero {{numero}}</h1>
            </div>
            `,
            computed:{
                ...Vuex.mapState(['numero'])
            },
            methods:{
                ...Vuex.mapMutations(['aumentar','disminuir'])
            }
        });
        const store = new Vuex.Store({
            state:{
                numero: 10
            },
            mutations:{
                aumentar(state){
                    //this.state.numero++
                    state.numero++
                },
                disminuir(state, n){
                    state.numero -= n
                }
            }
        });
        new Vue({
            el: '#app',
            // es lo mismo escribir un solo estore
            store: store
        })
    </script>
</body>
</html>

#13 Action y mapAction con Vuex | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vuex</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- script de Vuex -->
    <script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script> 
</head>
<body>
    <div id="app" class="container">
        <titulo></titulo>
    </div>
    <script>
        Vue.component('titulo',{
            template: //
            `
            <div>
                <h1>numero {{numero}}</h1>
                <hijo></hijo>
            </div>
            `,
            computed:{
                ...Vuex.mapState(['numero'])
            }
        });

        Vue.component('hijo',{
            template: //
            `
            <div>
                <button @click="aumentar">+</button>
                <button @click="disminuir(2)">-</button>
                <button @click="obtenerCursos">Obtener Cursos</button>
                <h1>numero {{numero}}</h1>
                <ul v-for="item of cursos">
                    <li>{{item.nombre}}</li>
                </ul>
            </div>
            `,
            computed:{
                ...Vuex.mapState(['numero', 'cursos'])
            },
            methods:{
                ...Vuex.mapMutations(['aumentar','disminuir']),
                ...Vuex.mapActions(['obtenerCursos'])
            }
        });

        const store = new Vuex.Store({
            state:{
                numero: 10,
                cursos: []
            },
            mutations:{
                aumentar(state){
                    //this.state.numero++
                    state.numero++
                },
                disminuir(state, n){
                    state.numero -= n
                },
                llenarCursos(state, cursosAccion){
                    state.cursos = cursosAccion
                }
            },
            actions:{
                obtenerCursos: async function({commit}){
                    const data = await fetch('cursos.json');
                    const cursos = await data.json();
                    commit('llenarCursos', cursos)
                }
            }
        });

        new Vue({
            el: '#app',
            // es lo mismo escribir un solo estore
            store: store
        })
    </script>
</body>
</html>
  • cursos.json:
[
    {"nombre":"HTML","id":1},
    {"nombre":"CSS","id":2},
    {"nombre":"JavaScript","id":3}
]

#14 Instalación VUE CLI 3 | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Ir a la página de Node.js e instalarlo.
  • Instalar el CLI de Vue.js ejecutando en terminal:
$ npm install -g @vue/cli
  • Ejecutar en terminal la siguiente línea:
$ vue --version
  • Con la acción anterior comprobamos que quedó bien instalado.
  • Para crear un nuevo proyecto en Vue CLI, escribimos en la línea de comando:
$ vue create proyecto-1
  • Con el cursor, seleccionamos la instalación manual.
  • Dejamos la configuración por defecto (Babel y Linter / Formater) y seleccionamos adicionalmente a Vuex.
  • Presionamos enter continuamente, cuando nos pregunte por 'Save this as a preset for future projects?', le decimos que no.
  • Ejecutamos:
$ cd poyecto-1
$ npm run serve (Ejecuta el servidor local)

#15 Vue CLI 3 UI (INTERFAZ GRÁFICA) Creando nuestro primer proyecto | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Ejecutar en terminal:
$ vue ui
  • El comando anterior crea una página web para crear lo que realizamos en la sección anterior sin la necesidad de utilizar líneas de comando (http://localhost:8000/project/select).
  • En la página web le damos al menú crear, y comenzamos a diseñar nuestro nuevo proyecto.
  • Para nuestro caso nos iremos por la opción manual y no seleccionaremos Linter / Formatter, pero si Vuex y Babel.
  • Desde la página creada se puede administrar nuestro proyecto.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Algunas páginas de cursos online recopiladas por Soluciones++

Imagen
Principales páginas de cursos online: Linkedin Learning Excelente página, muchos cursos son gratuitos, y todos con certificados, y de paso quedan de una vez registrados en tu perfil de Linkedin. DevCode Esta página me la acaba de recomendar un amigo, se ve muy buena, algunos cursos son gratuitos y entrega certificados. Platzi Excelente plataforma de cursos, todos sus cursos son pagos, excepto unos pocos. De los gratuitos existen dos que son muy buenos, uno de Programación Básica y otros de Marca Personal, ambos son muy, pero muy buenos. Códigofacilito En esta página tiene muchos cursos gratuitos, pero pocos con certificados. Los cursos que he visto tienen un enfoque práctico y están muy bien explicados. Microsoft No he tenido la oportunidad aún de explorar detenidamente la calidad de los cursos que ofrecen, pero según las críticas que he podido leer, muchos son muy buenos, gratuitos y entregan certificad...
Leer más

Ruta hacia el desarrollador web full stack en Soluciones++

Imagen
Curso de Marca Personal de Platzi Lo primero, pero lo primero es realizar el curso de Marca Personal de Platzi, que si bien no te enseñará a programar, te dará intrucciones claras de la orientación que deben tomar tus proyectos y tus estudios, para ir construllendo desde el inicio un cv impecable. El curso es completamente gratuito y entrega certificado. Ir a curso de Marca Personal Abrir una cuenta en GitHub Es necesario abrir primero que nada una cuenta en GitHub para poder ir creando repositorio de los proyectos que realices a lo largo de este grato y largo camino hacia nuestra conversión en desarrollador web full stack. Ir a GitHub Curso de GitHub Para poder crear respositorios, .... Ir a Curso de GitHub
Leer más