Showing preview only (377K chars total). Download the full file or copy to clipboard to get everything.
Repository: juanwmedia/vue-firebase
Branch: master
Commit: f72f17a49434
Files: 480
Total size: 280.3 KB
Directory structure:
gitextract_2njoxt7a/
├── 1-instalacion-data-binding/
│ ├── index.html
│ └── js/
│ └── main.js
├── 10-transiciones/
│ ├── index.html
│ └── main.js
├── 11-ajax-vue-resource/
│ ├── index.html
│ └── js/
│ └── main.js
├── 12-ajax-axios/
│ ├── index.html
│ └── js/
│ └── main.js
├── 13-components-intro/
│ ├── index.html
│ └── js/
│ └── main.js
├── 14-components-templates/
│ ├── index.html
│ └── js/
│ └── main.js
├── 15-components-props/
│ ├── index.html
│ └── js/
│ └── main.js
├── 16-prop-validation/
│ ├── index.html
│ └── js/
│ └── main.js
├── 17-slots-named-slots/
│ ├── css/
│ │ └── main.css
│ ├── index.html
│ └── js/
│ └── main.js
├── 18-scoped-slots/
│ ├── css/
│ │ └── main.css
│ ├── index.html
│ └── js/
│ └── main.js
├── 19-custom-events/
│ ├── css/
│ │ └── main.css
│ ├── index.html
│ └── js/
│ └── main.js
├── 2-directivas-incluidas/
│ ├── index.html
│ └── js/
│ └── main.js
├── 20-component-communication/
│ ├── css/
│ │ └── main.css
│ ├── index.html
│ └── js/
│ └── main.js
├── 21-components-inside-components/
│ ├── index.html
│ └── js/
│ └── main.js
├── 22-dynamic-components/
│ ├── index.html
│ └── js/
│ └── main.js
├── 23-custom-input-components/
│ ├── index.html
│ └── js/
│ └── main.js
├── 24-ejercicio-components/
│ ├── finalizado/
│ │ ├── css/
│ │ │ └── main.css
│ │ ├── index.html
│ │ └── js/
│ │ └── main.js
│ └── inicio/
│ ├── css/
│ │ └── main.css
│ ├── index.html
│ └── js/
│ └── main.js
├── 25-vue-cli/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ └── main.js
│ └── webpack.config.js
├── 26-single-file-components/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Persona.vue
│ │ └── main.js
│ └── webpack.config.js
├── 27-render-function/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Elemento.vue
│ │ └── main.js
│ └── webpack.config.js
├── 28-hot-reloading/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Tareas.vue
│ │ └── main.js
│ └── webpack.config.js
├── 29-scoped-css/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Tareas.vue
│ │ └── main.js
│ └── webpack.config.js
├── 3-renderizado-de-listas/
│ ├── index.html
│ └── js/
│ └── main.js
├── 30-css-modules/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ └── main.js
│ └── webpack.config.js
├── 31-shared-state/
│ ├── index.html
│ └── js/
│ └── main.js
├── 32-vuex-central-store/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Contador.vue
│ │ ├── main.js
│ │ └── store/
│ │ └── store.js
│ └── webpack.config.js
├── 33-vuex-state/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── main.js
│ │ └── store/
│ │ └── store.js
│ └── webpack.config.js
├── 34-vuex-getters/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── Tareas.vue
│ │ ├── components/
│ │ │ └── TareasRestantes.vue
│ │ ├── main.js
│ │ └── store/
│ │ └── store.js
│ └── webpack.config.js
├── 35-vuex-mutations/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Contador.vue
│ │ ├── main.js
│ │ └── store/
│ │ └── store.js
│ └── webpack.config.js
├── 36-vuex-actions/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ └── Contador.vue
│ │ ├── main.js
│ │ └── store/
│ │ └── store.js
│ └── webpack.config.js
├── 37-vuex-modules/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Carro.vue
│ │ │ └── Productos.vue
│ │ ├── main.js
│ │ └── store/
│ │ ├── modules/
│ │ │ └── productos.js
│ │ └── store.js
│ └── webpack.config.js
├── 38-vuex-structure/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Carro.vue
│ │ │ └── Productos.vue
│ │ ├── main.js
│ │ └── store/
│ │ ├── getters.js
│ │ ├── modules/
│ │ │ └── productos.js
│ │ ├── mutations.js
│ │ └── store.js
│ └── webpack.config.js
├── 4-vue-devtools/
│ ├── index.html
│ └── js/
│ └── main.js
├── 40-vue-router-intro/
│ ├── index.html
│ └── js/
│ └── main.js
├── 41-vue-router-components/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ └── Home.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 42-vue-router-active-links/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ └── Home.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 43-vue-programmatic-nav/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ └── Home.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 44-vue-router-dynamic-routes/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Home.vue
│ │ │ └── Usuario.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 45-vue-router-reacting/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Home.vue
│ │ │ └── Usuario.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 46-vue-router-nested-routes/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Equipo.vue
│ │ │ ├── EquipoJuan.vue
│ │ │ └── Home.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 47-vue-router-nested-nav/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 48-vue-router-named-routes/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 49-vue-router-named-views/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 5-eventos/
│ ├── index.html
│ └── js/
│ └── main.js
├── 50-vue-router-redirect/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 51-vue-router-passing-props/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 52-vue-router-history-mode/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ └── routes.js
│ └── webpack.config.js
├── 53-vue-router-global-guard/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 54-vue-router-route-guard/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 55-vue-router-component-guard/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 56-vue-router-meta-field/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 57-vue-router-transitions/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 58-vue-router-data-fetch/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Contacto.vue
│ │ │ ├── Equipo.vue
│ │ │ ├── Home.vue
│ │ │ ├── NoEncontrado.vue
│ │ │ ├── Usuario.vue
│ │ │ ├── UsuarioBio.vue
│ │ │ └── UsuarioFotos.vue
│ │ ├── main.js
│ │ ├── routes.js
│ │ └── store.js
│ └── webpack.config.js
├── 59-vue-router-srcoll/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Bio.vue
│ │ │ └── Info.vue
│ │ └── main.js
│ └── webpack.config.js
├── 6-propiedades-computadas/
│ ├── index.html
│ └── js/
│ └── main.js
├── 60-vue-router-lazy-load/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── Bio.vue
│ │ │ └── Info.vue
│ │ └── main.js
│ └── webpack.config.js
├── 61-vue-directive-hooks/
│ ├── index.html
│ └── js/
│ └── main.js
├── 62-vue-directive-object-literals/
│ ├── index.html
│ └── js/
│ └── main.js
├── 64-mixins-intro/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── main.js
│ │ └── mixins.js
│ └── webpack.config.js
├── 65-mixins-merge/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── main.js
│ │ └── mixins.js
│ └── webpack.config.js
├── 66-global-mixins/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── main.js
│ │ └── mixins.js
│ └── webpack.config.js
├── 67-vue-filters/
│ ├── .babelrc
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ └── main.js
│ └── webpack.config.js
├── 68-form-input-basic/
│ └── index.html
├── 69-form-value-bindings/
│ └── index.html
├── 7-filtros/
│ ├── index.html
│ └── js/
│ └── main.js
├── 70-form-input-modifiers/
│ └── index.html
├── 71-firebase-agregar/
│ └── index.html
├── 72-firebase-leer/
│ └── index.html
├── 73-firebase-actualizar/
│ └── index.html
├── 74-firebase-eliminar/
│ └── index.html
├── 75-firebase-transactions/
│ └── index.html
├── 76-firebase-push-agregar/
│ └── index.html
├── 77-firebase-listas-eventos/
│ └── index.html
├── 78-firebase-ordenar/
│ └── index.html
├── 79-firebase-filtrar/
│ └── index.html
├── 8-instancia-vue/
│ ├── index.html
│ └── js/
│ └── main.js
├── 9-data-binding-atributos-clases/
│ ├── index.html
│ └── js/
│ └── main.js
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: 1-instalacion-data-binding/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<h1>{{ mensaje }}</h1>
<input type="text" v-model="mensaje">
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 1-instalacion-data-binding/js/main.js
================================================
// Vanilla JavaScript
// const input = document.querySelector('input');
// const h1 = document.querySelector('h1');
// input.addEventListener('keyup', () => h1.innerHTML = input.value);
// Vue.js
new Vue({
el: 'main',
data: {
mensaje: 'Hola mundo!',
}
});
================================================
FILE: 10-transiciones/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<style>
/* Transition */
.aparecer-enter {
opacity: 0;
}
.aparecer-enter-active {
transition: opacity 1s;
}
.aparecer-leave-to {
opacity: 0;
}
.aparecer-leave-active {
transition: opacity 1s;
}
/* Animation */
.bote-enter-active {
animation: bounce-in .5s;
}
.bote-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>
</head>
<body>
<main>
<button @click="mostrar = !mostrar">Mostrar/Ocultar</button>
<!-- Transition -->
<transition name="aparecer" appear>
<h1 v-if="mostrar" v-text="mensajes.transicion"></h1>
</transition>
<!-- Animation -->
<transition name="bote">
<h1 v-if="mostrar" v-text="mensajes.animacion"></h1>
</transition>
<!-- Animate.css -->
<transition
name="animate.css"
enter-active-class="animated rotateInUpLeft"
leave-active-class="animated zoomOutUp">
<h1 v-if="mostrar" v-text="mensajes.animationCustom"></h1>
</transition>
<!-- Transición entre diferentes elementos -->
<transition name="aparecer" mode="out-in">
<h1 v-if="mostrar" v-text="mensajes.entreElementos" key="aparecer"></h1>
<h1 v-else key="ocultar">No hay mensaje</h1>
</transition>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 10-transiciones/main.js
================================================
new Vue({
el: 'main',
data: {
mostrar: true,
mensajes: {
transicion: 'Transiciones CSS con Vue.js',
animacion: 'Animaciones CSS con Vue.js',
animationCustom: 'Animaciones custom CSS con Vue.js',
entreElementos: 'Transiciones entre elementos con Vue.js'
}
},
});
================================================
FILE: 11-ajax-vue-resource/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<img
v-for="persona in personas"
:src="persona.picture.thumbnail"
:alt="persona.name.first">
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 11-ajax-vue-resource/js/main.js
================================================
new Vue({
el: 'main',
mounted() {
this.cargarPersonas();
},
data: {
personas: []
},
methods: {
cargarPersonas() {
this.$http.get('https://randomuser.me/api/?results=500')
.then((respuesta) => {
this.personas = respuesta.body.results;
});
}
}
});
================================================
FILE: 12-ajax-axios/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<img
v-for="persona in personas"
:src="persona.picture.thumbnail"
:alt="persona.name.first">
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 12-ajax-axios/js/main.js
================================================
Vue.prototype.$http = axios;
new Vue({
el: 'main',
mounted() {
this.cargarPersonas();
},
data: {
personas: []
},
methods: {
cargarPersonas() {
this.$http.get('https://randomuser.me/api/?results=500')
.then((respuesta) => {
this.personas = respuesta.data.results;
});
// axios.get('https://randomuser.me/api/?results=500')
// .then((respuesta) => {
// this.personas = respuesta.data.results;
// });
}
}
});
================================================
FILE: 13-components-intro/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<!--<ul>
<li v-for="tarea in tareasAjax" v-text="tarea.title"></li>
</ul>-->
<!-- <h1>Tareas Ajax</h1>
<mis-tareas :tareas="tareasAjax"></mis-tareas>
<hr>
<h1>Tareas locales</h1>
<mis-tareas :tareas="tareasLocales"></mis-tareas>-->
<h1>Las tareas</h1>
<mis-tareas></mis-tareas>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 13-components-intro/js/main.js
================================================
Vue.component('mis-tareas', {
template: `<ul><li v-for="tarea in tareas">{{ tarea.title }}</li></ul>`,
mounted() {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then((respuesta) => {
this.tareas = respuesta.data;
});
},
data() {
return {
tareas: [],
}
}
});
new Vue({
el: 'main',
});
================================================
FILE: 14-components-templates/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<elegir-ganador :listado="personas" inline-template>
<div>
<h1 v-if="ganador">El ganador es: {{ ganador }}</h1>
<template v-else>
<h1>Participantes</h1>
<ul>
<li v-for="persona in listado">{{ persona }}</li>
</ul>
</template>
<button @click="elegirGanador">Elegir ganador</button>
</div>
</elegir-ganador>
<pre>{{ $data }}</pre>
</main>
<!-- Con tag template :) -->
<!--<template id="elegir-ganador-template">
<div>
<h1 v-if="ganador">El ganador es: {{ ganador }}</h1>
<template v-else>
<h1>Participantes</h1>
<ul>
<li v-for="persona in listado">{{ persona }}</li>
</ul>
</template>
<button @click="elegirGanador">Elegir ganador</button>
</div>
</template>-->
<!-- Con script :( -->
<!--<script type="text/template" id="elegir-ganador-template">
<div>
<h1 v-if="ganador">El ganador es: {{ ganador }}</h1>
<template v-else>
<h1>Participantes</h1>
<ul>
<li v-for="persona in listado">{{ persona }}</li>
</ul>
</template>
<button @click="elegirGanador">Elegir ganador</button>
</div>
</script>-->
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 14-components-templates/js/main.js
================================================
Vue.component('elegir-ganador', {
props: ['listado'],
//template: '#elegir-ganador-template',
/* template: `<div>
<h1 v-if="ganador">El ganador es: {{ ganador }}</h1>
<template v-else>
<h1>Participantes</h1>
<ul>
<li v-for="persona in listado">{{ persona }}</li>
</ul>
</template>
<button @click="elegirGanador">Elegir ganador</button>
</div>
`,*/
methods: {
elegirGanador() {
let cantidad = this.participantes.length;
let indice = Math.floor((Math.random() * cantidad));
this.ganador = this.participantes[indice - 1];
}
},
data() {
return {
ganador: false,
participantes: this.listado
}
},
});
new Vue({
el: 'main',
data: {
personas: [
'Juan', 'Alicia', 'Pedro', 'Javier', 'Marcos'
]
},
});
================================================
FILE: 15-components-props/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<autor :nombre="autor" :edad="99"></autor>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 15-components-props/js/main.js
================================================
Vue.component('autor', {
props: ['nombre', 'edad'],
mounted() {
// Las props son accesibles desde this (proxy)
//console.log(this.nombre);
console.log(typeof this.edad);
},
template: `<div><h1> {{ nombre }} </h1><button @click="cambiarProp">Cambiar Prop</button></div>`,
methods: {
cambiarProp() {
this.nombre = this.nombre.toUpperCase();
}
}
});
new Vue({
el: 'main',
data: {
autor: 'Juan Andrés',
},
});
================================================
FILE: 16-prop-validation/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<candidato v-for="candidato in candidatos"
:nombre="candidato.name.first"
:correoe="candidato.email"
:imagen="candidato.picture.thumbnail"
>
</candidato>
<pre>{{ $data }}</pre>
</main>
<template id="candidato-template">
<blockquote>
<img :src="imagen" align="right">
<h1> {{ nombre }} </h1>
<h2> {{ correoe }}</h2>
<ul>
<li v-for="(value, key, index) in location">
{{ value }}
</li>
</ul>
<hr>
</blockquote>
</template>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 16-prop-validation/js/main.js
================================================
Vue.component('candidato', {
/*props: ['nombre', 'correoe', 'imagen'],*/
props: {
nombre: {
type: [String, Array], // null = *
required: true,
},
correoe: {
type: String,
default: 'juan@wmedia.es'
},
imagen: String,
location: {
type: Object,
default() {
return {
ciudad: 'Valencia',
}
}
},
},
template: '#candidato-template',
});
new Vue({
el: 'main',
mounted() {
this.obtenerCandidatos();
},
data: {
candidatos: [],
},
methods: {
obtenerCandidatos() {
axios.get('https://randomuser.me/api/?results=100')
.then((respuesta) => {
this.candidatos = respuesta.data.results;
});
}
}
});
================================================
FILE: 17-slots-named-slots/css/main.css
================================================
/* Bloques */
.alerta {
width: 300px;
border-radius: 15px;
background-color: lightgray;
border: 1px solid white;
box-shadow: 1px 1px 2px gray;
font-family: sans-serif;
position: absolute;
}
/* Elementos */
.alerta__header {
border-bottom: 1px solid white;
padding: 10px;
text-align: center;
font-weight: bold;
}
.alerta__contenido {
font-size: 14px;
padding: 20px;
}
.alerta__footer {
border-top: 1px solid white;
text-align: center;
padding: 10px;
font-size: 12px;
}
/* Modificadores */
/* Estilo */
.alerta--error {
background-color: indianred;
}
.alerta--advertencia {
background-color: lightgoldenrodyellow;
}
.alerta--exito {
background-color: lightgreen;
}
/* Posición */
.alerta--arriba-izquierda {
left: 0;
top: 0;
}
.alerta--abajo-izquierda {
left: 0;
bottom: 0;
}
.alerta--arriba-derecha {
right: 0;
top: 0;
}
.alerta--abajo-derecha {
right: 0;
bottom: 0;
}
================================================
FILE: 17-slots-named-slots/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<alerta tipo="alerta--exito" posicion="alerta--arriba-derecha">
<template slot="header">Todo ok :)</template>
<template>Este es el nuevo contenido del alerta :)</template>
<template slot="footer">Puedes continuar con normalidad</template>
</alerta>
<alerta tipo="alerta--error" posicion="alerta--arriba-izquierda">
<template slot="header">Error fatal</template>
<template>El mundo está a punto de implosionar</template>
<template slot="footer">RIP</template>
</alerta>
<alerta tipo="alerta--advertencia" posicion="alerta--abajo-izquierda">
<template slot="header">Atención</template>
<template>Este es el nuevo contenido del alerta :)</template>
<template slot="footer">Puedes continuar con normalidad</template>
</alerta>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 17-slots-named-slots/js/main.js
================================================
Vue.component('alerta', {
props: ['tipo', 'posicion'],
template: `
<section class="alerta" :class="[tipo, posicion]">
<header class="alerta__header">
<slot name="header">Hola</slot>
</header>
<div class="alerta__contenido">
<slot>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus
vitae.
</slot>
</div>
<footer class="alerta__footer">
<slot name="footer">Este es el texto del footer</slot>
</footer>
</section>`,
});
new Vue({
el: 'main',
});
================================================
FILE: 18-scoped-slots/css/main.css
================================================
/* Bloques */
.alerta {
width: 300px;
border-radius: 15px;
background-color: lightgray;
border: 1px solid white;
box-shadow: 1px 1px 2px gray;
font-family: sans-serif;
position: absolute;
}
/* Elementos */
.alerta__header {
border-bottom: 1px solid white;
padding: 10px;
text-align: center;
font-weight: bold;
}
.alerta__contenido {
font-size: 14px;
padding: 20px;
}
.alerta__footer {
border-top: 1px solid white;
text-align: center;
padding: 10px;
font-size: 12px;
}
/* Modificadores */
/* Estilo */
.alerta--error {
background-color: indianred;
}
.alerta--advertencia {
background-color: lightgoldenrodyellow;
}
.alerta--exito {
background-color: lightgreen;
}
/* Posición */
.alerta--arriba-izquierda {
left: 0;
top: 0;
}
.alerta--abajo-izquierda {
left: 0;
bottom: 0;
}
.alerta--arriba-derecha {
right: 0;
top: 0;
}
.alerta--abajo-derecha {
right: 0;
bottom: 0;
}
================================================
FILE: 18-scoped-slots/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<mis-tareas :listado="tareas">
<template slot="tarea" scope="datos">
<li> <h1>{{ datos.title }}</h1></li>
</template>
</mis-tareas>
<mis-tareas :listado="tareas">
<template slot="tarea" scope="datos">
<li>{{ datos.title }}</li>
</template>
</mis-tareas>
<mis-tareas :listado="tareas">
<template slot="tarea" scope="datos">
<li>🐱{{ datos.title }}</li>
</template>
</mis-tareas>
<pre>{{ $data }}</pre>
</main>
<!-- Template -->
<template id="mis-tareas-template">
<ul>
<slot name="tarea" v-for="tarea in listado" :title="tarea.titulo"></slot>
<!-- <li v-for="tarea in listado">
{{ tarea.titulo }}
</li>-->
</ul>
</template>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 18-scoped-slots/js/main.js
================================================
Vue.component('mis-tareas', {
props: ['listado'],
template: '#mis-tareas-template'
});
new Vue({
el: 'main',
data: {
tareas: [
{ titulo: 'Salir a correr'},
{ titulo: 'Recoger la casa'},
{ titulo: 'Aprender Vue.js'},
{ titulo: 'Ir al gimnasio'},
{ titulo: 'Leer cada día'},
]
}
});
================================================
FILE: 19-custom-events/css/main.css
================================================
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
button {
font-size: 16px;
}
/* Bloques */
.alerta {
width: 300px;
border-radius: 15px;
background-color: lightgray;
border: 1px solid white;
box-shadow: 1px 1px 2px gray;
font-family: sans-serif;
position: absolute;
}
/* Elementos */
.alerta__header {
border-bottom: 1px solid white;
padding: 10px;
text-align: center;
font-weight: bold;
}
.alerta__header a {
float: right;
font-size: 10px;
text-decoration: none;
color: black;
}
.alerta__contenido {
font-size: 14px;
padding: 20px;
}
.alerta__footer {
border-top: 1px solid white;
text-align: center;
padding: 10px;
font-size: 12px;
}
/* Modificadores */
/* Estilo */
.alerta--error {
background-color: indianred;
}
.alerta--advertencia {
background-color: lightgoldenrodyellow;
}
.alerta--exito {
background-color: lightgreen;
}
/* Posición */
.alerta--arriba-izquierda {
left: 0;
top: 0;
}
.alerta--abajo-izquierda {
left: 0;
bottom: 0;
}
.alerta--arriba-derecha {
right: 0;
top: 0;
}
.alerta--abajo-derecha {
right: 0;
bottom: 0;
}
================================================
FILE: 19-custom-events/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<button @click="mostrarExito = true">Exito</button>
<button @click="mostrarError = true">Error</button>
<button @click="mostrarAdvertencia = true">Advertencia</button>
<alerta @ocultar="mostrarExito = false" v-show="mostrarExito" tipo="alerta--exito" posicion="alerta--arriba-derecha">
<template slot="header">Todo ok :)</template>
<template>Este es el nuevo contenido del alerta :)</template>
<template slot="footer">Puedes continuar con normalidad</template>
</alerta>
<alerta @ocultar="mostrarError = false" v-show="mostrarError" tipo="alerta--error" posicion="alerta--arriba-izquierda">
<template slot="header">Error fatal</template>
<template>El mundo está a punto de implosionar</template>
<template slot="footer">RIP</template>
</alerta>
<alerta @ocultar="mostrarAdvertencia = false" v-show="mostrarAdvertencia" tipo="alerta--advertencia" posicion="alerta--abajo-izquierda">
<template slot="header">Atención</template>
<template>Este es el nuevo contenido del alerta :)</template>
<template slot="footer">Puedes continuar con normalidad</template>
</alerta>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 19-custom-events/js/main.js
================================================
Vue.component('alerta', {
props: ['tipo', 'posicion'],
template: `
<section class="alerta" :class="[tipo, posicion]">
<header class="alerta__header">
<a href="#" @click="ocultarWidget">Cerrar</a>
<slot name="header">Hola</slot>
</header>
<div class="alerta__contenido">
<slot>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus
vitae.
</slot>
</div>
<footer class="alerta__footer">
<slot name="footer">Este es el texto del footer</slot>
</footer>
</section>`,
methods: {
ocultarWidget() {
this.$emit('ocultar');
}
}
});
new Vue({
el: 'main',
data: {
mostrarExito: false,
mostrarError: false,
mostrarAdvertencia: false,
}
});
================================================
FILE: 2-directivas-incluidas/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<h1 v-if="conectado">Estoy conectado</h1>
<h2 v-if="edad < 18">No puedes entrar.</h2>
<h2 v-else-if="edad > 200">Eres inmortal.</h2>
<h2 v-else>Puedes entrar.</h2>
<template v-if="conectado">
<h3>Bienvenido Juan</h3>
<ul>
<li>
<a href="#">Mis datos</a>
<a href="#">Mensajes</a>
<a href="#">Salir</a>
</li>
</ul>
</template>
<h4 v-else>No estás conectado :(</h4>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 2-directivas-incluidas/js/main.js
================================================
const vm = new Vue({
el: 'main',
data: {
conectado: false,
edad: 44,
},
});
================================================
FILE: 20-component-communication/css/main.css
================================================
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
flex-wrap: wrap;
width: 700px;
justify-content: space-between;
align-items: center;
}
hr, pre {
flex-basis: 100%;
}
================================================
FILE: 20-component-communication/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<listado-productos :productos="productos"></listado-productos>
<carrito-compra></carrito-compra>
<hr>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 20-component-communication/js/main.js
================================================
const eventBus = new Vue();
Vue.component('listado-productos', {
props: ['productos'],
template: `
<section>
<ul>
<li v-for="producto in productos">
{{ producto.nombre }} -
<small>{{ producto.precio.toFixed(2) }} €</small>
<button @click="eliminarProducto(producto.precio)">-</button>
<button @click="anadirProducto(producto.precio)">+</button>
</li>
</ul>
</section>`,
methods: {
anadirProducto(precio){
eventBus.$emit('anadir', precio);
},
eliminarProducto(precio) {
eventBus.$emit('eliminar', precio);
},
}
});
Vue.component('carrito-compra', {
template: `
<section>
<h1> {{ total.toFixed(2) }} € </h1>
<h3> {{ cantidadProductos }} productos </h3>
</section>`,
data() {
return {
cantidadProductos: 0,
total: 0,
}
},
created() {
eventBus.$on('anadir', (precio) => {
if (this.total >= 0) {
this.total += precio;
this.cantidadProductos++;
}
});
eventBus.$on('eliminar', (precio) => {
if (this.total > 0) {
this.total -= precio;
this.cantidadProductos--;
}
});
}
});
new Vue({
el: 'main',
data: {
productos: [
{nombre: 'Libro ES6', precio: 39},
{nombre: 'Portátil', precio: 1300},
{nombre: 'Café', precio: 2},
{nombre: 'Auriculares', precio: 80},
{nombre: 'Moleskine', precio: 19},
]
}
});
================================================
FILE: 21-components-inside-components/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<lista-tareas :tareas="tareas">
Tareas que necesito finalizar ya!
</lista-tareas>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 21-components-inside-components/js/main.js
================================================
Vue.component('lista-tareas', {
props: ['tareas'],
template: `<div>
<h1><slot></slot></h1>
<ul>
<tarea v-for="tarea in tareas" :tarea="tarea"></tarea>
</ul>
</div>`,
});
Vue.component('tarea', {
props: ['tarea'],
template: `<li> {{ tarea }}</li>`
});
new Vue({
el: 'main',
data: {
tareas: [
'Finalizar sección Componentes',
'Iniciar workflow con Vue CLI y Webpack',
'Terminar de estudiar la documentación de Vuex',
'Seguir jugando con Vue Router y grabar el primer vídeo',
]
}
});
================================================
FILE: 22-dynamic-components/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<button @click="seleccionado = 'lista-tareas'">Tareas</button>
<button @click="seleccionado = 'contacto'">Contacto</button>
<button @click="seleccionado = 'bio'">BIO</button>
<component :is="seleccionado"></component>
<!-- <lista-tareas></lista-tareas>
<contacto></contacto>
<bio></bio>-->
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 22-dynamic-components/js/main.js
================================================
Vue.component('lista-tareas', {
template: `<div>
<h1><slot></slot></h1>
<ul>
<tarea v-for="tarea in tareas" :tarea="tarea"></tarea>
</ul>
<hr>
</div>`,
data() {
return {
tareas:[
'Finalizar sección Componentes',
'Iniciar workflow con Vue CLI y Webpack',
'Terminar de estudiar la documentación de Vuex',
'Seguir jugando con Vue Router y grabar el primer vídeo',
],
}
}
});
Vue.component('tarea', {
props: ['tarea'],
template: `<li> {{ tarea }}</li>`
});
Vue.component('contacto', {
template: `<div><a href="mailto:juan@wmedia.es">juan@wmedia.es</a> <hr></div>`,
});
Vue.component('bio', {
template: `<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia sit amet magna quis maximus. Vivamus eget consectetur tellus. Sed diam ante, dictum sit amet tincidunt ac, facilisis eget dui. </p><hr></div>`,
});
new Vue({
el: 'main',
data: {
seleccionado: 'lista-tareas'
}
});
================================================
FILE: 23-custom-input-components/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<!--<input type="text" v-model="contrasena">-->
<!--<input type="text" :value="contrasena" @input="contrasena = $event.target.value">-->
<contrasena v-model="contrasena"></contrasena>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 23-custom-input-components/js/main.js
================================================
Vue.component('contrasena', {
props: ['contrasena'],
template: `<input :value="contrasena" @input="comprobarContrasena($event.target.value)" ref="pass">`,
methods: {
comprobarContrasena(contrasena) {
if (this.noValidas.includes(contrasena)) {
this.$refs.pass.value = contrasena = '';
}
this.$emit('input', contrasena);
}
},
data() {
return {
noValidas: ['abc', 'admin', '123456', 'root'],
}
}
});
new Vue({
el: 'main',
data: {
contrasena: 'es3Es653!*&__',
},
});
================================================
FILE: 24-ejercicio-components/finalizado/css/main.css
================================================
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: flex-start;
}
.cabecera {
display: flex;
justify-content: space-around;
align-items: center;
}
.cabecera slot {
flex-basis: 40%;
}
.cabecera input {
flex-basis: 60%;
}
.usuarios {
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.usuario {
padding: 10px;
flex-basis: 33%;
border: 1px solid gray;
border-radius: 10px;
display: flex;
}
.usuario img {
flex-basis: 33%;
}
.usuario section {
flex-basis: 66%;
}
pre {
flex-basis: 100%;
}
================================================
FILE: 24-ejercicio-components/finalizado/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<usuarios>
<h1>Usuarios de la empresa</h1>
</usuarios>
</main>
<template id="usuarios-template">
<div>
<section class="cabecera">
<slot></slot>
<input type="search" placeholder="Filtrar usuario" v-model="busqueda">
</section>
<hr>
<section class="usuarios">
<usuario :datos="usuario" v-for="usuario in filtrarUsuarios"></usuario>
</section>
</div>
</template>
<template id="usuario-template">
<div class="usuario">
<img align="left" :src="datos.foto" :alt="datos.nombre">
<section>
<h1>{{ datos.nombre }}</h1>
<small>{{ datos.correoe}}</small>
</section>
</div>
</template>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 24-ejercicio-components/finalizado/js/main.js
================================================
Vue.component('usuarios', {
props: ['fuente'],
template: '#usuarios-template',
mounted() {
axios.get('https://randomuser.me/api/?results=500')
.then((datos) => {
const listado = datos.data.results.map((usuario) => {
return {
nombre: `${usuario.name.title} ${usuario.name.first} ${usuario.name.last}`,
correoe: usuario.email,
foto: usuario.picture.medium,
};
});
this.usuarios = listado;
});
},
data() {
return {
usuarios: [],
busqueda: '',
}
},
computed: {
filtrarUsuarios() {
return this.usuarios.filter((usuario) => {
return usuario.nombre.includes(this.busqueda)
});
}
}
});
Vue.component('usuario', {
props: ['datos'],
template: '#usuario-template',
});
new Vue({
el: 'main',
});
================================================
FILE: 24-ejercicio-components/inicio/css/main.css
================================================
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: flex-start;
}
.cabecera {
display: flex;
justify-content: space-around;
align-items: center;
}
.cabecera slot {
flex-basis: 40%;
}
.cabecera input {
flex-basis: 60%;
}
.usuarios {
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.usuario {
padding: 10px;
flex-basis: 33%;
border: 1px solid gray;
border-radius: 10px;
display: flex;
}
.usuario img {
flex-basis: 33%;
}
.usuario section {
flex-basis: 66%;
}
pre {
flex-basis: 100%;
}
================================================
FILE: 24-ejercicio-components/inicio/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<usuarios>
<h1>Usuarios de mi startup</h1>
</usuarios>
</main>
<template id="usuarios-template">
<div>
<section class="cabecera">
<slot></slot>
<input type="search" placeholder="Filtrar usuarios" v-model="busqueda">
</section>
<hr>
<section class="usuarios">
<usuario :datos="usuario" v-for="usuario in filtrarUsuarios"></usuario>
</section>
</div>
</template>
<template id="usuario-template">
<div class="usuario">
<img align="left" :src="datos.foto" :alt="datos.nombre">
<section>
<h1>{{ datos.nombre }}</h1>
<small>{{ datos.correoe }}</small>
</section>
</div>
</template>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 24-ejercicio-components/inicio/js/main.js
================================================
Vue.component('usuarios', {
template: '#usuarios-template',
mounted() {
axios.get('https://randomuser.me/api/?results=500')
.then((datos) => {
const listado = datos.data.results.map((usuario) => {
return {
nombre: `${usuario.name.title} ${usuario.name.first} ${usuario.name.last}`,
correoe: usuario.email,
foto: usuario.picture.medium,
}
});
this.usuarios = listado;
});
},
data() {
return {
usuarios: [],
busqueda: '',
}
},
computed: {
filtrarUsuarios() {
return this.usuarios.filter((usuario) => {
return usuario.nombre.includes(this.busqueda);
});
}
}
});
Vue.component('usuario', {
props: ['datos'],
template: '#usuario-template',
});
new Vue({
el: 'main',
});
================================================
FILE: 25-vue-cli/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 25-vue-cli/README.md
================================================
# 25-vue-cli
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 25-vue-cli/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>25-vue-cli</title>
</head>
<body>
<div id="app">
</div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 25-vue-cli/package.json
================================================
{
"name": "25-vue-cli",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 25-vue-cli/src/App.vue
================================================
<template>
<div id="app">
<img src="./assets/logo.png">
<h1 v-text="mensaje"></h1>
<h2>Enlaces esenciales</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
mensaje: 'Hola desde el Curso de Vue & Firebase'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
================================================
FILE: 25-vue-cli/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 25-vue-cli/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 26-single-file-components/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 26-single-file-components/README.md
================================================
# 26-single-file-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 26-single-file-components/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>26-single-file-components</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 26-single-file-components/package.json
================================================
{
"name": "26-single-file-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.15.3",
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 26-single-file-components/src/App.vue
================================================
<template>
<div>
<persona></persona>
<persona></persona>
<persona></persona>
<persona></persona>
<persona></persona>
<persona></persona>
<persona></persona>
</div>
</template>
<script>
import persona from './components/Persona.vue';
export default {
components: { persona },
data () {
return {}
}
}
</script>
<style>
</style>
================================================
FILE: 26-single-file-components/src/components/Persona.vue
================================================
<template>
<div>
<template v-if="persona">
<h1 v-text="datosPersona.nombre"></h1>
<h2 v-text="datosPersona.correoe"></h2>
<img :src="datosPersona.foto">
</template>
<span v-else>Cargando persona...</span>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
axios.get('https://randomuser.me/api/')
.then((respuesta) => {
this.persona = respuesta.data.results[0];
})
},
data() {
return {
persona: null,
}
},
computed: {
datosPersona() {
return {
nombre: `${this.persona.name.first} ${this.persona.name.last}`,
foto: this.persona.picture.large,
correoe: this.persona.email,
}
}
}
}
</script>
<style></style>
================================================
FILE: 26-single-file-components/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 26-single-file-components/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 27-render-function/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 27-render-function/README.md
================================================
# 27-render-function
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 27-render-function/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>27-render-function</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 27-render-function/package.json
================================================
{
"name": "27-render-function",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 27-render-function/src/App.vue
================================================
<template>
<div>
<elemento tipo="footer">Hola footer</elemento>
<elemento tipo="header">Hola header</elemento>
<elemento tipo="aside">Hola aside</elemento>
<elemento tipo="nav">Hola nav</elemento>
<elemento tipo="main">Hola main</elemento>
</div>
</template>
<script>
import elemento from './components/Elemento.vue';
export default {
components: { elemento }
}
</script>
<style>
</style>
================================================
FILE: 27-render-function/src/components/Elemento.vue
================================================
<!--<template>
<div>
<article v-if="tipo === 'article'">
<slot></slot>
</article>
<section v-if="tipo === 'section'">
<slot></slot>
</section>
<aside v-if="tipo === 'aside'">
<slot></slot>
</aside>
<nav v-if="tipo === 'nav'">
<slot></slot>
</nav>
<header v-if="tipo === 'header'">
<slot></slot>
</header>
<footer v-if="tipo === 'footer'">
<slot></slot>
</footer>
</div>
</template>-->
<script>
export default {
props: ['tipo'],
render(createElement) {
return createElement(
this.tipo,
this.$slots.default,
)
}
}
</script>
<style>
</style>c
================================================
FILE: 27-render-function/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 27-render-function/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 28-hot-reloading/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 28-hot-reloading/README.md
================================================
# 28-hot-reloading
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 28-hot-reloading/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>28-hot-reloading</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 28-hot-reloading/package.json
================================================
{
"name": "28-hot-reloading",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 28-hot-reloading/src/App.vue
================================================
<template>
<tareas></tareas>
</template>
<script>
import Tareas from './components/Tareas.vue';
export default {
components: {Tareas},
}
</script>
================================================
FILE: 28-hot-reloading/src/components/Tareas.vue
================================================
<template>
<div>
<h2>Las Tareas por hacer</h2>
<ul>
<li v-for="tarea in tareasPendientes">
<a href="#" @click="actualizarTarea(tarea)" v-text="tarea.nombre"></a>
</li>
</ul>
<h2>Tareas finalizadas</h2>
<li v-for="tarea in tareasFinalizadas">
<a href="#" @click="actualizarTarea(tarea)" v-text="tarea.nombre"></a>
</li>
</div>
</template>
<script>
export default {
data(){
return {
tareas: [
{nombre: 'Aprender Vue.js', completado: false},
{nombre: 'Grabar el módulo de Vuex', completado: false},
{nombre: 'Responder comentarios (de una vez)', completado: false},
{nombre: 'Salir a correr para despejarme', completado: false},
{nombre: 'Diseñar el módulo de Firebase', completado: false},
{nombre: 'Diseñar el ejercicio final', completado: false},
{nombre: 'Tomarme unas vacaciones', completado: false},
],
finalizadas: []
}
},
methods: {
actualizarTarea(tarea) {
tarea.completado = !tarea.completado;
}
},
computed: {
tareasPendientes() {
return this.tareas.filter((tarea) => !tarea.completado);
},
tareasFinalizadas() {
return this.tareas.filter((tarea) => tarea.completado);
}
}
}
</script>
<style>
li a {
color: darkgoldenrod;
font-weight: bold;
text-decoration: none;
}
</style>
================================================
FILE: 28-hot-reloading/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 28-hot-reloading/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 29-scoped-css/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 29-scoped-css/README.md
================================================
# 29-scoped-css
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 29-scoped-css/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>29-scoped-css</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 29-scoped-css/package.json
================================================
{
"name": "29-scoped-css",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 29-scoped-css/src/App.vue
================================================
<template>
<div>
<h1>Menú principal</h1>
<input type="range">
<ul>
<li><a href="">Enlace 1</a></li>
<li><a href="">Enlace 2</a></li>
<li><a href="">Enlace 3</a></li>
<li><a href="">Enlace 4</a></li>
<li><a href="">Enlace 5</a></li>
<li><a href="">Enlace 6</a></li>
</ul>
<tareas></tareas>
</div>
</template>
<script>
import Tareas from './components/Tareas.vue';
export default {
components: {Tareas}
}
</script>
================================================
FILE: 29-scoped-css/src/components/Tareas.vue
================================================
<template>
<div>
<h2>Las Tareas por hacer</h2>
<ul>
<li v-for="tarea in tareasPendientes">
<a href="#" @click="actualizarTarea(tarea)" v-text="tarea.nombre"></a>
</li>
</ul>
<h2>Tareas finalizadas</h2>
<li v-for="tarea in tareasFinalizadas">
<a href="#" @click="actualizarTarea(tarea)" v-text="tarea.nombre"></a>
</li>
</div>
</template>
<script>
export default {
data(){
return {
tareas: [
{nombre: 'Aprender Vue.js', completado: false},
{nombre: 'Grabar el módulo de Vuex', completado: false},
{nombre: 'Responder comentarios (de una vez)', completado: false},
{nombre: 'Salir a correr para despejarme', completado: false},
{nombre: 'Diseñar el módulo de Firebase', completado: false},
{nombre: 'Diseñar el ejercicio final', completado: false},
{nombre: 'Tomarme unas vacaciones', completado: false},
],
finalizadas: []
}
},
methods: {
actualizarTarea(tarea) {
tarea.completado = !tarea.completado;
}
},
computed: {
tareasPendientes() {
return this.tareas.filter((tarea) => !tarea.completado);
},
tareasFinalizadas() {
return this.tareas.filter((tarea) => tarea.completado);
}
}
}
</script>
<style scoped>
li a {
color: red;
}
</style>
================================================
FILE: 29-scoped-css/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 29-scoped-css/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 3-renderizado-de-listas/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<!-- Matriz -->
<!--<ul>
<li v-for="dia in laborales">{{ dia }}</li>
</ul>-->
<!-- Matriz de objetos (collection) -->
<!--<ul>
<li v-for="(tarea, index) in tareas">
{{ index}} - {{ tarea.nombre }}
<small>({{ tarea.prioridad}})</small>
</li>
</ul>-->
<!-- Objeto -->
<ul>
<li v-for="(value, key, index) in persona">
{{ index }} - {{ key }}: {{value}}
</li>
</ul>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 3-renderizado-de-listas/js/main.js
================================================
const vm = new Vue({
el: 'main',
data: {
laborales: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'],
tareas: [
{nombre: 'Hacer la compra', prioridad: 'baja'},
{nombre: 'Aprender Vue y Firebase', prioridad: 'alta'},
{nombre: 'Ir al gimnasio', prioridad: 'alta'},
],
persona: {
nombre: 'Juan',
profesion: 'dev',
ciudad: 'Valencia'
}
},
});
================================================
FILE: 30-css-modules/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 30-css-modules/README.md
================================================
# 30-css-modules
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 30-css-modules/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>30-css-modules</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 30-css-modules/package.json
================================================
{
"name": "30-css-modules",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 30-css-modules/src/App.vue
================================================
<template>
<!--<h1 :class="[$style.rojo]">Hola CSS Modules</h1>-->
<h1 :class="{[$style.subrayado] : subrayado}">Hola CSS Modules</h1>
</template>
<script>
export default {
data() {
return {
subrayado: false
}
}
}
</script>
<style module>
.subrayado {
text-decoration: underline;
}
.rojo {
color: red;
}
</style>
================================================
FILE: 30-css-modules/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: 30-css-modules/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 31-shared-state/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app1"><h1>{{ usuario.nombre }}</h1></div>
<div id="app2"><h1>{{ usuario.nombre }}</h1></div>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 31-shared-state/js/main.js
================================================
const compartido = {
usuario: {
nombre: 'Juan Andrés',
}
};
new Vue({
el: '#app1',
data: compartido,
});
new Vue({
el: '#app2',
data: compartido,
});
================================================
FILE: 32-vuex-central-store/.babelrc
================================================
{
"presets": [
["es2015", { "modules": false }]
]
}
================================================
FILE: 32-vuex-central-store/README.md
================================================
# 32-vuex-central-store
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 32-vuex-central-store/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>32-vuex-central-store</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 32-vuex-central-store/package.json
================================================
{
"name": "32-vuex-central-store",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.1.0",
"vuex": "^2.1.2"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 32-vuex-central-store/src/App.vue
================================================
<template>
<!-- <contador :cantidad="cantidad"
@aumentar="cantidad++"
@reducir="cantidad--">
</contador>-->
<contador></contador>
</template>
<script>
import Contador from './components/Contador.vue';
export default {
components: {Contador},
}
</script>
================================================
FILE: 32-vuex-central-store/src/components/Contador.vue
================================================
<template>
<div>
<h1>Contador: {{ cantidad }}</h1>
<button @click="aumentar">Aumentar</button>
<button @click="reducir">Reducir</button>
</div>
</template>
<script>
export default {
//props: ['cantidad'],
methods: {
aumentar() {
//this.$emit('aumentar');
this.$store.state.cantidad++;
},
reducir() {
//this.$emit('reducir');
this.$store.state.cantidad--;
}
},
computed: {
cantidad() {
return this.$store.state.cantidad;
}
}
}
</script>
================================================
FILE: 32-vuex-central-store/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
================================================
FILE: 32-vuex-central-store/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
cantidad: 0,
}
});
================================================
FILE: 32-vuex-central-store/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 33-vuex-state/.babelrc
================================================
{
"presets": [
["latest", { "modules": false }]
]
}
================================================
FILE: 33-vuex-state/README.md
================================================
# 33-vuex-state
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 33-vuex-state/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>33-vuex-state</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 33-vuex-state/package.json
================================================
{
"name": "33-vuex-state",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vuex": "^2.1.2"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 33-vuex-state/src/App.vue
================================================
<template>
<h1>Hola me llamo {{ nombre }} {{ apellidos}} y me dedico a {{profesion}}</h1>
</template>
<script>
import {mapState} from 'vuex';
export default {
/* computed: {
nombre() {
return this.$store.state.nombre;
}
}*/
/* computed: mapState({
nombre: (state) => state.nombre,
apellidos: (state) => state.apellidos,
})*/
computed: mapState(['nombre', 'apellidos', 'profesion']),
}
</script>
================================================
FILE: 33-vuex-state/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
================================================
FILE: 33-vuex-state/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
nombre: 'Juan Andrés',
apellidos: 'Núñez Charro',
profesion: 'Developer',
ciudad: 'Valencia'
}
});
================================================
FILE: 33-vuex-state/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 34-vuex-getters/.babelrc
================================================
{
"presets": [
["latest", { "modules": false }]
]
}
================================================
FILE: 34-vuex-getters/README.md
================================================
# 34-vuex-getters
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 34-vuex-getters/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>34-vuex-getters</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 34-vuex-getters/package.json
================================================
{
"name": "34-vuex-getters",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 34-vuex-getters/src/Tareas.vue
================================================
<template>
<main>
<tareas-restantes></tareas-restantes>
<ul>
<li v-for="tarea in tareas">{{ tarea.nombre }}</li>
</ul>
</main>
</template>
<script>
import TareasRestantes from './components/TareasRestantes.vue';
import {mapState} from 'vuex';
export default {
/* computed: {
tareas() {
return this.$store.state.tareas;
}
}*/
components: {TareasRestantes},
computed: mapState(['tareas'])
}
</script>
================================================
FILE: 34-vuex-getters/src/components/TareasRestantes.vue
================================================
<template>
<h1>{{tareasCompletadas}} tareas completadas.</h1>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
/* computed: {
tareasCompletadas() {
/!* return this.$store.state.tareas.filter((tarea) => {
return tarea.completado;
}).length;*!/
return this.$store.getters.tareasCompletadas;
}
}*/
computed: mapGetters(['tareasCompletadas'])
}
</script>
================================================
FILE: 34-vuex-getters/src/main.js
================================================
import Vue from 'vue';
import Tareas from './Tareas.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store,
render: h => h(Tareas)
})
================================================
FILE: 34-vuex-getters/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
tareas: [
{nombre: 'Aprender Vue Routing', completado: false},
{nombre: 'Organizar lecciones restantes', completado: false},
{nombre: 'Grabar lecciones mini curso ES6', completado: false},
{nombre: 'Preparar landing page curso', completado: false},
{nombre: 'Diseñar acciones de marketing', completado: true},
]
},
getters: {
tareasCompletadas: (state) => {
return state.tareas.filter((tarea) => tarea.completado).length;
}
}
});
================================================
FILE: 34-vuex-getters/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 35-vuex-mutations/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 35-vuex-mutations/README.md
================================================
# 35-vuex-mutations
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 35-vuex-mutations/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>35-vuex-mutations</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 35-vuex-mutations/package.json
================================================
{
"name": "35-vuex-mutations",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 35-vuex-mutations/src/App.vue
================================================
<template>
<contador></contador>
</template>
<script>
import contador from './components/Contador.vue';
export default {
components: {
contador,
}
}
</script>
================================================
FILE: 35-vuex-mutations/src/components/Contador.vue
================================================
<template>
<section>
<h1>Cantidad: {{ cantidad }}</h1>
<button @click="aumentar">Aumentar</button>
<button @click="reducir">Reducir</button>
</section>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
export default {
computed: mapState(['cantidad']),
methods: mapMutations(['aumentar', 'reducir']),
/* methods: {
aumentar() {
//this.$store.state.cantidad++;
this.$store.commit('aumentar');
},
reducir() {
//this.$store.state.cantidad--;
this.$store.commit('reducir');
}
}*/
}
</script>
================================================
FILE: 35-vuex-mutations/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
================================================
FILE: 35-vuex-mutations/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
cantidad: 0,
},
mutations: {
aumentar: (state) => state.cantidad++,
reducir: (state) => state.cantidad--,
}
});
================================================
FILE: 35-vuex-mutations/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 36-vuex-actions/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 36-vuex-actions/README.md
================================================
# 35-vuex-mutations
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 36-vuex-actions/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>36-vuex-actions</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 36-vuex-actions/package.json
================================================
{
"name": "35-vuex-mutations",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 36-vuex-actions/src/App.vue
================================================
<template>
<contador></contador>
</template>
<script>
import contador from './components/Contador.vue';
export default {
components: {
contador,
}
}
</script>
================================================
FILE: 36-vuex-actions/src/components/Contador.vue
================================================
<template>
<section>
<h1>Cantidad: {{ cantidad }}</h1>
<button @click="aumentarAsync(12)">Aumentar</button>
<button @click="reducirAsync({cantidad: 15})">Reducir</button>
</section>
</template>
<script>
import {mapState, mapActions} from 'vuex';
export default {
computed: mapState(['cantidad']),
methods: mapActions(['aumentarAsync', 'reducirAsync'])
/* methods: {
aumentar() {
//this.$store.state.cantidad++;
//this.$store.commit('aumentar');
this.$store.dispatch('aumentarAsync');
},
reducir() {
//this.$store.state.cantidad--;
//this.$store.commit('reducir');
this.$store.dispatch('reducirAsync');
}
}*/
}
</script>
================================================
FILE: 36-vuex-actions/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
================================================
FILE: 36-vuex-actions/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
cantidad: 0,
},
mutations: {
aumentar: (state, cantidad) => state.cantidad += cantidad,
reducir: (state, cantidad) => state.cantidad -=cantidad,
},
actions: {
aumentarAsync: (context, cantidad) => {
setTimeout(() => context.commit('aumentar', cantidad), 2000);
},
reducirAsync: ({commit}, {cantidad}) => {
setTimeout(() => commit('reducir', cantidad), 2000);
}
}
});
================================================
FILE: 36-vuex-actions/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 37-vuex-modules/.babelrc
================================================
// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/
{
"presets": [
"stage-2",
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 37-vuex-modules/README.md
================================================
# 37-vuex-modules
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 37-vuex-modules/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>37-vuex-modules</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 37-vuex-modules/package.json
================================================
{
"name": "37-vuex-modules",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-preset-stage-2": "^6.22.0",
"vue": "^2.2.1",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 37-vuex-modules/src/App.vue
================================================
<template>
<section>
<productos></productos>
<carro></carro>
</section>
</template>
<script>
import Productos from './components/Productos.vue';
import Carro from './components/Carro.vue';
export default {
components: {Productos, Carro}
}
</script>
================================================
FILE: 37-vuex-modules/src/components/Carro.vue
================================================
<template>
<section>
<h2>Carro de la compra</h2>
<h3>Total compra: {{ totalCompra.toFixed(2) }} € </h3>
<ul>
<li v-for="(producto, indice) in carro">
{{ producto.nombre }}
<button @click="eliminarProducto(indice)">X</button>
</li>
</ul>
</section>
</template>
<script>
import {mapState, mapGetters, mapMutations} from 'vuex';
export default {
computed: {
...mapState(['carro']),
...mapGetters(['totalCompra']),
},
methods: mapMutations(['eliminarProducto'])
}
</script>
================================================
FILE: 37-vuex-modules/src/components/Productos.vue
================================================
<template>
<section>
<h1>Añadir un producto</h1>
<form @submit.prevent="anadir">
<input type="text" placeholder="Nombre" v-model="nombre" required>
<input type="number" placeholder="Precio" v-model="precio" required>
<input type="submit" value="Añadir">
</form>
<hr>
<ul>
<li v-for="(producto, indice) in productos">
{{ producto.nombre }} - {{ producto.precio.toFixed(2) + ' €' }}
<button @click="comprarProducto(indice)">+</button>
</li>
</ul>
</section>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
export default {
data() {
return {
nombre: '',
precio: 0
}
},
computed: mapState(['productos']),
methods: {
...mapMutations(['comprarProducto']),
anadir() {
this.$store.commit('anadirProducto', {
nombre: this.nombre,
precio: Number(this.precio),
});
this.nombre = '';
this.precio = 0;
}
}
}
</script>
================================================
FILE: 37-vuex-modules/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
================================================
FILE: 37-vuex-modules/src/store/modules/productos.js
================================================
const productos = [
{nombre: 'Steam Link', precio: 50},
{nombre: 'Steam Controller', precio: 59},
{nombre: 'Axiom Verge', precio: 17},
];
const mutations = {
anadirProducto: (state, producto) => state.productos.unshift(producto),
};
export default {
state: productos,
mutations,
};
================================================
FILE: 37-vuex-modules/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
import productos from './modules/productos';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
/* productos: [
{nombre: 'Steam Link', precio: 50},
{nombre: 'Steam Controller', precio: 59},
{nombre: 'Axiom Verge', precio: 17},
],*/
carro: [],
},
getters: {
totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0),
},
mutations: {
/*anadirProducto: (state, producto) => state.productos.unshift(producto),*/
comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]),
eliminarProducto: (state, indice) => state.carro.splice(indice, 1),
},
modules: {
productos
}
});
================================================
FILE: 37-vuex-modules/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 38-vuex-structure/.babelrc
================================================
// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/
{
"presets": [
"stage-2",
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 38-vuex-structure/README.md
================================================
# 37-vuex-modules
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 38-vuex-structure/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>38-vuex-structure</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 38-vuex-structure/package.json
================================================
{
"name": "37-vuex-modules",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-preset-stage-2": "^6.22.0",
"vue": "^2.2.1",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 38-vuex-structure/src/App.vue
================================================
<template>
<section>
<productos></productos>
<carro></carro>
</section>
</template>
<script>
import Productos from './components/Productos.vue';
import Carro from './components/Carro.vue';
export default {
components: {Productos, Carro}
}
</script>
================================================
FILE: 38-vuex-structure/src/components/Carro.vue
================================================
<template>
<section>
<h2>Carro de la compra</h2>
<h3>Total compra: {{ totalCompra.toFixed(2) }} € </h3>
<ul>
<li v-for="(producto, indice) in carro">
{{ producto.nombre }}
<button @click="eliminarProducto(indice)">X</button>
</li>
</ul>
</section>
</template>
<script>
import {mapState, mapGetters, mapMutations} from 'vuex';
export default {
computed: {
...mapState(['carro']),
...mapGetters(['totalCompra']),
},
methods: mapMutations(['eliminarProducto'])
}
</script>
================================================
FILE: 38-vuex-structure/src/components/Productos.vue
================================================
<template>
<section>
<h1>Añadir un producto</h1>
<form @submit.prevent="anadir">
<input type="text" placeholder="Nombre" v-model="nombre" required>
<input type="number" placeholder="Precio" v-model="precio" required>
<input type="submit" value="Añadir">
</form>
<hr>
<ul>
<li v-for="(producto, indice) in productos">
{{ producto.nombre }} - {{ producto.precio.toFixed(2) + ' €' }}
<button @click="comprarProducto(indice)">+</button>
</li>
</ul>
</section>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
export default {
data() {
return {
nombre: '',
precio: 0
}
},
computed: mapState(['productos']),
methods: {
...mapMutations(['comprarProducto']),
anadir() {
this.$store.commit('anadirProducto', {
nombre: this.nombre,
precio: Number(this.precio),
});
this.nombre = '';
this.precio = 0;
}
}
}
</script>
================================================
FILE: 38-vuex-structure/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import {store} from './store/store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
================================================
FILE: 38-vuex-structure/src/store/getters.js
================================================
export const getters = {
totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0),
};
================================================
FILE: 38-vuex-structure/src/store/modules/productos.js
================================================
const productos = [
{nombre: 'Steam Link', precio: 50},
{nombre: 'Steam Controller', precio: 59},
{nombre: 'Axiom Verge', precio: 17},
];
const mutations = {
anadirProducto: (state, producto) => state.productos.unshift(producto),
};
export default {
state: productos,
mutations,
};
================================================
FILE: 38-vuex-structure/src/store/mutations.js
================================================
export const mutations = {
comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]),
eliminarProducto: (state, indice) => state.carro.splice(indice, 1),
};
================================================
FILE: 38-vuex-structure/src/store/store.js
================================================
import Vue from 'vue';
import Vuex from 'vuex';
import productos from './modules/productos';
import {getters} from './getters';
import {mutations} from './mutations';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
carro: [],
},
getters: getters,
mutations:mutations,
modules: {
productos
}
});
================================================
FILE: 38-vuex-structure/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 4-vue-devtools/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<h1>{{ mensaje }}</h1>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 4-vue-devtools/js/main.js
================================================
new Vue({
el: 'main',
data: {
mensaje: 'Aprendiendo Vue.js :)'
}
});
================================================
FILE: 40-vue-router-intro/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Router</title>
</head>
<body>
<main>
<h1>Aprendiendo Vue-Router</h1>
<router-link to="/">Portada</router-link>
<router-link to="/contacto">Contacto</router-link>
<hr>
<router-view></router-view>
</main>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 40-vue-router-intro/js/main.js
================================================
// ¿Quién 'vive' en cada ruta?
const home = Vue.component('Home', {
template: '<h2>Portada</h2>',
});
const contacto = Vue.component('Contacto', {
template: '<h2>Contacto</h2>',
});
// Plano de destinos con sus rutas
const routes = [
{path: '/', component: home},
{path: '/contacto', component: contacto},
];
// Instaciar el componente enrutador
const router = new VueRouter({
routes: routes,
});
new Vue({
router: router,
el: 'main',
});
================================================
FILE: 41-vue-router-components/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 41-vue-router-components/README.md
================================================
# 41-vue-router-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 41-vue-router-components/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>41-vue-router-components</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 41-vue-router-components/package.json
================================================
{
"name": "41-vue-router-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 41-vue-router-components/src/App.vue
================================================
<template>
<section>
<h1>Rutas con Vue Router</h1>
<router-link to="/">Home</router-link>
<router-link to="/contacto">Contacto</router-link>
<hr>
<router-view></router-view>
</section>
</template>
<script>
export default {
}
</script>
================================================
FILE: 41-vue-router-components/src/components/Contacto.vue
================================================
<template>
<h2>Contacto</h2>
</template>
================================================
FILE: 41-vue-router-components/src/components/Home.vue
================================================
<template>
<h2>Home</h2>
</template>
================================================
FILE: 41-vue-router-components/src/main.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 41-vue-router-components/src/routes.js
================================================
import Home from './components/Home.vue';
import Contacto from './components/Contacto.vue';
export const routes = [
{path: '/', component: Home},
{path: '/contacto', component: Contacto},
];
================================================
FILE: 41-vue-router-components/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 42-vue-router-active-links/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 42-vue-router-active-links/README.md
================================================
# 41-vue-router-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 42-vue-router-active-links/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>42-vue-router-active-links</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 42-vue-router-active-links/package.json
================================================
{
"name": "41-vue-router-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 42-vue-router-active-links/src/App.vue
================================================
<template>
<section>
<h1>Rutas con Vue Router</h1>
<router-link to="/" active-class="activo" tag="li" exact>
<a>Home</a>
</router-link>
<router-link to="/contacto" active-class="activo" tag="li" >
<a>Contacto</a>
</router-link>
<hr>
<router-view></router-view>
</section>
</template>
<script>
export default {
}
</script>
<style>
.activo a {
color: red;
}
</style>
================================================
FILE: 42-vue-router-active-links/src/components/Contacto.vue
================================================
<template>
<h2>Contacto</h2>
</template>
================================================
FILE: 42-vue-router-active-links/src/components/Home.vue
================================================
<template>
<h2>Home</h2>
</template>
================================================
FILE: 42-vue-router-active-links/src/main.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 42-vue-router-active-links/src/routes.js
================================================
import Home from './components/Home.vue';
import Contacto from './components/Contacto.vue';
export const routes = [
{path: '/', component: Home},
{path: '/contacto', component: Contacto},
];
================================================
FILE: 42-vue-router-active-links/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 43-vue-programmatic-nav/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 43-vue-programmatic-nav/README.md
================================================
# 41-vue-router-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 43-vue-programmatic-nav/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>43-vue-router-prog-nav</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 43-vue-programmatic-nav/package.json
================================================
{
"name": "41-vue-router-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 43-vue-programmatic-nav/src/App.vue
================================================
<template>
<section>
<h1>Rutas con Vue Router</h1>
<router-link to="/" active-class="activo" tag="li" exact>
<a>Home</a>
</router-link>
<router-link to="/contacto" active-class="activo" tag="li" >
<a>Contacto</a>
</router-link>
<hr>
<router-view></router-view>
</section>
</template>
<script>
export default {
}
</script>
<style>
.activo a {
color: red;
}
</style>
================================================
FILE: 43-vue-programmatic-nav/src/components/Contacto.vue
================================================
<template>
<section>
<h2>Contacto</h2>
<button @click="volverHome()">Volver a home</button>
</section>
</template>
<script>
export default {
created() {
setTimeout(() => this.$router.push('/'), 2000);
},
methods: {
volverHome() {
this.$router.push('/', ()=> console.log('Ruta cambiada')); // Home
}
}
}
</script>
================================================
FILE: 43-vue-programmatic-nav/src/components/Home.vue
================================================
<template>
<h2>Home</h2>
</template>
================================================
FILE: 43-vue-programmatic-nav/src/main.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 43-vue-programmatic-nav/src/routes.js
================================================
import Home from './components/Home.vue';
import Contacto from './components/Contacto.vue';
export const routes = [
{path: '/', component: Home},
{path: '/contacto', component: Contacto},
];
================================================
FILE: 43-vue-programmatic-nav/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 44-vue-router-dynamic-routes/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 44-vue-router-dynamic-routes/README.md
================================================
# 41-vue-router-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 44-vue-router-dynamic-routes/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>44-vue-router-dynamic-routes</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 44-vue-router-dynamic-routes/package.json
================================================
{
"name": "41-vue-router-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 44-vue-router-dynamic-routes/src/App.vue
================================================
<template>
<section>
<h1>Rutas con Vue Router</h1>
<router-link to="/" active-class="activo" tag="li" exact>
<a>Home</a>
</router-link>
<router-link to="/contacto" active-class="activo" tag="li" >
<a>Contacto</a>
</router-link>
<router-link to="/usuario/77" active-class="activo" tag="li" >
<a>Usuario</a>
</router-link>
<hr>
<router-view></router-view>
</section>
</template>
<script>
export default {
}
</script>
<style>
.activo a {
color: red;
}
</style>
================================================
FILE: 44-vue-router-dynamic-routes/src/components/Contacto.vue
================================================
<template>
<section>
<h2>Contacto</h2>
<button @click="volverHome()">Volver a home</button>
</section>
</template>
<script>
export default {
created() {
setTimeout(() => this.$router.push('/'), 2000);
},
methods: {
volverHome() {
this.$router.push('/', ()=> console.log('Ruta cambiada')); // Home
}
}
}
</script>
================================================
FILE: 44-vue-router-dynamic-routes/src/components/Home.vue
================================================
<template>
<h2>Home</h2>
</template>
================================================
FILE: 44-vue-router-dynamic-routes/src/components/Usuario.vue
================================================
<template>
<h2>{{ id }}</h2>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
}
}
}
</script>
================================================
FILE: 44-vue-router-dynamic-routes/src/main.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 44-vue-router-dynamic-routes/src/routes.js
================================================
import Home from './components/Home.vue';
import Contacto from './components/Contacto.vue';
import Usuario from './components/Usuario.vue';
export const routes = [
{path: '/', component: Home},
{path: '/contacto', component: Contacto},
{path: '/usuario/:id', component: Usuario},
];
================================================
FILE: 44-vue-router-dynamic-routes/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 45-vue-router-reacting/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 45-vue-router-reacting/README.md
================================================
# 41-vue-router-components
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 45-vue-router-reacting/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>45-vue-router-reacting</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 45-vue-router-reacting/package.json
================================================
{
"name": "41-vue-router-components",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 45-vue-router-reacting/src/App.vue
================================================
<template>
<section>
<h1>Rutas con Vue Router</h1>
<router-link to="/" active-class="activo" tag="li" exact>
<a>Home</a>
</router-link>
<router-link to="/contacto" active-class="activo" tag="li" >
<a>Contacto</a>
</router-link>
<router-link to="/usuario/77" active-class="activo" tag="li" >
<a>Usuario</a>
</router-link>
<router-link to="/usuario/99" active-class="activo" tag="li" >
<a>Usuario</a>
</router-link>
<hr>
<router-view></router-view>
</section>
</template>
<script>
export default {
}
</script>
<style>
.activo a {
color: red;
}
</style>
================================================
FILE: 45-vue-router-reacting/src/components/Contacto.vue
================================================
<template>
<section>
<h2>Contacto</h2>
<button @click="volverHome()">Volver a home</button>
</section>
</template>
<script>
export default {
created() {
setTimeout(() => this.$router.push('/'), 2000);
},
methods: {
volverHome() {
this.$router.push('/', ()=> console.log('Ruta cambiada')); // Home
}
}
}
</script>
================================================
FILE: 45-vue-router-reacting/src/components/Home.vue
================================================
<template>
<h2>Home</h2>
</template>
================================================
FILE: 45-vue-router-reacting/src/components/Usuario.vue
================================================
<template>
<h2>{{ id }}</h2>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
}
},
watch: {
'$route'(to) {
this.id = to.params.id;
}
}
}
</script>
================================================
FILE: 45-vue-router-reacting/src/main.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 45-vue-router-reacting/src/routes.js
================================================
import Home from './components/Home.vue';
import Contacto from './components/Contacto.vue';
import Usuario from './components/Usuario.vue';
export const routes = [
{path: '/', component: Home},
{path: '/contacto', component: Contacto},
{path: '/usuario/:id', component: Usuario},
];
================================================
FILE: 45-vue-router-reacting/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 46-vue-router-nested-routes/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 46-vue-router-nested-routes/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 46-vue-router-nested-routes/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>46-vue-router-nested-routes</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 46-vue-router-nested-routes/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 46-vue-router-nested-routes/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 46-vue-router-nested-routes/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
</main>
</template>
================================================
FILE: 46-vue-router-nested-routes/src/components/EquipoJuan.vue
================================================
<template>
<section>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
</section>
</template>
================================================
FILE: 46-vue-router-nested-routes/src/components/Home.vue
================================================
<template>
<h1>Home</h1>
</template>
================================================
FILE: 46-vue-router-nested-routes/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 46-vue-router-nested-routes/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import EquipoJuan from './components/EquipoJuan.vue';
export const routes = [
{path: '/', component: Home},
{path: '/equipo', component: Equipo, children: [
{path: 'juan', component: EquipoJuan},
]},
];
================================================
FILE: 46-vue-router-nested-routes/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 47-vue-router-nested-nav/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 47-vue-router-nested-nav/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 47-vue-router-nested-nav/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>47-vue-router-nested-nav</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 47-vue-router-nested-nav/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 47-vue-router-nested-nav/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 47-vue-router-nested-nav/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
</main>
</template>
================================================
FILE: 47-vue-router-nested-nav/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<router-link :to="'/equipo/' + id">Equipo</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 47-vue-router-nested-nav/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>
<router-view></router-view>
</section>
</template>
================================================
FILE: 47-vue-router-nested-nav/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 47-vue-router-nested-nav/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 47-vue-router-nested-nav/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 47-vue-router-nested-nav/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import Usuario from './components/Usuario.vue';
import UsuarioFotos from './components/UsuarioFotos.vue';
import UsuarioBio from './components/UsuarioBio.vue';
export const routes = [
{path: '/', component: Home},
{path: '/equipo/:id', component: Equipo, children: [
{path: '', component: Usuario, children: [
{path: 'fotos', component: UsuarioFotos},
{path: 'bio', component: UsuarioBio}
]},
]},
];
================================================
FILE: 47-vue-router-nested-nav/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 48-vue-router-named-routes/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 48-vue-router-named-routes/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 48-vue-router-named-routes/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>48-vue-router-named-routes</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 48-vue-router-named-routes/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 48-vue-router-named-routes/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 48-vue-router-named-routes/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
</main>
</template>
================================================
FILE: 48-vue-router-named-routes/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<!--<router-link :to="'/equipo/' + id">Equipo</router-link>-->
<router-link :to="{ name: 'equipo', params: {id: id}}">Equipo</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 48-vue-router-named-routes/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<!-- <router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>-->
<router-link :to="{ name:'fotos', params: {id: $route.params.id}}">Fotos</router-link>
<router-link :to="{ name: 'bio', params: {id: $route.params.id}}">Bio</router-link>
<router-view></router-view>
</section>
</template>
================================================
FILE: 48-vue-router-named-routes/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 48-vue-router-named-routes/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 48-vue-router-named-routes/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 48-vue-router-named-routes/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import Usuario from './components/Usuario.vue';
import UsuarioFotos from './components/UsuarioFotos.vue';
import UsuarioBio from './components/UsuarioBio.vue';
export const routes = [
{path: '/', component: Home},
{path: '/equipo/:id', component: Equipo, children: [
{path: '', component: Usuario, name:'equipo', children: [
{path: 'fotos', component: UsuarioFotos, name: 'fotos'},
{path: 'bio', component: UsuarioBio, name: 'bio'}
]},
]},
];
================================================
FILE: 48-vue-router-named-routes/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 49-vue-router-named-views/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 49-vue-router-named-views/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 49-vue-router-named-views/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>49-vue-router-named-views</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 49-vue-router-named-views/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 49-vue-router-named-views/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 49-vue-router-named-views/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
<router-view name="bio"></router-view>
<router-view name="fotos"></router-view>
</main>
</template>
================================================
FILE: 49-vue-router-named-views/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<!--<router-link :to="'/equipo/' + id">Equipo</router-link>-->
<router-link :to="{ name: 'equipo', params: {id: id}}">Equipo</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 49-vue-router-named-views/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<!-- <router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>-->
<!-- <router-link :to="{ name:'fotos', params: {id: $route.params.id}}">Fotos</router-link>
<router-link :to="{ name: 'bio', params: {id: $route.params.id}}">Bio</router-link>
<router-view></router-view>-->
</section>
</template>
================================================
FILE: 49-vue-router-named-views/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 49-vue-router-named-views/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 49-vue-router-named-views/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 49-vue-router-named-views/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import Usuario from './components/Usuario.vue';
import UsuarioFotos from './components/UsuarioFotos.vue';
import UsuarioBio from './components/UsuarioBio.vue';
export const routes = [
{path: '/', component: Home},
{path: '/equipo/:id', component: Equipo, children: [
{path: '', components: {
default: Usuario,
bio: UsuarioBio,
fotos: UsuarioFotos,
}, name:'equipo'},
]},
];
================================================
FILE: 49-vue-router-named-views/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 5-eventos/index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<ul>
<li v-for="tarea in tareas">
{{ tarea }}
</li>
</ul>
<form v-on:submit.prevent="agregarTarea">
<input type="text" placeholder="Introduce tu tarea" v-model="nuevaTarea" >
<input type="submit" value="Enviar tarea" >
</form>
<pre>{{ $data }}</pre>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
================================================
FILE: 5-eventos/js/main.js
================================================
const vm = new Vue({
el: 'main',
data: {
nuevaTarea: null,
tareas: [
'Aprender Vue.js',
'Aprender ES6',
'Publicar algo todos los días'
]
},
methods: {
agregarTarea() {
// this, hace referencia a la instancia Vue
this.tareas.unshift(this.nuevaTarea);
this.nuevaTarea = null;
}
}
});
// Vanilla JavaScript
// function agregarTarea() {
// const input = document.querySelector('input[type=text]');
// vm.tareas.unshift(input.value);
// input.value = '';
// }
================================================
FILE: 50-vue-router-redirect/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 50-vue-router-redirect/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 50-vue-router-redirect/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>50-vue-router-redirection</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 50-vue-router-redirect/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 50-vue-router-redirect/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 50-vue-router-redirect/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
<router-view name="bio"></router-view>
<router-view name="fotos"></router-view>
</main>
</template>
================================================
FILE: 50-vue-router-redirect/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<!--<router-link :to="'/equipo/' + id">Equipo</router-link>-->
<router-link :to="{ name: 'equipo', params: {id: id}}">Equipo</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 50-vue-router-redirect/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<!-- <router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>-->
<!-- <router-link :to="{ name:'fotos', params: {id: $route.params.id}}">Fotos</router-link>
<router-link :to="{ name: 'bio', params: {id: $route.params.id}}">Bio</router-link>
<router-view></router-view>-->
</section>
</template>
================================================
FILE: 50-vue-router-redirect/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 50-vue-router-redirect/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 50-vue-router-redirect/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 50-vue-router-redirect/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import Usuario from './components/Usuario.vue';
import UsuarioFotos from './components/UsuarioFotos.vue';
import UsuarioBio from './components/UsuarioBio.vue';
export const routes = [
{path: '/', component: Home, name: 'home'},
{path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},
{path: '/equipo/:id', component: Equipo, children: [
{path: '', components: {
default: Usuario,
bio: UsuarioBio,
fotos: UsuarioFotos,
}, name:'equipo'},
]},
];
================================================
FILE: 50-vue-router-redirect/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 51-vue-router-passing-props/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 51-vue-router-passing-props/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 51-vue-router-passing-props/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>51-vue-router-passing-props</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 51-vue-router-passing-props/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 51-vue-router-passing-props/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 51-vue-router-passing-props/src/components/Contacto.vue
================================================
<template>
<section>
<h2>Dónde encontrarme</h2>
<p>C/. Lo que sea, Valencia</p>
<!-- <h5>{{ $route.params.newsletter }}</h5>-->
<h5>{{ newsletter }}</h5>
<!--<template v-if="$route.params.newsletter === 'true'">-->
<!--<template v-if="newsletter === 'true'">-->
<template v-if="newsletter">
<form action="">
<h3>Newsletter</h3>
<label for="correoe">Correo-e</label>
<input type="email" placeholder="Tu correo-e" id="correoe">
</form>
</template>
</section>
</template>
<script>
export default {
props: ['newsletter']
}
</script>
================================================
FILE: 51-vue-router-passing-props/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
<router-view name="bio"></router-view>
<router-view name="fotos"></router-view>
</main>
</template>
================================================
FILE: 51-vue-router-passing-props/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<router-link :to="{ name: 'equipo', params: {id: id}}">Equipo</router-link>
<router-link :to="{name: 'contacto'}">Contacto</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 51-vue-router-passing-props/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<!-- <router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>-->
<!-- <router-link :to="{ name:'fotos', params: {id: $route.params.id}}">Fotos</router-link>
<router-link :to="{ name: 'bio', params: {id: $route.params.id}}">Bio</router-link>
<router-view></router-view>-->
</section>
</template>
================================================
FILE: 51-vue-router-passing-props/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 51-vue-router-passing-props/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 51-vue-router-passing-props/src/main.js
================================================
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
================================================
FILE: 51-vue-router-passing-props/src/routes.js
================================================
import Home from './components/Home.vue';
import Equipo from './components/Equipo.vue';
import Usuario from './components/Usuario.vue';
import UsuarioFotos from './components/UsuarioFotos.vue';
import UsuarioBio from './components/UsuarioBio.vue';
import Contacto from './components/Contacto.vue';
export const routes = [
{path: '/', component: Home, name: 'home'},
{path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},
{path: '/equipo/:id', component: Equipo, children: [
{path: '', components: {
default: Usuario,
bio: UsuarioBio,
fotos: UsuarioFotos,
}, name:'equipo'},
]},
{path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}
];
================================================
FILE: 51-vue-router-passing-props/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
================================================
FILE: 52-vue-router-history-mode/.babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
================================================
FILE: 52-vue-router-history-mode/README.md
================================================
# 46-vue-router-nested-routes
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: 52-vue-router-history-mode/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>52-vue-router-history-mode</title>
</head>
<body>
<h1>Bienvenid@ a mi super App</h1>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
================================================
FILE: 52-vue-router-history-mode/package.json
================================================
{
"name": "46-vue-router-nested-routes",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "@juanwmedia <juan@wmedia.es>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
================================================
FILE: 52-vue-router-history-mode/src/App.vue
================================================
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
================================================
FILE: 52-vue-router-history-mode/src/components/Contacto.vue
================================================
<template>
<section>
<h2>Dónde encontrarme</h2>
<p>C/. Lo que sea, Valencia</p>
<!-- <h5>{{ $route.params.newsletter }}</h5>-->
<h5>{{ newsletter }}</h5>
<!--<template v-if="$route.params.newsletter === 'true'">-->
<!--<template v-if="newsletter === 'true'">-->
<template v-if="newsletter">
<form action="">
<h3>Newsletter</h3>
<label for="correoe">Correo-e</label>
<input type="email" placeholder="Tu correo-e" id="correoe">
</form>
</template>
</section>
</template>
<script>
export default {
props: ['newsletter']
}
</script>
================================================
FILE: 52-vue-router-history-mode/src/components/Equipo.vue
================================================
<template>
<main>
<h1>Nuestro equipo:</h1>
<router-view></router-view>
<router-view name="bio"></router-view>
<router-view name="fotos"></router-view>
</main>
</template>
================================================
FILE: 52-vue-router-history-mode/src/components/Home.vue
================================================
<template>
<section>
<h1>Home</h1>
<router-link :to="{ name: 'equipo', params: {id: id}}">Equipo</router-link>
<router-link :to="{name: 'contacto'}">Contacto</router-link>
</section>
</template>
<script>
export default {
data() {
return {
id: 'juan'
}
}
}
</script>
================================================
FILE: 52-vue-router-history-mode/src/components/NoEncontrado.vue
================================================
<template>
<h2>No encuentro: 404</h2>
</template>
================================================
FILE: 52-vue-router-history-mode/src/components/Usuario.vue
================================================
<template>
<section>
<h1>El identificador es: {{ $route.params.id }}</h1>
<h2>Juan Andrés Núñez</h2>
<h5>juan@wmedia.es</h5>
<!-- <router-link :to="'/equipo/' + $route.params.id + '/fotos'">Fotos</router-link>
<router-link :to="'/equipo/' + $route.params.id + '/bio'">Bio</router-link>-->
<!-- <router-link :to="{ name:'fotos', params: {id: $route.params.id}}">Fotos</router-link>
<router-link :to="{ name: 'bio', params: {id: $route.params.id}}">Bio</router-link>
<router-view></router-view>-->
</section>
</template>
================================================
FILE: 52-vue-router-history-mode/src/components/UsuarioBio.vue
================================================
<template>
<h5>Lorem ipsum...</h5>
</template>
================================================
FILE: 52-vue-router-history-mode/src/components/UsuarioFotos.vue
================================================
<template>
<section>
<h2>Mi foto de perfil</h2>
<img src="https://ih1.redbubble.net/image.11748456.8987/sticker,375x360.png" alt="">
</section>
</template>
================================================
FILE: 52-vue-router-history-mode/src/main
gitextract_2njoxt7a/ ├── 1-instalacion-data-binding/ │ ├── index.html │ └── js/ │ └── main.js ├── 10-transiciones/ │ ├── index.html │ └── main.js ├── 11-ajax-vue-resource/ │ ├── index.html │ └── js/ │ └── main.js ├── 12-ajax-axios/ │ ├── index.html │ └── js/ │ └── main.js ├── 13-components-intro/ │ ├── index.html │ └── js/ │ └── main.js ├── 14-components-templates/ │ ├── index.html │ └── js/ │ └── main.js ├── 15-components-props/ │ ├── index.html │ └── js/ │ └── main.js ├── 16-prop-validation/ │ ├── index.html │ └── js/ │ └── main.js ├── 17-slots-named-slots/ │ ├── css/ │ │ └── main.css │ ├── index.html │ └── js/ │ └── main.js ├── 18-scoped-slots/ │ ├── css/ │ │ └── main.css │ ├── index.html │ └── js/ │ └── main.js ├── 19-custom-events/ │ ├── css/ │ │ └── main.css │ ├── index.html │ └── js/ │ └── main.js ├── 2-directivas-incluidas/ │ ├── index.html │ └── js/ │ └── main.js ├── 20-component-communication/ │ ├── css/ │ │ └── main.css │ ├── index.html │ └── js/ │ └── main.js ├── 21-components-inside-components/ │ ├── index.html │ └── js/ │ └── main.js ├── 22-dynamic-components/ │ ├── index.html │ └── js/ │ └── main.js ├── 23-custom-input-components/ │ ├── index.html │ └── js/ │ └── main.js ├── 24-ejercicio-components/ │ ├── finalizado/ │ │ ├── css/ │ │ │ └── main.css │ │ ├── index.html │ │ └── js/ │ │ └── main.js │ └── inicio/ │ ├── css/ │ │ └── main.css │ ├── index.html │ └── js/ │ └── main.js ├── 25-vue-cli/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ └── main.js │ └── webpack.config.js ├── 26-single-file-components/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Persona.vue │ │ └── main.js │ └── webpack.config.js ├── 27-render-function/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Elemento.vue │ │ └── main.js │ └── webpack.config.js ├── 28-hot-reloading/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Tareas.vue │ │ └── main.js │ └── webpack.config.js ├── 29-scoped-css/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Tareas.vue │ │ └── main.js │ └── webpack.config.js ├── 3-renderizado-de-listas/ │ ├── index.html │ └── js/ │ └── main.js ├── 30-css-modules/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ └── main.js │ └── webpack.config.js ├── 31-shared-state/ │ ├── index.html │ └── js/ │ └── main.js ├── 32-vuex-central-store/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Contador.vue │ │ ├── main.js │ │ └── store/ │ │ └── store.js │ └── webpack.config.js ├── 33-vuex-state/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── main.js │ │ └── store/ │ │ └── store.js │ └── webpack.config.js ├── 34-vuex-getters/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── Tareas.vue │ │ ├── components/ │ │ │ └── TareasRestantes.vue │ │ ├── main.js │ │ └── store/ │ │ └── store.js │ └── webpack.config.js ├── 35-vuex-mutations/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Contador.vue │ │ ├── main.js │ │ └── store/ │ │ └── store.js │ └── webpack.config.js ├── 36-vuex-actions/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── Contador.vue │ │ ├── main.js │ │ └── store/ │ │ └── store.js │ └── webpack.config.js ├── 37-vuex-modules/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Carro.vue │ │ │ └── Productos.vue │ │ ├── main.js │ │ └── store/ │ │ ├── modules/ │ │ │ └── productos.js │ │ └── store.js │ └── webpack.config.js ├── 38-vuex-structure/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Carro.vue │ │ │ └── Productos.vue │ │ ├── main.js │ │ └── store/ │ │ ├── getters.js │ │ ├── modules/ │ │ │ └── productos.js │ │ ├── mutations.js │ │ └── store.js │ └── webpack.config.js ├── 4-vue-devtools/ │ ├── index.html │ └── js/ │ └── main.js ├── 40-vue-router-intro/ │ ├── index.html │ └── js/ │ └── main.js ├── 41-vue-router-components/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ └── Home.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 42-vue-router-active-links/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ └── Home.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 43-vue-programmatic-nav/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ └── Home.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 44-vue-router-dynamic-routes/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Home.vue │ │ │ └── Usuario.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 45-vue-router-reacting/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Home.vue │ │ │ └── Usuario.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 46-vue-router-nested-routes/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Equipo.vue │ │ │ ├── EquipoJuan.vue │ │ │ └── Home.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 47-vue-router-nested-nav/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 48-vue-router-named-routes/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 49-vue-router-named-views/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 5-eventos/ │ ├── index.html │ └── js/ │ └── main.js ├── 50-vue-router-redirect/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 51-vue-router-passing-props/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 52-vue-router-history-mode/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ └── routes.js │ └── webpack.config.js ├── 53-vue-router-global-guard/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 54-vue-router-route-guard/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 55-vue-router-component-guard/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 56-vue-router-meta-field/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 57-vue-router-transitions/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 58-vue-router-data-fetch/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Contacto.vue │ │ │ ├── Equipo.vue │ │ │ ├── Home.vue │ │ │ ├── NoEncontrado.vue │ │ │ ├── Usuario.vue │ │ │ ├── UsuarioBio.vue │ │ │ └── UsuarioFotos.vue │ │ ├── main.js │ │ ├── routes.js │ │ └── store.js │ └── webpack.config.js ├── 59-vue-router-srcoll/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Bio.vue │ │ │ └── Info.vue │ │ └── main.js │ └── webpack.config.js ├── 6-propiedades-computadas/ │ ├── index.html │ └── js/ │ └── main.js ├── 60-vue-router-lazy-load/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ ├── Bio.vue │ │ │ └── Info.vue │ │ └── main.js │ └── webpack.config.js ├── 61-vue-directive-hooks/ │ ├── index.html │ └── js/ │ └── main.js ├── 62-vue-directive-object-literals/ │ ├── index.html │ └── js/ │ └── main.js ├── 64-mixins-intro/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── main.js │ │ └── mixins.js │ └── webpack.config.js ├── 65-mixins-merge/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── main.js │ │ └── mixins.js │ └── webpack.config.js ├── 66-global-mixins/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── main.js │ │ └── mixins.js │ └── webpack.config.js ├── 67-vue-filters/ │ ├── .babelrc │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ └── main.js │ └── webpack.config.js ├── 68-form-input-basic/ │ └── index.html ├── 69-form-value-bindings/ │ └── index.html ├── 7-filtros/ │ ├── index.html │ └── js/ │ └── main.js ├── 70-form-input-modifiers/ │ └── index.html ├── 71-firebase-agregar/ │ └── index.html ├── 72-firebase-leer/ │ └── index.html ├── 73-firebase-actualizar/ │ └── index.html ├── 74-firebase-eliminar/ │ └── index.html ├── 75-firebase-transactions/ │ └── index.html ├── 76-firebase-push-agregar/ │ └── index.html ├── 77-firebase-listas-eventos/ │ └── index.html ├── 78-firebase-ordenar/ │ └── index.html ├── 79-firebase-filtrar/ │ └── index.html ├── 8-instancia-vue/ │ ├── index.html │ └── js/ │ └── main.js ├── 9-data-binding-atributos-clases/ │ ├── index.html │ └── js/ │ └── main.js └── README.md
SYMBOL INDEX (55 symbols across 24 files)
FILE: 11-ajax-vue-resource/js/main.js
method mounted (line 3) | mounted() {
method cargarPersonas (line 10) | cargarPersonas() {
FILE: 12-ajax-axios/js/main.js
method mounted (line 5) | mounted() {
method cargarPersonas (line 12) | cargarPersonas() {
FILE: 13-components-intro/js/main.js
method mounted (line 3) | mounted() {
method data (line 9) | data() {
FILE: 14-components-templates/js/main.js
method elegirGanador (line 16) | elegirGanador() {
method data (line 22) | data() {
FILE: 15-components-props/js/main.js
method mounted (line 3) | mounted() {
method cambiarProp (line 10) | cambiarProp() {
FILE: 16-prop-validation/js/main.js
method default (line 15) | default() {
method mounted (line 27) | mounted() {
method obtenerCandidatos (line 34) | obtenerCandidatos() {
FILE: 19-custom-events/js/main.js
method ocultarWidget (line 20) | ocultarWidget() {
FILE: 20-component-communication/js/main.js
method anadirProducto (line 17) | anadirProducto(precio){
method eliminarProducto (line 20) | eliminarProducto(precio) {
method data (line 32) | data() {
method created (line 38) | created() {
FILE: 22-dynamic-components/js/main.js
method data (line 9) | data() {
FILE: 23-custom-input-components/js/main.js
method comprobarContrasena (line 5) | comprobarContrasena(contrasena) {
method data (line 12) | data() {
FILE: 24-ejercicio-components/finalizado/js/main.js
method mounted (line 4) | mounted() {
method data (line 17) | data() {
method filtrarUsuarios (line 24) | filtrarUsuarios() {
FILE: 24-ejercicio-components/inicio/js/main.js
method mounted (line 3) | mounted() {
method data (line 16) | data() {
method filtrarUsuarios (line 23) | filtrarUsuarios() {
FILE: 5-eventos/js/main.js
method agregarTarea (line 12) | agregarTarea() {
FILE: 59-vue-router-srcoll/src/main.js
method scrollBehavior (line 19) | scrollBehavior(to, from, savedPosition) {
FILE: 6-propiedades-computadas/js/main.js
method agregarTarea (line 24) | agregarTarea() {
method tareasConPrioridad (line 35) | tareasConPrioridad() {
method mensajeAlReves (line 38) | mensajeAlReves() {
method tareasPorAntiguedad (line 41) | tareasPorAntiguedad() {
FILE: 60-vue-router-lazy-load/src/main.js
method scrollBehavior (line 25) | scrollBehavior(to, from, savedPosition) {
FILE: 61-vue-directive-hooks/js/main.js
method bind (line 2) | bind(el, binding) {
FILE: 62-vue-directive-object-literals/js/main.js
method bind (line 2) | bind(el, binding) {
FILE: 64-mixins-intro/src/mixins.js
method data (line 2) | data () {
method agregarTecnologia (line 15) | agregarTecnologia() {
FILE: 65-mixins-merge/src/mixins.js
method created (line 2) | created() {
method data (line 6) | data () {
method agregarTecnologia (line 19) | agregarTecnologia() {
method saludar (line 25) | saludar() {
FILE: 66-global-mixins/src/mixins.js
method created (line 4) | created() {
method saludar (line 9) | saludar(nombre) {
method created (line 17) | created() {
method data (line 20) | data () {
method agregarTecnologia (line 33) | agregarTecnologia() {
FILE: 7-filtros/js/main.js
method mejoresJuegos (line 26) | mejoresJuegos() {
method buscarJuego (line 29) | buscarJuego() {
FILE: 8-instancia-vue/js/main.js
method beforeUpdate (line 6) | beforeUpdate() {
method updated (line 9) | updated() {
method alReves (line 13) | alReves(){
method mensajeMayusculas (line 18) | mensajeMayusculas(){
FILE: 9-data-binding-atributos-clases/js/main.js
method completarTarea (line 13) | completarTarea(tarea) {
method tareasCompletadas (line 18) | tareasCompletadas() {
Condensed preview — 480 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (336K chars).
[
{
"path": "1-instalacion-data-binding/index.html",
"chars": 548,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "1-instalacion-data-binding/js/main.js",
"chars": 276,
"preview": "// Vanilla JavaScript\n// const input = document.querySelector('input');\n// const h1 = document.querySelector('h1');\n// i"
},
{
"path": "10-transiciones/index.html",
"chars": 2571,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "10-transiciones/main.js",
"chars": 345,
"preview": "new Vue({\n el: 'main',\n data: {\n mostrar: true,\n mensajes: {\n transicion: 'Transiciones C"
},
{
"path": "11-ajax-vue-resource/index.html",
"chars": 704,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "11-ajax-vue-resource/js/main.js",
"chars": 369,
"preview": "new Vue({\n el: 'main',\n mounted() {\n this.cargarPersonas();\n },\n data: {\n personas: []\n },\n"
},
{
"path": "12-ajax-axios/index.html",
"chars": 682,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "12-ajax-axios/js/main.js",
"chars": 594,
"preview": "Vue.prototype.$http = axios;\n\nnew Vue({\n el: 'main',\n mounted() {\n this.cargarPersonas();\n },\n data: "
},
{
"path": "13-components-intro/index.html",
"chars": 907,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "13-components-intro/js/main.js",
"chars": 396,
"preview": "Vue.component('mis-tareas', {\n template: `<ul><li v-for=\"tarea in tareas\">{{ tarea.title }}</li></ul>`,\n mounted()"
},
{
"path": "14-components-templates/index.html",
"chars": 1741,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "14-components-templates/js/main.js",
"chars": 1062,
"preview": "Vue.component('elegir-ganador', {\n props: ['listado'],\n //template: '#elegir-ganador-template',\n/* template: `<"
},
{
"path": "15-components-props/index.html",
"chars": 500,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "15-components-props/js/main.js",
"chars": 502,
"preview": "Vue.component('autor', {\n props: ['nombre', 'edad'],\n mounted() {\n // Las props son accesibles desde this ("
},
{
"path": "16-prop-validation/index.html",
"chars": 1074,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "16-prop-validation/js/main.js",
"chars": 914,
"preview": "Vue.component('candidato', {\n /*props: ['nombre', 'correoe', 'imagen'],*/\n props: {\n nombre: {\n "
},
{
"path": "17-slots-named-slots/css/main.css",
"chars": 984,
"preview": "/* Bloques */\n.alerta {\n width: 300px;\n border-radius: 15px;\n background-color: lightgray;\n border: 1px soli"
},
{
"path": "17-slots-named-slots/index.html",
"chars": 1320,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "17-slots-named-slots/js/main.js",
"chars": 785,
"preview": "Vue.component('alerta', {\n props: ['tipo', 'posicion'],\n template: `\n <section class=\"alerta\" :class=\"["
},
{
"path": "18-scoped-slots/css/main.css",
"chars": 984,
"preview": "/* Bloques */\n.alerta {\n width: 300px;\n border-radius: 15px;\n background-color: lightgray;\n border: 1px soli"
},
{
"path": "18-scoped-slots/index.html",
"chars": 1244,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "18-scoped-slots/js/main.js",
"chars": 377,
"preview": "Vue.component('mis-tareas', {\n props: ['listado'],\n template: '#mis-tareas-template'\n});\n\nnew Vue({\n el: 'main'"
},
{
"path": "19-custom-events/css/main.css",
"chars": 1258,
"preview": "html, body {\n width: 100%;\n height: 100%;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-item"
},
{
"path": "19-custom-events/index.html",
"chars": 1675,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "19-custom-events/js/main.js",
"chars": 1058,
"preview": "Vue.component('alerta', {\n props: ['tipo', 'posicion'],\n template: `\n <section class=\"alerta\" :class=\"["
},
{
"path": "2-directivas-incluidas/index.html",
"chars": 1020,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "2-directivas-incluidas/js/main.js",
"chars": 104,
"preview": "const vm = new Vue({\n el: 'main',\n data: {\n conectado: false,\n edad: 44,\n },\n});"
},
{
"path": "20-component-communication/css/main.css",
"chars": 374,
"preview": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n "
},
{
"path": "20-component-communication/index.html",
"chars": 612,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "20-component-communication/js/main.js",
"chars": 1748,
"preview": "const eventBus = new Vue();\n\nVue.component('listado-productos', {\n props: ['productos'],\n template: `\n <sec"
},
{
"path": "21-components-inside-components/index.html",
"chars": 548,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "21-components-inside-components/js/main.js",
"chars": 654,
"preview": "Vue.component('lista-tareas', {\n props: ['tareas'],\n template: `<div>\n <h1><slot></slot></h1>\n "
},
{
"path": "22-dynamic-components/index.html",
"chars": 769,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "22-dynamic-components/js/main.js",
"chars": 1143,
"preview": "Vue.component('lista-tareas', {\n template: `<div>\n <h1><slot></slot></h1>\n <ul>\n "
},
{
"path": "23-custom-input-components/index.html",
"chars": 646,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "23-custom-input-components/js/main.js",
"chars": 603,
"preview": "Vue.component('contrasena', {\n props: ['contrasena'],\n template: `<input :value=\"contrasena\" @input=\"comprobarCont"
},
{
"path": "24-ejercicio-components/finalizado/css/main.css",
"chars": 778,
"preview": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n "
},
{
"path": "24-ejercicio-components/finalizado/index.html",
"chars": 1260,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "24-ejercicio-components/finalizado/js/main.js",
"chars": 1018,
"preview": "Vue.component('usuarios', {\n props: ['fuente'],\n template: '#usuarios-template',\n mounted() {\n axios.get"
},
{
"path": "24-ejercicio-components/inicio/css/main.css",
"chars": 778,
"preview": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n "
},
{
"path": "24-ejercicio-components/inicio/index.html",
"chars": 1263,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "24-ejercicio-components/inicio/js/main.js",
"chars": 994,
"preview": "Vue.component('usuarios', {\n template: '#usuarios-template',\n mounted() {\n axios.get('https://randomuser.me"
},
{
"path": "25-vue-cli/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "25-vue-cli/README.md",
"chars": 325,
"preview": "# 25-vue-cli\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload a"
},
{
"path": "25-vue-cli/index.html",
"chars": 210,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>25-vue-cli</title>\n </head>\n <body>\n "
},
{
"path": "25-vue-cli/package.json",
"chars": 706,
"preview": "{\n \"name\": \"25-vue-cli\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan@wmed"
},
{
"path": "25-vue-cli/src/App.vue",
"chars": 1373,
"preview": "<template>\n <div id=\"app\">\n <img src=\"./assets/logo.png\">\n <h1 v-text=\"mensaje\"></h1>\n <h2>Enlaces esenciales<"
},
{
"path": "25-vue-cli/src/main.js",
"chars": 100,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n"
},
{
"path": "25-vue-cli/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "26-single-file-components/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "26-single-file-components/README.md",
"chars": 340,
"preview": "# 26-single-file-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve wi"
},
{
"path": "26-single-file-components/index.html",
"chars": 219,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>26-single-file-components</title>\n </he"
},
{
"path": "26-single-file-components/package.json",
"chars": 745,
"preview": "{\n \"name\": \"26-single-file-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwm"
},
{
"path": "26-single-file-components/src/App.vue",
"chars": 441,
"preview": "<template>\n <div>\n <persona></persona>\n <persona></persona>\n <persona></persona>\n <person"
},
{
"path": "26-single-file-components/src/components/Persona.vue",
"chars": 986,
"preview": "<template>\n <div>\n <template v-if=\"persona\">\n <h1 v-text=\"datosPersona.nombre\"></h1>\n <h"
},
{
"path": "26-single-file-components/src/main.js",
"chars": 100,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n"
},
{
"path": "26-single-file-components/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "27-render-function/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "27-render-function/README.md",
"chars": 333,
"preview": "# 27-render-function\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot "
},
{
"path": "27-render-function/index.html",
"chars": 212,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>27-render-function</title>\n </head>\n <"
},
{
"path": "27-render-function/package.json",
"chars": 714,
"preview": "{\n \"name\": \"27-render-function\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <j"
},
{
"path": "27-render-function/src/App.vue",
"chars": 460,
"preview": "<template>\n <div>\n <elemento tipo=\"footer\">Hola footer</elemento>\n <elemento tipo=\"header\">Hola header<"
},
{
"path": "27-render-function/src/components/Elemento.vue",
"chars": 803,
"preview": "<!--<template>\n <div>\n <article v-if=\"tipo === 'article'\">\n <slot></slot>\n </article>\n "
},
{
"path": "27-render-function/src/main.js",
"chars": 99,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})"
},
{
"path": "27-render-function/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "28-hot-reloading/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "28-hot-reloading/README.md",
"chars": 331,
"preview": "# 28-hot-reloading\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot re"
},
{
"path": "28-hot-reloading/index.html",
"chars": 210,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>28-hot-reloading</title>\n </head>\n <bo"
},
{
"path": "28-hot-reloading/package.json",
"chars": 712,
"preview": "{\n \"name\": \"28-hot-reloading\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <jua"
},
{
"path": "28-hot-reloading/src/App.vue",
"chars": 172,
"preview": "<template>\n <tareas></tareas>\n</template>\n\n<script>\n import Tareas from './components/Tareas.vue';\n export defa"
},
{
"path": "28-hot-reloading/src/components/Tareas.vue",
"chars": 1710,
"preview": "<template>\n <div>\n <h2>Las Tareas por hacer</h2>\n <ul>\n <li v-for=\"tarea in tareasPendientes"
},
{
"path": "28-hot-reloading/src/main.js",
"chars": 100,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n"
},
{
"path": "28-hot-reloading/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "29-scoped-css/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "29-scoped-css/README.md",
"chars": 328,
"preview": "# 29-scoped-css\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reloa"
},
{
"path": "29-scoped-css/index.html",
"chars": 207,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>29-scoped-css</title>\n </head>\n <body>"
},
{
"path": "29-scoped-css/package.json",
"chars": 709,
"preview": "{\n \"name\": \"29-scoped-css\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan@w"
},
{
"path": "29-scoped-css/src/App.vue",
"chars": 553,
"preview": "<template>\n <div>\n <h1>Menú principal</h1>\n <input type=\"range\">\n <ul>\n <li><a href=\""
},
{
"path": "29-scoped-css/src/components/Tareas.vue",
"chars": 1649,
"preview": "<template>\n <div>\n <h2>Las Tareas por hacer</h2>\n <ul>\n <li v-for=\"tarea in tareasPendientes"
},
{
"path": "29-scoped-css/src/main.js",
"chars": 100,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n"
},
{
"path": "29-scoped-css/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "3-renderizado-de-listas/index.html",
"chars": 1016,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "3-renderizado-de-listas/js/main.js",
"chars": 468,
"preview": "const vm = new Vue({\n el: 'main',\n data: {\n laborales: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes"
},
{
"path": "30-css-modules/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "30-css-modules/README.md",
"chars": 329,
"preview": "# 30-css-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot relo"
},
{
"path": "30-css-modules/index.html",
"chars": 208,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>30-css-modules</title>\n </head>\n <body"
},
{
"path": "30-css-modules/package.json",
"chars": 710,
"preview": "{\n \"name\": \"30-css-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan@"
},
{
"path": "30-css-modules/src/App.vue",
"chars": 419,
"preview": "<template>\n <!--<h1 :class=\"[$style.rojo]\">Hola CSS Modules</h1>-->\n <h1 :class=\"{[$style.subrayado] : subrayado}\""
},
{
"path": "30-css-modules/src/main.js",
"chars": 100,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n"
},
{
"path": "30-css-modules/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "31-shared-state/index.html",
"chars": 528,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" c"
},
{
"path": "31-shared-state/js/main.js",
"chars": 184,
"preview": "const compartido = {\n usuario: {\n nombre: 'Juan Andrés',\n }\n};\n\nnew Vue({\n el: '#app1',\n data: compa"
},
{
"path": "32-vuex-central-store/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "32-vuex-central-store/README.md",
"chars": 336,
"preview": "# 32-vuex-central-store\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with h"
},
{
"path": "32-vuex-central-store/index.html",
"chars": 215,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>32-vuex-central-store</title>\n </head>\n"
},
{
"path": "32-vuex-central-store/package.json",
"chars": 739,
"preview": "{\n \"name\": \"32-vuex-central-store\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia"
},
{
"path": "32-vuex-central-store/src/App.vue",
"chars": 322,
"preview": "<template>\n<!-- <contador :cantidad=\"cantidad\"\n @aumentar=\"cantidad++\"\n @reducir=\"cantidad&"
},
{
"path": "32-vuex-central-store/src/components/Contador.vue",
"chars": 667,
"preview": "<template>\n <div>\n <h1>Contador: {{ cantidad }}</h1>\n <button @click=\"aumentar\">Aumentar</button>\n "
},
{
"path": "32-vuex-central-store/src/main.js",
"chars": 155,
"preview": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n "
},
{
"path": "32-vuex-central-store/src/store/store.js",
"chars": 142,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n "
},
{
"path": "32-vuex-central-store/webpack.config.js",
"chars": 1418,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "33-vuex-state/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"latest\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "33-vuex-state/README.md",
"chars": 328,
"preview": "# 33-vuex-state\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reloa"
},
{
"path": "33-vuex-state/index.html",
"chars": 207,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>33-vuex-state</title>\n </head>\n <body>"
},
{
"path": "33-vuex-state/package.json",
"chars": 731,
"preview": "{\n \"name\": \"33-vuex-state\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan@w"
},
{
"path": "33-vuex-state/src/App.vue",
"chars": 513,
"preview": "<template>\n <h1>Hola me llamo {{ nombre }} {{ apellidos}} y me dedico a {{profesion}}</h1>\n</template>\n<script>\n i"
},
{
"path": "33-vuex-state/src/main.js",
"chars": 152,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n st"
},
{
"path": "33-vuex-state/src/store/store.js",
"chars": 243,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n "
},
{
"path": "33-vuex-state/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "34-vuex-getters/.babelrc",
"chars": 60,
"preview": "{\n \"presets\": [\n [\"latest\", { \"modules\": false }]\n ]\n}\n"
},
{
"path": "34-vuex-getters/README.md",
"chars": 330,
"preview": "# 34-vuex-getters\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot rel"
},
{
"path": "34-vuex-getters/index.html",
"chars": 209,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>34-vuex-getters</title>\n </head>\n <bod"
},
{
"path": "34-vuex-getters/package.json",
"chars": 733,
"preview": "{\n \"name\": \"34-vuex-getters\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan"
},
{
"path": "34-vuex-getters/src/Tareas.vue",
"chars": 531,
"preview": "<template>\n <main>\n <tareas-restantes></tareas-restantes>\n <ul>\n <li v-for=\"tarea in tareas\""
},
{
"path": "34-vuex-getters/src/components/TareasRestantes.vue",
"chars": 503,
"preview": "<template>\n <h1>{{tareasCompletadas}} tareas completadas.</h1>\n</template>\n<script>\n import {mapGetters} from 'vue"
},
{
"path": "34-vuex-getters/src/main.js",
"chars": 163,
"preview": "import Vue from 'vue';\nimport Tareas from './Tareas.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app'"
},
{
"path": "34-vuex-getters/src/store/store.js",
"chars": 660,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n "
},
{
"path": "34-vuex-getters/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "35-vuex-mutations/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "35-vuex-mutations/README.md",
"chars": 332,
"preview": "# 35-vuex-mutations\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot r"
},
{
"path": "35-vuex-mutations/index.html",
"chars": 211,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>35-vuex-mutations</title>\n </head>\n <b"
},
{
"path": "35-vuex-mutations/package.json",
"chars": 735,
"preview": "{\n \"name\": \"35-vuex-mutations\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <ju"
},
{
"path": "35-vuex-mutations/src/App.vue",
"chars": 202,
"preview": "<template>\n <contador></contador>\n</template>\n<script>\n import contador from './components/Contador.vue';\n expo"
},
{
"path": "35-vuex-mutations/src/components/Contador.vue",
"chars": 690,
"preview": "<template>\n <section>\n <h1>Cantidad: {{ cantidad }}</h1>\n <button @click=\"aumentar\">Aumentar</button>\n "
},
{
"path": "35-vuex-mutations/src/main.js",
"chars": 161,
"preview": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n "
},
{
"path": "35-vuex-mutations/src/store/store.js",
"chars": 262,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n "
},
{
"path": "35-vuex-mutations/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "36-vuex-actions/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "36-vuex-actions/README.md",
"chars": 332,
"preview": "# 35-vuex-mutations\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot r"
},
{
"path": "36-vuex-actions/index.html",
"chars": 209,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>36-vuex-actions</title>\n </head>\n <bod"
},
{
"path": "36-vuex-actions/package.json",
"chars": 735,
"preview": "{\n \"name\": \"35-vuex-mutations\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <ju"
},
{
"path": "36-vuex-actions/src/App.vue",
"chars": 202,
"preview": "<template>\n <contador></contador>\n</template>\n<script>\n import contador from './components/Contador.vue';\n expo"
},
{
"path": "36-vuex-actions/src/components/Contador.vue",
"chars": 838,
"preview": "<template>\n <section>\n <h1>Cantidad: {{ cantidad }}</h1>\n <button @click=\"aumentarAsync(12)\">Aumentar</"
},
{
"path": "36-vuex-actions/src/main.js",
"chars": 161,
"preview": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n "
},
{
"path": "36-vuex-actions/src/store/store.js",
"chars": 581,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n "
},
{
"path": "36-vuex-actions/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "37-vuex-modules/.babelrc",
"chars": 186,
"preview": "// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/\n{\n \"presets\": [\n \"stage-2\",\n "
},
{
"path": "37-vuex-modules/README.md",
"chars": 330,
"preview": "# 37-vuex-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot rel"
},
{
"path": "37-vuex-modules/index.html",
"chars": 209,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>37-vuex-modules</title>\n </head>\n <bod"
},
{
"path": "37-vuex-modules/package.json",
"chars": 772,
"preview": "{\n \"name\": \"37-vuex-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan"
},
{
"path": "37-vuex-modules/src/App.vue",
"chars": 297,
"preview": "<template>\n <section>\n <productos></productos>\n <carro></carro>\n </section>\n</template>\n<script>\n "
},
{
"path": "37-vuex-modules/src/components/Carro.vue",
"chars": 625,
"preview": "<template>\n <section>\n <h2>Carro de la compra</h2>\n <h3>Total compra: {{ totalCompra.toFixed(2) }} € </"
},
{
"path": "37-vuex-modules/src/components/Productos.vue",
"chars": 1218,
"preview": "<template>\n <section>\n <h1>Añadir un producto</h1>\n <form @submit.prevent=\"anadir\">\n <input "
},
{
"path": "37-vuex-modules/src/main.js",
"chars": 154,
"preview": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n "
},
{
"path": "37-vuex-modules/src/store/modules/productos.js",
"chars": 307,
"preview": "const productos = [\n {nombre: 'Steam Link', precio: 50},\n {nombre: 'Steam Controller', precio: 59},\n {nombre: '"
},
{
"path": "37-vuex-modules/src/store/store.js",
"chars": 813,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nimport productos from './modules/productos';\nVue.use(Vuex);\n\nexport cons"
},
{
"path": "37-vuex-modules/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "38-vuex-structure/.babelrc",
"chars": 186,
"preview": "// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/\n{\n \"presets\": [\n \"stage-2\",\n "
},
{
"path": "38-vuex-structure/README.md",
"chars": 330,
"preview": "# 37-vuex-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot rel"
},
{
"path": "38-vuex-structure/index.html",
"chars": 211,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>38-vuex-structure</title>\n </head>\n <b"
},
{
"path": "38-vuex-structure/package.json",
"chars": 772,
"preview": "{\n \"name\": \"37-vuex-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia <juan"
},
{
"path": "38-vuex-structure/src/App.vue",
"chars": 297,
"preview": "<template>\n <section>\n <productos></productos>\n <carro></carro>\n </section>\n</template>\n<script>\n "
},
{
"path": "38-vuex-structure/src/components/Carro.vue",
"chars": 625,
"preview": "<template>\n <section>\n <h2>Carro de la compra</h2>\n <h3>Total compra: {{ totalCompra.toFixed(2) }} € </"
},
{
"path": "38-vuex-structure/src/components/Productos.vue",
"chars": 1218,
"preview": "<template>\n <section>\n <h1>Añadir un producto</h1>\n <form @submit.prevent=\"anadir\">\n <input "
},
{
"path": "38-vuex-structure/src/main.js",
"chars": 154,
"preview": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n "
},
{
"path": "38-vuex-structure/src/store/getters.js",
"chars": 124,
"preview": "export const getters = {\n totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0)"
},
{
"path": "38-vuex-structure/src/store/modules/productos.js",
"chars": 307,
"preview": "const productos = [\n {nombre: 'Steam Link', precio: 50},\n {nombre: 'Steam Controller', precio: 59},\n {nombre: '"
},
{
"path": "38-vuex-structure/src/store/mutations.js",
"chars": 187,
"preview": "export const mutations = {\n comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]),\n eli"
},
{
"path": "38-vuex-structure/src/store/store.js",
"chars": 350,
"preview": "import Vue from 'vue';\nimport Vuex from 'vuex';\nimport productos from './modules/productos';\nimport {getters} from './ge"
},
{
"path": "38-vuex-structure/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "4-vue-devtools/index.html",
"chars": 502,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" co"
},
{
"path": "4-vue-devtools/js/main.js",
"chars": 88,
"preview": "new Vue({\n el: 'main',\n data: {\n mensaje: 'Aprendiendo Vue.js :)'\n }\n});"
},
{
"path": "40-vue-router-intro/index.html",
"chars": 485,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Vue Router</title>\n</head>\n<body>\n<main>\n "
},
{
"path": "40-vue-router-intro/js/main.js",
"chars": 469,
"preview": "// ¿Quién 'vive' en cada ruta?\nconst home = Vue.component('Home', {\n template: '<h2>Portada</h2>',\n});\n\nconst contact"
},
{
"path": "41-vue-router-components/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "41-vue-router-components/README.md",
"chars": 339,
"preview": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve wit"
},
{
"path": "41-vue-router-components/index.html",
"chars": 218,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>41-vue-router-components</title>\n </hea"
},
{
"path": "41-vue-router-components/package.json",
"chars": 748,
"preview": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwme"
},
{
"path": "41-vue-router-components/src/App.vue",
"chars": 291,
"preview": "<template>\n <section>\n <h1>Rutas con Vue Router</h1>\n <router-link to=\"/\">Home</router-link>\n <r"
},
{
"path": "41-vue-router-components/src/components/Contacto.vue",
"chars": 44,
"preview": "<template>\n <h2>Contacto</h2>\n</template>"
},
{
"path": "41-vue-router-components/src/components/Home.vue",
"chars": 40,
"preview": "<template>\n <h2>Home</h2>\n</template>"
},
{
"path": "41-vue-router-components/src/main.js",
"chars": 254,
"preview": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';"
},
{
"path": "41-vue-router-components/src/routes.js",
"chars": 199,
"preview": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n "
},
{
"path": "41-vue-router-components/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "42-vue-router-active-links/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "42-vue-router-active-links/README.md",
"chars": 339,
"preview": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve wit"
},
{
"path": "42-vue-router-active-links/index.html",
"chars": 220,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>42-vue-router-active-links</title>\n </h"
},
{
"path": "42-vue-router-active-links/package.json",
"chars": 748,
"preview": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwme"
},
{
"path": "42-vue-router-active-links/src/App.vue",
"chars": 478,
"preview": "<template>\n <section>\n <h1>Rutas con Vue Router</h1>\n <router-link to=\"/\" active-class=\"activo\" tag=\"li"
},
{
"path": "42-vue-router-active-links/src/components/Contacto.vue",
"chars": 44,
"preview": "<template>\n <h2>Contacto</h2>\n</template>"
},
{
"path": "42-vue-router-active-links/src/components/Home.vue",
"chars": 40,
"preview": "<template>\n <h2>Home</h2>\n</template>"
},
{
"path": "42-vue-router-active-links/src/main.js",
"chars": 254,
"preview": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';"
},
{
"path": "42-vue-router-active-links/src/routes.js",
"chars": 199,
"preview": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n "
},
{
"path": "42-vue-router-active-links/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "43-vue-programmatic-nav/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "43-vue-programmatic-nav/README.md",
"chars": 339,
"preview": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve wit"
},
{
"path": "43-vue-programmatic-nav/index.html",
"chars": 216,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>43-vue-router-prog-nav</title>\n </head>"
},
{
"path": "43-vue-programmatic-nav/package.json",
"chars": 748,
"preview": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwme"
},
{
"path": "43-vue-programmatic-nav/src/App.vue",
"chars": 478,
"preview": "<template>\n <section>\n <h1>Rutas con Vue Router</h1>\n <router-link to=\"/\" active-class=\"activo\" tag=\"li"
},
{
"path": "43-vue-programmatic-nav/src/components/Contacto.vue",
"chars": 430,
"preview": "<template>\n <section>\n <h2>Contacto</h2>\n <button @click=\"volverHome()\">Volver a home</button>\n </se"
},
{
"path": "43-vue-programmatic-nav/src/components/Home.vue",
"chars": 40,
"preview": "<template>\n <h2>Home</h2>\n</template>"
},
{
"path": "43-vue-programmatic-nav/src/main.js",
"chars": 254,
"preview": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';"
},
{
"path": "43-vue-programmatic-nav/src/routes.js",
"chars": 199,
"preview": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n "
},
{
"path": "43-vue-programmatic-nav/webpack.config.js",
"chars": 1415,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
},
{
"path": "44-vue-router-dynamic-routes/.babelrc",
"chars": 84,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n"
},
{
"path": "44-vue-router-dynamic-routes/README.md",
"chars": 339,
"preview": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve wit"
},
{
"path": "44-vue-router-dynamic-routes/index.html",
"chars": 222,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>44-vue-router-dynamic-routes</title>\n <"
},
{
"path": "44-vue-router-dynamic-routes/package.json",
"chars": 748,
"preview": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwme"
},
{
"path": "44-vue-router-dynamic-routes/src/App.vue",
"chars": 599,
"preview": "<template>\n <section>\n <h1>Rutas con Vue Router</h1>\n <router-link to=\"/\" active-class=\"activo\" tag=\"li"
},
{
"path": "44-vue-router-dynamic-routes/src/components/Contacto.vue",
"chars": 430,
"preview": "<template>\n <section>\n <h2>Contacto</h2>\n <button @click=\"volverHome()\">Volver a home</button>\n </se"
}
]
// ... and 280 more files (download for full content)
About this extraction
This page contains the full source code of the juanwmedia/vue-firebase GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 480 files (280.3 KB), approximately 91.1k tokens, and a symbol index with 55 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.