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 ================================================ Vue.js

{{ mensaje }}

{{ $data }}
================================================ 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 ================================================ Vue.js

No hay mensaje

 
{{ $data }}
================================================ 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 ================================================ Vue.js 
{{ $data }}
================================================ 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 ================================================ Vue.js 
{{ $data }}
================================================ 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 ================================================ Vue.js

Las tareas

{{ $data }}
================================================ FILE: 13-components-intro/js/main.js ================================================ Vue.component('mis-tareas', { template: ``, 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 ================================================ Vue.js

El ganador es: {{ ganador }}

 
{{ $data }}
================================================ FILE: 14-components-templates/js/main.js ================================================ Vue.component('elegir-ganador', { props: ['listado'], //template: '#elegir-ganador-template', /* template: `

El ganador es: {{ ganador }}

`,*/ 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 ================================================ Vue.js 
{{ $data }}
================================================ 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: `

{{ nombre }}

`, methods: { cambiarProp() { this.nombre = this.nombre.toUpperCase(); } } }); new Vue({ el: 'main', data: { autor: 'Juan Andrés', }, }); ================================================ FILE: 16-prop-validation/index.html ================================================ Vue.js 
{{ $data }}
================================================ 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 ================================================ Vue.js 
{{ $data }}
================================================ FILE: 17-slots-named-slots/js/main.js ================================================ Vue.component('alerta', { props: ['tipo', 'posicion'], template: `
Hola
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus vitae.
`, }); 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 ================================================ Vue.js 
{{ $data }}
================================================ 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 ================================================ Vue.js 
{{ $data }}
================================================ FILE: 19-custom-events/js/main.js ================================================ Vue.component('alerta', { props: ['tipo', 'posicion'], template: `
Cerrar Hola
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus vitae.
`, methods: { ocultarWidget() { this.$emit('ocultar'); } } }); new Vue({ el: 'main', data: { mostrarExito: false, mostrarError: false, mostrarAdvertencia: false, } }); ================================================ FILE: 2-directivas-incluidas/index.html ================================================ Vue.js

Estoy conectado

No puedes entrar.

Eres inmortal.

Puedes entrar.

No estás conectado :(

{{ $data }}
================================================ 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 ================================================ Vue.js 
{{ $data }}
================================================ FILE: 20-component-communication/js/main.js ================================================ const eventBus = new Vue(); Vue.component('listado-productos', { props: ['productos'], template: `
`, methods: { anadirProducto(precio){ eventBus.$emit('anadir', precio); }, eliminarProducto(precio) { eventBus.$emit('eliminar', precio); }, } }); Vue.component('carrito-compra', { template: `

{{ total.toFixed(2) }} €

{{ cantidadProductos }} productos

`, 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 ================================================ Vue.js
Tareas que necesito finalizar ya! 
{{ $data }}
================================================ FILE: 21-components-inside-components/js/main.js ================================================ Vue.component('lista-tareas', { props: ['tareas'], template: `

`, }); Vue.component('tarea', { props: ['tarea'], template: `
  • {{ tarea }}
    • ` }); 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 ================================================ Vue.js 
    {{ $data }}
    ================================================ FILE: 22-dynamic-components/js/main.js ================================================ Vue.component('lista-tareas', { template: `

    `, 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: `
  • {{ tarea }}
    • ` }); Vue.component('contacto', { template: `
    juan@wmedia.es
    `, }); Vue.component('bio', { template: `

    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.

    `, }); new Vue({ el: 'main', data: { seleccionado: 'lista-tareas' } }); ================================================ FILE: 23-custom-input-components/index.html ================================================ Vue.js 
    {{ $data }}
    ================================================ FILE: 23-custom-input-components/js/main.js ================================================ Vue.component('contrasena', { props: ['contrasena'], template: ``, 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 ================================================ Vue.js

    Usuarios de la empresa
    ================================================ 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 ================================================ Vue.js

    Usuarios de mi startup
    ================================================ 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 ================================================ 25-vue-cli
    ================================================ FILE: 25-vue-cli/package.json ================================================ { "name": "25-vue-cli", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ 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 ================================================ 26-single-file-components
    ================================================ FILE: 26-single-file-components/package.json ================================================ { "name": "26-single-file-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 26-single-file-components/src/components/Persona.vue ================================================ ================================================ 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 ================================================ 27-render-function
    ================================================ FILE: 27-render-function/package.json ================================================ { "name": "27-render-function", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 27-render-function/src/components/Elemento.vue ================================================ 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 ================================================ 28-hot-reloading
    ================================================ FILE: 28-hot-reloading/package.json ================================================ { "name": "28-hot-reloading", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 28-hot-reloading/src/components/Tareas.vue ================================================ ================================================ 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 ================================================ 29-scoped-css
    ================================================ FILE: 29-scoped-css/package.json ================================================ { "name": "29-scoped-css", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 29-scoped-css/src/components/Tareas.vue ================================================ ================================================ 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 ================================================ Vue.js
    • {{ index }} - {{ key }}: {{value}} 
    {{ $data }}
    ================================================ 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 ================================================ 30-css-modules
    ================================================ FILE: 30-css-modules/package.json ================================================ { "name": "30-css-modules", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ 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 ================================================ Vue.js

    {{ usuario.nombre }}

    {{ usuario.nombre }}

    ================================================ 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 ================================================ 32-vuex-central-store
    ================================================ FILE: 32-vuex-central-store/package.json ================================================ { "name": "32-vuex-central-store", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 32-vuex-central-store/src/components/Contador.vue ================================================ ================================================ 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 ================================================ 33-vuex-state
    ================================================ FILE: 33-vuex-state/package.json ================================================ { "name": "33-vuex-state", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ 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 ================================================ 34-vuex-getters
    ================================================ FILE: 34-vuex-getters/package.json ================================================ { "name": "34-vuex-getters", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 34-vuex-getters/src/components/TareasRestantes.vue ================================================ ================================================ 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 ================================================ 35-vuex-mutations
    ================================================ FILE: 35-vuex-mutations/package.json ================================================ { "name": "35-vuex-mutations", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 35-vuex-mutations/src/components/Contador.vue ================================================ ================================================ 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 ================================================ 36-vuex-actions
    ================================================ FILE: 36-vuex-actions/package.json ================================================ { "name": "35-vuex-mutations", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 36-vuex-actions/src/components/Contador.vue ================================================ ================================================ 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 ================================================ 37-vuex-modules
    ================================================ FILE: 37-vuex-modules/package.json ================================================ { "name": "37-vuex-modules", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 37-vuex-modules/src/components/Carro.vue ================================================ ================================================ FILE: 37-vuex-modules/src/components/Productos.vue ================================================ ================================================ 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 ================================================ 38-vuex-structure
    ================================================ FILE: 38-vuex-structure/package.json ================================================ { "name": "37-vuex-modules", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 38-vuex-structure/src/components/Carro.vue ================================================ ================================================ FILE: 38-vuex-structure/src/components/Productos.vue ================================================ ================================================ 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 ================================================ Vue.js

    {{ mensaje }}

    {{ $data }}
    ================================================ FILE: 4-vue-devtools/js/main.js ================================================ new Vue({ el: 'main', data: { mensaje: 'Aprendiendo Vue.js :)' } }); ================================================ FILE: 40-vue-router-intro/index.html ================================================ Vue Router

    Aprendiendo Vue-Router

    Portada Contacto
    ================================================ FILE: 40-vue-router-intro/js/main.js ================================================ // ¿Quién 'vive' en cada ruta? const home = Vue.component('Home', { template: '

    Portada

    ', }); const contacto = Vue.component('Contacto', { template: '

    Contacto

    ', }); // 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 ================================================ 41-vue-router-components
    ================================================ FILE: 41-vue-router-components/package.json ================================================ { "name": "41-vue-router-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 41-vue-router-components/src/components/Contacto.vue ================================================ ================================================ FILE: 41-vue-router-components/src/components/Home.vue ================================================ ================================================ 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 ================================================ 42-vue-router-active-links
    ================================================ FILE: 42-vue-router-active-links/package.json ================================================ { "name": "41-vue-router-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 42-vue-router-active-links/src/components/Contacto.vue ================================================ ================================================ FILE: 42-vue-router-active-links/src/components/Home.vue ================================================ ================================================ 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 ================================================ 43-vue-router-prog-nav
    ================================================ FILE: 43-vue-programmatic-nav/package.json ================================================ { "name": "41-vue-router-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 43-vue-programmatic-nav/src/components/Contacto.vue ================================================ ================================================ FILE: 43-vue-programmatic-nav/src/components/Home.vue ================================================ ================================================ 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 ================================================ 44-vue-router-dynamic-routes
    ================================================ FILE: 44-vue-router-dynamic-routes/package.json ================================================ { "name": "41-vue-router-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 44-vue-router-dynamic-routes/src/components/Contacto.vue ================================================ ================================================ FILE: 44-vue-router-dynamic-routes/src/components/Home.vue ================================================ ================================================ FILE: 44-vue-router-dynamic-routes/src/components/Usuario.vue ================================================ ================================================ 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 ================================================ 45-vue-router-reacting
    ================================================ FILE: 45-vue-router-reacting/package.json ================================================ { "name": "41-vue-router-components", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 45-vue-router-reacting/src/components/Contacto.vue ================================================ ================================================ FILE: 45-vue-router-reacting/src/components/Home.vue ================================================ ================================================ FILE: 45-vue-router-reacting/src/components/Usuario.vue ================================================ ================================================ 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 ================================================ 46-vue-router-nested-routes
    ================================================ 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 ", "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 ================================================ ================================================ FILE: 46-vue-router-nested-routes/src/components/Equipo.vue ================================================ ================================================ FILE: 46-vue-router-nested-routes/src/components/EquipoJuan.vue ================================================ ================================================ FILE: 46-vue-router-nested-routes/src/components/Home.vue ================================================ ================================================ 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 ================================================ 47-vue-router-nested-nav
    ================================================ 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 ", "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 ================================================ ================================================ FILE: 47-vue-router-nested-nav/src/components/Equipo.vue ================================================ ================================================ FILE: 47-vue-router-nested-nav/src/components/Home.vue ================================================ ================================================ FILE: 47-vue-router-nested-nav/src/components/Usuario.vue ================================================ ================================================ FILE: 47-vue-router-nested-nav/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 47-vue-router-nested-nav/src/components/UsuarioFotos.vue ================================================ ================================================ 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 ================================================ 48-vue-router-named-routes
    ================================================ 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 ", "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 ================================================ ================================================ FILE: 48-vue-router-named-routes/src/components/Equipo.vue ================================================ ================================================ FILE: 48-vue-router-named-routes/src/components/Home.vue ================================================ ================================================ FILE: 48-vue-router-named-routes/src/components/Usuario.vue ================================================ ================================================ FILE: 48-vue-router-named-routes/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 48-vue-router-named-routes/src/components/UsuarioFotos.vue ================================================ ================================================ 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 ================================================ 49-vue-router-named-views
    ================================================ 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 ", "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 ================================================ ================================================ FILE: 49-vue-router-named-views/src/components/Equipo.vue ================================================ ================================================ FILE: 49-vue-router-named-views/src/components/Home.vue ================================================ ================================================ FILE: 49-vue-router-named-views/src/components/Usuario.vue ================================================ ================================================ FILE: 49-vue-router-named-views/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 49-vue-router-named-views/src/components/UsuarioFotos.vue ================================================ ================================================ 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 ================================================ Vue.js
    • {{ tarea }} 
    {{ $data }}
    ================================================ 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 ================================================ 50-vue-router-redirection
    ================================================ FILE: 50-vue-router-redirect/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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 ================================================ ================================================ FILE: 50-vue-router-redirect/src/components/Equipo.vue ================================================ ================================================ FILE: 50-vue-router-redirect/src/components/Home.vue ================================================ ================================================ FILE: 50-vue-router-redirect/src/components/Usuario.vue ================================================ ================================================ FILE: 50-vue-router-redirect/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 50-vue-router-redirect/src/components/UsuarioFotos.vue ================================================ ================================================ 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 ================================================ 51-vue-router-passing-props
    ================================================ 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 ", "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 ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/Contacto.vue ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/Equipo.vue ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/Home.vue ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/Usuario.vue ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 51-vue-router-passing-props/src/components/UsuarioFotos.vue ================================================ ================================================ 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 ================================================ 52-vue-router-history-mode

    Bienvenid@ a mi super App

    ================================================ 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 ", "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 ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/Contacto.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/Equipo.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/Home.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/Usuario.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 52-vue-router-history-mode/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({ mode: 'history', routes, }); new Vue({ el: '#app', router, render: h => h(App) }) ================================================ FILE: 52-vue-router-history-mode/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'; import NoEncontrado from './components/NoEncontrado.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}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 52-vue-router-history-mode/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: 53-vue-router-global-guard/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 53-vue-router-global-guard/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: 53-vue-router-global-guard/index.html ================================================ 53-vue-router-global-guard

    Bienvenid@ a mi super App

    ================================================ FILE: 53-vue-router-global-guard/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 53-vue-router-global-guard/src/App.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/Contacto.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/Equipo.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/Home.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/Usuario.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 53-vue-router-global-guard/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes, }); router.beforeEach((to, from, next) => { console.log('Acceso a ruta'); next(store.state.auth); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 53-vue-router-global-guard/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'; import NoEncontrado from './components/NoEncontrado.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}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 53-vue-router-global-guard/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 53-vue-router-global-guard/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: 54-vue-router-route-guard/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 54-vue-router-route-guard/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: 54-vue-router-route-guard/index.html ================================================ 54-vue-router-route-guard

    Bienvenid@ a mi super App

    ================================================ FILE: 54-vue-router-route-guard/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 54-vue-router-route-guard/src/App.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/Contacto.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/Equipo.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/Home.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/Usuario.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 54-vue-router-route-guard/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes, }); router.beforeEach((to, from, next) => { console.log('Acceso global a ruta'); next(); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 54-vue-router-route-guard/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'; import NoEncontrado from './components/NoEncontrado.vue'; import {store} from './store'; 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'}, ]}, { beforeEnter: ((to, from, next) => { console.log('Acceso a ruta contacto'); next(store.state.auth); }), path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 54-vue-router-route-guard/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 54-vue-router-route-guard/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: 55-vue-router-component-guard/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 55-vue-router-component-guard/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: 55-vue-router-component-guard/index.html ================================================ 55-vue-router-component-guard

    Bienvenid@ a mi super App

    ================================================ FILE: 55-vue-router-component-guard/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 55-vue-router-component-guard/src/App.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/Contacto.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/Equipo.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/Home.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/Usuario.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 55-vue-router-component-guard/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ routes, }); router.beforeEach((to, from, next) => { console.log('Acceso global a ruta'); next(); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 55-vue-router-component-guard/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'; import NoEncontrado from './components/NoEncontrado.vue'; import {store} from './store'; 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'}, ]}, { beforeEnter: ((to, from, next) => { console.log('Acceso a ruta contacto'); next(store.state.auth); }), path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 55-vue-router-component-guard/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 55-vue-router-component-guard/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: 56-vue-router-meta-field/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 56-vue-router-meta-field/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: 56-vue-router-meta-field/index.html ================================================ 55-vue-router-component-guard

    Bienvenid@ a mi super App

    ================================================ FILE: 56-vue-router-meta-field/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 56-vue-router-meta-field/src/App.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/Contacto.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/Equipo.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/Home.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/Usuario.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 56-vue-router-meta-field/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ routes, }); router.beforeEach((to, from, next) => { console.log('Acceso global a ruta'); if (to.meta.privado) next(store.state.auth); else next(); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 56-vue-router-meta-field/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'; import NoEncontrado from './components/NoEncontrado.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', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 56-vue-router-meta-field/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 56-vue-router-meta-field/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: 57-vue-router-transitions/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 57-vue-router-transitions/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: 57-vue-router-transitions/index.html ================================================ 56-vue-router-transtions

    Bienvenid@ a mi super App

    ================================================ FILE: 57-vue-router-transitions/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 57-vue-router-transitions/src/App.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/Contacto.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/Equipo.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/Home.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/Usuario.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 57-vue-router-transitions/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ routes, }); router.beforeEach((to, from, next) => { console.log('Acceso global a ruta'); if (to.meta.privado) next(store.state.auth); else next(); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 57-vue-router-transitions/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'; import NoEncontrado from './components/NoEncontrado.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', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 57-vue-router-transitions/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 57-vue-router-transitions/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: 58-vue-router-data-fetch/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 58-vue-router-data-fetch/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: 58-vue-router-data-fetch/index.html ================================================ 58-vue-router-data-fetch

    Bienvenid@ a mi super App

    ================================================ FILE: 58-vue-router-data-fetch/package.json ================================================ { "name": "46-vue-router-nested-routes", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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", "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: 58-vue-router-data-fetch/src/App.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/Contacto.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/Equipo.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/Home.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/NoEncontrado.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/Usuario.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/UsuarioBio.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/components/UsuarioFotos.vue ================================================ ================================================ FILE: 58-vue-router-data-fetch/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import {routes} from './routes'; import {store} from './store'; Vue.use(VueRouter); const router = new VueRouter({ routes, }); router.beforeEach((to, from, next) => { console.log('Acceso global a ruta'); if (to.meta.privado) next(store.state.auth); else next(); }); new Vue({ el: '#app', router, store, render: h => h(App) }); ================================================ FILE: 58-vue-router-data-fetch/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'; import NoEncontrado from './components/NoEncontrado.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', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}}, {path: '*', component: NoEncontrado} ]; ================================================ FILE: 58-vue-router-data-fetch/src/store.js ================================================ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { auth: true, }, mutations: { cambiar: (state) => state.auth = !state.auth, } }); ================================================ FILE: 58-vue-router-data-fetch/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: 59-vue-router-srcoll/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 59-vue-router-srcoll/README.md ================================================ # 59-vue-router-srcoll > 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: 59-vue-router-srcoll/index.html ================================================ 59-vue-router-srcoll
    ================================================ FILE: 59-vue-router-srcoll/package.json ================================================ { "name": "59-vue-router-srcoll", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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.5.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.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } } ================================================ FILE: 59-vue-router-srcoll/src/App.vue ================================================ ================================================ FILE: 59-vue-router-srcoll/src/components/Bio.vue ================================================ ================================================ FILE: 59-vue-router-srcoll/src/components/Info.vue ================================================ ================================================ FILE: 59-vue-router-srcoll/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import Info from './components/Info.vue'; import Bio from './components/Bio.vue'; /* Router */ import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ {path: '/', component: Info}, {path: '/bio', component: Bio}, ]; const router = new VueRouter({ routes, mode: 'history', scrollBehavior(to, from, savedPosition) { const position = {}; console.log(to); if (to.hash) { position.selector = to.hash; } else { position.x = 200; position.y = 100; } return position; } }); new Vue({ el: '#app', router, render: h => h(App) }); ================================================ FILE: 59-vue-router-srcoll/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: 6-propiedades-computadas/index.html ================================================ Vue.js
    • {{ tarea.titulo }} 
    {{ $data }}
    ================================================ FILE: 6-propiedades-computadas/js/main.js ================================================ new Vue({ el: 'main', data: { mensaje: 'Hola Mundo :) !', nuevaTarea: null, tareas: [{ titulo: 'Aprender Vue.js', prioridad: true, antiguedad: 23 }, { titulo: 'Aprender ES6', prioridad: false, antiguedad: 135 }, { titulo: 'Publicar algo todos los días', prioridad: true, antiguedad: 378 }, ] }, methods: { agregarTarea() { // this, hace referencia a la instancia Vue this.tareas.unshift({ titulo: this.nuevaTarea, prioridad: false, antiguedad: 0, }); this.nuevaTarea = null; }, }, computed: { tareasConPrioridad() { return this.tareas.filter((tarea) => tarea.prioridad); }, mensajeAlReves() { return this.mensaje.split('').reverse().join(''); }, tareasPorAntiguedad() { return this.tareas.sort((a, b) => b.antiguedad - a.antiguedad); } } }); ================================================ FILE: 60-vue-router-lazy-load/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 60-vue-router-lazy-load/README.md ================================================ # 59-vue-router-srcoll > 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: 60-vue-router-lazy-load/index.html ================================================ 60-vue-router-lazy-load
    ================================================ FILE: 60-vue-router-lazy-load/package.json ================================================ { "name": "59-vue-router-srcoll", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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.5.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.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } } ================================================ FILE: 60-vue-router-lazy-load/src/App.vue ================================================ ================================================ FILE: 60-vue-router-lazy-load/src/components/Bio.vue ================================================ ================================================ FILE: 60-vue-router-lazy-load/src/components/Info.vue ================================================ ================================================ FILE: 60-vue-router-lazy-load/src/main.js ================================================ import Vue from 'vue'; import App from './App.vue'; import Info from './components/Info.vue'; //import Bio from './components/Bio.vue'; const Bio = resolve => { require.ensure(['./components/Bio.vue'], () => { resolve(require('./components/Bio.vue')); }); }; /* Router */ import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ {path: '/', component: Info}, {path: '/bio', component: Bio}, ]; const router = new VueRouter({ routes, mode: 'history', scrollBehavior(to, from, savedPosition) { const position = {}; console.log(to); if (to.hash) { position.selector = to.hash; } else { position.x = 200; position.y = 100; } return position; } }); new Vue({ el: '#app', router, render: h => h(App) }); ================================================ FILE: 60-vue-router-lazy-load/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: 61-vue-directive-hooks/index.html ================================================ Vue Custom Directives

    Hola desde el curso de Vue & Firebase

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur consequuntur cumque dolorum earum inventore ipsa laboriosam maxime nesciunt non quaerat, quas quia ratione veniam voluptatem. Magnam nostrum repellat veritatis!

    Ab animi commodi consequatur culpa deserunt eos, facilis ipsum itaque neque nisi, officia officiis pariatur praesentium quis quos recusandae unde, vero voluptas. Adipisci enim fuga quod sed. Nesciunt, pariatur ullam!

    Animi, et fuga id iste laudantium officia quae recusandae. Amet dolor dolore, dolorem eius eos fugit inventore ipsa, laboriosam magnam, nam omnis quo reprehenderit sint tempore tenetur? Incidunt, iure sunt?

    Aspernatur beatae dignissimos dolore dolores dolorum eveniet explicabo fugiat ipsa minus praesentium quibusdam quis, reprehenderit sed, suscipit tempore ullam unde vero. Atque facere, iste. Assumenda earum ex incidunt laudantium obcaecati?

    A adipisci atque beatae distinctio dolor dolorem facilis harum, libero magni nemo odit possimus reiciendis repudiandae soluta ut vel voluptatum. Amet delectus dolorum nemo obcaecati pariatur praesentium, tempore voluptatem. Repudiandae?

    Non odio tenetur ut. Ad beatae blanditiis, consequuntur corporis debitis dignissimos dolorum ea ex in inventore ipsa iste iure laborum modi nam natus nostrum perferendis, quis, reiciendis repellendus ullam veniam!

    Aspernatur, assumenda culpa cumque dolorem exercitationem fugiat iste molestiae neque nesciunt nisi placeat repellendus, sequi vel velit voluptates? Dolor ea eos error esse eum impedit labore ratione, ullam unde veniam!

    Architecto at beatae consequatur debitis deserunt dolore explicabo illo, impedit ipsam iusto libero magni, nemo, nesciunt nisi nulla odio quasi qui quo ratione tempora temporibus voluptates voluptatibus. Est, natus similique!

    A accusantium dolorem facilis illo in non perferendis quam totam unde voluptatibus. A asperiores dolore minus quo vel, vero? Dolor dolorum inventore magni minus neque nesciunt nobis velit veritatis voluptas.

    Numquam, qui, quo. Ipsam magni saepe velit? A libero nam quae quam! At aut dolore doloribus illum necessitatibus nobis similique sint, velit. Fugiat natus nobis optio, quaerat quisquam ratione temporibus!

    Aspernatur, dolores error esse nihil omnis rem veniam. Consequuntur, deleniti distinctio dolore dolorem et laboriosam maxime nemo neque nobis officiis quidem reiciendis rem suscipit, tempora, vel. Cupiditate eum fugiat laudantium!

    Aliquam amet deleniti dicta dolor dolore dolorum ducimus eligendi error est eveniet excepturi impedit ipsam iste itaque natus nobis nostrum omnis, repellat rerum saepe sunt suscipit veniam veritatis! Exercitationem, quidem?

    Aliquam consequuntur culpa cupiditate deleniti ea eos excepturi illum, itaque maxime natus nihil non pariatur possimus quam, quibusdam quidem, sapiente tempora temporibus totam ut! Commodi harum illo praesentium reiciendis repellat!

    Dicta dolore esse et fugit id laboriosam necessitatibus, officiis quaerat quasi ratione reiciendis tempora tempore voluptas. Facilis fugiat, quis. Esse iste maiores optio voluptas voluptatum? Aperiam deleniti quae repellendus tenetur.

    Ab ad assumenda consectetur consequuntur esse eum ex excepturi expedita explicabo hic maiores, obcaecati odio, quasi quia quod, recusandae repellendus reprehenderit saepe similique temporibus velit vitae voluptas voluptates! Consequatur, sit?

    Cum debitis delectus doloremque labore laudantium natus nihil omnis quidem. Aliquid architecto aut, corporis fugiat iure nobis quia repellendus sapiente soluta unde! Deserunt ducimus expedita impedit ipsam quisquam sed veritatis!

    Alias dolorem earum error expedita impedit ipsam iste, itaque magnam, minus molestiae officia quas qui quisquam rerum sapiente sunt tempora tempore temporibus ullam voluptate! Accusamus aut fuga ipsam non sunt.

    Consectetur exercitationem illo inventore iste nulla optio pariatur quae quasi recusandae tenetur? Atque cum cupiditate earum iusto nulla obcaecati odio omnis praesentium, quidem, quis quo quod repellat tempore, temporibus voluptate?

    Amet at deleniti, distinctio dolor esse excepturi hic ipsum iusto nihil, officiis placeat provident quidem repellat rerum saepe sequi soluta ullam voluptates? In nihil omnis quos rerum suscipit totam voluptate.

    Accusantium amet aperiam debitis dolorem, eius eligendi error esse est excepturi exercitationem expedita facere iure mollitia nisi possimus provident quibusdam quidem quis quod reiciendis sed suscipit tempore temporibus totam vitae?

    Accusamus animi aut cum cupiditate debitis, delectus earum exercitationem explicabo facere id illum, molestiae nostrum numquam obcaecati odit officia optio porro qui quod ratione repellat, similique suscipit unde vel vero.

    Amet aperiam architecto asperiores aspernatur beatae commodi dolore, eligendi, et eum fuga harum illum iusto neque nisi nulla obcaecati odio omnis perferendis perspiciatis reiciendis soluta totam velit. Dolor, fuga, modi?

    Asperiores aspernatur, at commodi cum dolore dolorem error expedita facilis fugiat inventore ipsam, mollitia nam nisi non nulla possimus quis quod ratione repudiandae rerum saepe, similique tempora ut veritatis voluptatibus.

    Amet consequatur enim, esse eum facilis incidunt numquam porro quidem saepe, soluta sunt temporibus voluptates? Amet aspernatur enim fuga minus mollitia odio perferendis quis quod sequi suscipit tempora totam, voluptas?

    Itaque magni modi sint? Deleniti esse et facere hic iure iusto laborum magni nesciunt, nisi odit, provident quasi sunt velit! Aliquid cumque debitis eos eveniet illum in placeat porro. Ea.

    Ab amet atque aut, cupiditate eaque facere id ipsum iste magnam molestiae omnis quam quas quasi qui quos ratione repellat repellendus sequi similique, sunt tenetur unde vel voluptatem! Quis, reiciendis.

    A distinctio odit quisquam! Accusamus, accusantium aperiam atque aut cupiditate ex maxime non provident quibusdam voluptatibus? Aliquid amet cupiditate ea error facere iste maiores maxime, nemo quisquam saepe similique ut.

    Ab atque, enim magnam nihil obcaecati officia rem soluta. Adipisci alias cumque dolor, ea fugit illo, ipsum modi mollitia natus officia provident quae quod reiciendis saepe sint vero voluptatibus. Iure!

    Ab consequuntur laudantium maiores quasi quo, reprehenderit tempore? Accusamus assumenda ducimus ex expedita ipsum necessitatibus, nihil, non nostrum quas recusandae repudiandae, temporibus vel! Inventore molestias, porro praesentium quas unde voluptatibus.

    Accusamus ad dolor, dolorem enim, facere hic non, quae ratione recusandae soluta tempora veritatis! Alias assumenda deleniti enim fuga illo incidunt, laboriosam laudantium libero magnam modi nobis totam vero voluptates.

    Illo iusto nam nemo quisquam, quos sed temporibus? Ad adipisci assumenda blanditiis debitis, dicta, dolor, dolores illo natus necessitatibus nihil praesentium quos suscipit! Cumque dolore eveniet, ex magni neque obcaecati!

    Cum laborum minus molestias obcaecati quae. Amet aspernatur error ipsum iure, minus nostrum odit totam vitae. Aliquam aperiam, beatae cum est eveniet fugit incidunt inventore magni nemo quia, quo repellat.

    Ad commodi dolore earum et molestias nisi quam sint voluptatibus. Id illum obcaecati quia quo voluptates. Alias animi aperiam aut commodi delectus, earum eos neque odio, pariatur perspiciatis rem, tenetur?

    Accusantium amet asperiores delectus dolorem error expedita impedit itaque laboriosam magni maiores natus necessitatibus non, officia officiis provident quas quos reiciendis repellat sapiente, sed similique tempore velit veniam veritatis voluptate.

    Accusantium amet deserunt itaque molestiae sunt voluptates. Animi aut, consectetur deserunt ducimus ipsam natus sunt. Consequuntur, cupiditate dicta eaque, esse inventore modi nam numquam odio quis sapiente sit totam voluptas.

    Ab fugit nostrum perspiciatis sunt! Accusantium assumenda dicta dolorem, et ex, expedita facilis fugit id itaque laboriosam maxime nisi numquam obcaecati optio placeat possimus quaerat unde voluptatem. Amet, id mollitia.

    Laboriosam, odit quod! Ab animi blanditiis culpa cumque distinctio dolorem earum harum illo in, maxime modi molestiae nemo numquam odit rem saepe sapiente soluta unde, voluptatem voluptatibus! Accusamus nam, rerum?

    Architecto blanditiis deleniti ducimus facilis illo modi officiis quaerat repellat vel, voluptatum. Alias, aliquam amet cum cumque expedita odit quasi quis quod reprehenderit saepe sunt suscipit tempore ullam voluptates voluptatibus?

    Aliquam harum illo ipsum obcaecati praesentium quod tempora veniam. Adipisci aperiam cumque harum nemo rerum tempora voluptate. Id mollitia nihil nisi veniam vitae? Dicta id nisi qui quia recusandae repellat.

    Beatae dolorum explicabo impedit libero, magni minus necessitatibus quidem recusandae tempore? Atque, delectus dolorem ea ex expedita harum ipsum itaque maxime nihil omnis perferendis quae, qui quisquam saepe temporibus unde!

    ================================================ FILE: 61-vue-directive-hooks/js/main.js ================================================ Vue.directive('fijar', { bind(el, binding) { console.log(el,binding); el.style.position = 'fixed'; if (binding.expression) { el.style.top = binding.expression + 'px'; } if (binding.arg) { let color = 'goldenrod'; let modificadores = Object.keys(binding.modifiers); if (modificadores.length > 0) { color = modificadores[0]; } el.style.backgroundColor = color; } } }); new Vue({ el: '#app', }); ================================================ FILE: 62-vue-directive-object-literals/index.html ================================================ Vue Custom Directives

    Hola desde el curso de Vue & Firebase

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur consequuntur cumque dolorum earum inventore ipsa laboriosam maxime nesciunt non quaerat, quas quia ratione veniam voluptatem. Magnam nostrum repellat veritatis!

    Ab animi commodi consequatur culpa deserunt eos, facilis ipsum itaque neque nisi, officia officiis pariatur praesentium quis quos recusandae unde, vero voluptas. Adipisci enim fuga quod sed. Nesciunt, pariatur ullam!

    Animi, et fuga id iste laudantium officia quae recusandae. Amet dolor dolore, dolorem eius eos fugit inventore ipsa, laboriosam magnam, nam omnis quo reprehenderit sint tempore tenetur? Incidunt, iure sunt?

    Aspernatur beatae dignissimos dolore dolores dolorum eveniet explicabo fugiat ipsa minus praesentium quibusdam quis, reprehenderit sed, suscipit tempore ullam unde vero. Atque facere, iste. Assumenda earum ex incidunt laudantium obcaecati?

    A adipisci atque beatae distinctio dolor dolorem facilis harum, libero magni nemo odit possimus reiciendis repudiandae soluta ut vel voluptatum. Amet delectus dolorum nemo obcaecati pariatur praesentium, tempore voluptatem. Repudiandae?

    Non odio tenetur ut. Ad beatae blanditiis, consequuntur corporis debitis dignissimos dolorum ea ex in inventore ipsa iste iure laborum modi nam natus nostrum perferendis, quis, reiciendis repellendus ullam veniam!

    Aspernatur, assumenda culpa cumque dolorem exercitationem fugiat iste molestiae neque nesciunt nisi placeat repellendus, sequi vel velit voluptates? Dolor ea eos error esse eum impedit labore ratione, ullam unde veniam!

    Architecto at beatae consequatur debitis deserunt dolore explicabo illo, impedit ipsam iusto libero magni, nemo, nesciunt nisi nulla odio quasi qui quo ratione tempora temporibus voluptates voluptatibus. Est, natus similique!

    A accusantium dolorem facilis illo in non perferendis quam totam unde voluptatibus. A asperiores dolore minus quo vel, vero? Dolor dolorum inventore magni minus neque nesciunt nobis velit veritatis voluptas.

    Numquam, qui, quo. Ipsam magni saepe velit? A libero nam quae quam! At aut dolore doloribus illum necessitatibus nobis similique sint, velit. Fugiat natus nobis optio, quaerat quisquam ratione temporibus!

    Aspernatur, dolores error esse nihil omnis rem veniam. Consequuntur, deleniti distinctio dolore dolorem et laboriosam maxime nemo neque nobis officiis quidem reiciendis rem suscipit, tempora, vel. Cupiditate eum fugiat laudantium!

    Aliquam amet deleniti dicta dolor dolore dolorum ducimus eligendi error est eveniet excepturi impedit ipsam iste itaque natus nobis nostrum omnis, repellat rerum saepe sunt suscipit veniam veritatis! Exercitationem, quidem?

    Aliquam consequuntur culpa cupiditate deleniti ea eos excepturi illum, itaque maxime natus nihil non pariatur possimus quam, quibusdam quidem, sapiente tempora temporibus totam ut! Commodi harum illo praesentium reiciendis repellat!

    Dicta dolore esse et fugit id laboriosam necessitatibus, officiis quaerat quasi ratione reiciendis tempora tempore voluptas. Facilis fugiat, quis. Esse iste maiores optio voluptas voluptatum? Aperiam deleniti quae repellendus tenetur.

    Ab ad assumenda consectetur consequuntur esse eum ex excepturi expedita explicabo hic maiores, obcaecati odio, quasi quia quod, recusandae repellendus reprehenderit saepe similique temporibus velit vitae voluptas voluptates! Consequatur, sit?

    Cum debitis delectus doloremque labore laudantium natus nihil omnis quidem. Aliquid architecto aut, corporis fugiat iure nobis quia repellendus sapiente soluta unde! Deserunt ducimus expedita impedit ipsam quisquam sed veritatis!

    Alias dolorem earum error expedita impedit ipsam iste, itaque magnam, minus molestiae officia quas qui quisquam rerum sapiente sunt tempora tempore temporibus ullam voluptate! Accusamus aut fuga ipsam non sunt.

    Consectetur exercitationem illo inventore iste nulla optio pariatur quae quasi recusandae tenetur? Atque cum cupiditate earum iusto nulla obcaecati odio omnis praesentium, quidem, quis quo quod repellat tempore, temporibus voluptate?

    Amet at deleniti, distinctio dolor esse excepturi hic ipsum iusto nihil, officiis placeat provident quidem repellat rerum saepe sequi soluta ullam voluptates? In nihil omnis quos rerum suscipit totam voluptate.

    Accusantium amet aperiam debitis dolorem, eius eligendi error esse est excepturi exercitationem expedita facere iure mollitia nisi possimus provident quibusdam quidem quis quod reiciendis sed suscipit tempore temporibus totam vitae?

    Accusamus animi aut cum cupiditate debitis, delectus earum exercitationem explicabo facere id illum, molestiae nostrum numquam obcaecati odit officia optio porro qui quod ratione repellat, similique suscipit unde vel vero.

    Amet aperiam architecto asperiores aspernatur beatae commodi dolore, eligendi, et eum fuga harum illum iusto neque nisi nulla obcaecati odio omnis perferendis perspiciatis reiciendis soluta totam velit. Dolor, fuga, modi?

    Asperiores aspernatur, at commodi cum dolore dolorem error expedita facilis fugiat inventore ipsam, mollitia nam nisi non nulla possimus quis quod ratione repudiandae rerum saepe, similique tempora ut veritatis voluptatibus.

    Amet consequatur enim, esse eum facilis incidunt numquam porro quidem saepe, soluta sunt temporibus voluptates? Amet aspernatur enim fuga minus mollitia odio perferendis quis quod sequi suscipit tempora totam, voluptas?

    Itaque magni modi sint? Deleniti esse et facere hic iure iusto laborum magni nesciunt, nisi odit, provident quasi sunt velit! Aliquid cumque debitis eos eveniet illum in placeat porro. Ea.

    Ab amet atque aut, cupiditate eaque facere id ipsum iste magnam molestiae omnis quam quas quasi qui quos ratione repellat repellendus sequi similique, sunt tenetur unde vel voluptatem! Quis, reiciendis.

    A distinctio odit quisquam! Accusamus, accusantium aperiam atque aut cupiditate ex maxime non provident quibusdam voluptatibus? Aliquid amet cupiditate ea error facere iste maiores maxime, nemo quisquam saepe similique ut.

    Ab atque, enim magnam nihil obcaecati officia rem soluta. Adipisci alias cumque dolor, ea fugit illo, ipsum modi mollitia natus officia provident quae quod reiciendis saepe sint vero voluptatibus. Iure!

    Ab consequuntur laudantium maiores quasi quo, reprehenderit tempore? Accusamus assumenda ducimus ex expedita ipsum necessitatibus, nihil, non nostrum quas recusandae repudiandae, temporibus vel! Inventore molestias, porro praesentium quas unde voluptatibus.

    Accusamus ad dolor, dolorem enim, facere hic non, quae ratione recusandae soluta tempora veritatis! Alias assumenda deleniti enim fuga illo incidunt, laboriosam laudantium libero magnam modi nobis totam vero voluptates.

    Illo iusto nam nemo quisquam, quos sed temporibus? Ad adipisci assumenda blanditiis debitis, dicta, dolor, dolores illo natus necessitatibus nihil praesentium quos suscipit! Cumque dolore eveniet, ex magni neque obcaecati!

    Cum laborum minus molestias obcaecati quae. Amet aspernatur error ipsum iure, minus nostrum odit totam vitae. Aliquam aperiam, beatae cum est eveniet fugit incidunt inventore magni nemo quia, quo repellat.

    Ad commodi dolore earum et molestias nisi quam sint voluptatibus. Id illum obcaecati quia quo voluptates. Alias animi aperiam aut commodi delectus, earum eos neque odio, pariatur perspiciatis rem, tenetur?

    Accusantium amet asperiores delectus dolorem error expedita impedit itaque laboriosam magni maiores natus necessitatibus non, officia officiis provident quas quos reiciendis repellat sapiente, sed similique tempore velit veniam veritatis voluptate.

    Accusantium amet deserunt itaque molestiae sunt voluptates. Animi aut, consectetur deserunt ducimus ipsam natus sunt. Consequuntur, cupiditate dicta eaque, esse inventore modi nam numquam odio quis sapiente sit totam voluptas.

    Ab fugit nostrum perspiciatis sunt! Accusantium assumenda dicta dolorem, et ex, expedita facilis fugit id itaque laboriosam maxime nisi numquam obcaecati optio placeat possimus quaerat unde voluptatem. Amet, id mollitia.

    Laboriosam, odit quod! Ab animi blanditiis culpa cumque distinctio dolorem earum harum illo in, maxime modi molestiae nemo numquam odit rem saepe sapiente soluta unde, voluptatem voluptatibus! Accusamus nam, rerum?

    Architecto blanditiis deleniti ducimus facilis illo modi officiis quaerat repellat vel, voluptatum. Alias, aliquam amet cum cumque expedita odit quasi quis quod reprehenderit saepe sunt suscipit tempore ullam voluptates voluptatibus?

    Aliquam harum illo ipsum obcaecati praesentium quod tempora veniam. Adipisci aperiam cumque harum nemo rerum tempora voluptate. Id mollitia nihil nisi veniam vitae? Dicta id nisi qui quia recusandae repellat.

    Beatae dolorum explicabo impedit libero, magni minus necessitatibus quidem recusandae tempore? Atque, delectus dolorem ea ex expedita harum ipsum itaque maxime nihil omnis perferendis quae, qui quisquam saepe temporibus unde!

    ================================================ FILE: 62-vue-directive-object-literals/js/main.js ================================================ Vue.directive('fijar', { bind(el, binding) { console.log(binding.value); /* el.style.position = 'fixed'; if (binding.expression) { el.style.top = binding.expression + 'px'; } if (binding.arg) { let color = 'goldenrod'; let modificadores = Object.keys(binding.modifiers); if (modificadores.length > 0) { color = modificadores[0]; } el.style.backgroundColor = color; }*/ } }); new Vue({ el: '#app', }); ================================================ FILE: 64-mixins-intro/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 64-mixins-intro/README.md ================================================ # 63-mixins-intro > 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: 64-mixins-intro/index.html ================================================ 63-mixins-intro
    ================================================ FILE: 64-mixins-intro/package.json ================================================ { "name": "63-mixins-intro", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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" }, "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: 64-mixins-intro/src/App.vue ================================================ ================================================ FILE: 64-mixins-intro/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) ================================================ FILE: 64-mixins-intro/src/mixins.js ================================================ export const mixin = { data () { return { aprender: [ {nombre: 'Ionic 7'}, {nombre: 'Node'}, {nombre: 'MongoDB'}, {nombre: 'Angular 3'}, {nombre: 'Laravel'}, ], nuevaTecnologia: null, } }, methods: { agregarTecnologia() { this.aprender.unshift({ nombre: this.nuevaTecnologia, }); this.nuevaTecnologia = null; } } }; ================================================ FILE: 64-mixins-intro/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: 65-mixins-merge/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 65-mixins-merge/README.md ================================================ # 63-mixins-intro > 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: 65-mixins-merge/index.html ================================================ 65-mixins-merge
    ================================================ FILE: 65-mixins-merge/package.json ================================================ { "name": "63-mixins-intro", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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" }, "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: 65-mixins-merge/src/App.vue ================================================ ================================================ FILE: 65-mixins-merge/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) ================================================ FILE: 65-mixins-merge/src/mixins.js ================================================ export const mixin = { created() { console.log('Created desde el mixin'); this.saludar(); }, data () { return { aprender: [ {nombre: 'Ionic 7'}, {nombre: 'Node'}, {nombre: 'MongoDB'}, {nombre: 'Angular 3'}, {nombre: 'Laravel'}, ], nuevaTecnologia: null, } }, methods: { agregarTecnologia() { this.aprender.unshift({ nombre: this.nuevaTecnologia, }); this.nuevaTecnologia = null; }, saludar() { alert('Hola desde el mixin'); } } }; ================================================ FILE: 65-mixins-merge/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: 66-global-mixins/.babelrc ================================================ { "presets": [ ["latest", { "es2015": { "modules": false } }] ] } ================================================ FILE: 66-global-mixins/README.md ================================================ # 63-mixins-intro > 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: 66-global-mixins/index.html ================================================ 66-global-mixins
    ================================================ FILE: 66-global-mixins/package.json ================================================ { "name": "63-mixins-intro", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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" }, "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: 66-global-mixins/src/App.vue ================================================ ================================================ FILE: 66-global-mixins/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App), nombre: 'Instancia principal', }); ================================================ FILE: 66-global-mixins/src/mixins.js ================================================ // Global mixin import Vue from 'vue'; Vue.mixin({ created() { //console.info('Hola desde mixin global'); this.saludar(this.$options.nombre) }, methods: { saludar(nombre) { alert(`Hola desde ${nombre}!`); } } }); // Local mixin export const mixin = { created() { console.log('Created desde el mixin'); }, data () { return { aprender: [ {nombre: 'Ionic 7'}, {nombre: 'Node'}, {nombre: 'MongoDB'}, {nombre: 'Angular 3'}, {nombre: 'Laravel'}, ], nuevaTecnologia: null, } }, methods: { agregarTecnologia() { this.aprender.unshift({ nombre: this.nuevaTecnologia, }); this.nuevaTecnologia = null; }, } }; ================================================ FILE: 66-global-mixins/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: 67-vue-filters/.babelrc ================================================ { "presets": [ ["env", { "modules": false }] ] } ================================================ FILE: 67-vue-filters/README.md ================================================ # 67-vue-filters > 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: 67-vue-filters/index.html ================================================ 67-vue-filters
    ================================================ FILE: 67-vue-filters/package.json ================================================ { "name": "67-vue-filters", "description": "A Vue.js project", "version": "1.0.0", "author": "@juanwmedia ", "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.3.3" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" } } ================================================ FILE: 67-vue-filters/src/App.vue ================================================ ================================================ FILE: 67-vue-filters/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' Vue.filter('mayusculas', function(valor){ return valor.toUpperCase(); }); new Vue({ el: '#app', render: h => h(App) }); ================================================ FILE: 67-vue-filters/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: 68-form-input-basic/index.html ================================================ Vue

    Formulario



    {{ $data }}
    ================================================ FILE: 69-form-value-bindings/index.html ================================================ Vue 
    {{ $data }}
    ================================================ FILE: 7-filtros/index.html ================================================ Vue.js
    • {{ juego.titulo | alReves }} 
    {{ $data }}
    ================================================ FILE: 7-filtros/js/main.js ================================================ Vue.filter('alReves',(valor) => valor.split('').reverse().join('')); new Vue({ el: 'main', data: { busqueda: '', minimo: 5, juegos: [{ titulo: 'Battlefield 1', genero: 'FPS', puntuacion: 9 }, { titulo: 'Civilization VI', genero: 'Estrategia', puntuacion: 10 }, { titulo: 'Resident Evil 7', genero: 'Survival Horror', puntuacion: 7, }, ] }, computed: { mejoresJuegos() { return this.juegos.filter((juego) => juego.puntuacion >= this.minimo); }, buscarJuego() { return this.juegos.filter((juego) => juego.titulo.includes(this.busqueda)); } } }); ================================================ FILE: 70-form-input-modifiers/index.html ================================================ Vue

    Formulario

    {{ $data }}
    ================================================ FILE: 71-firebase-agregar/index.html ================================================ Vue

    ================================================ FILE: 72-firebase-leer/index.html ================================================ Vue

    Mensajes

    • {{ mensaje.mensaje}} ({{ mensaje.username }})
    ================================================ FILE: 73-firebase-actualizar/index.html ================================================ Vue

    Mensajes

    • {{ mensaje.mensaje}} ({{ mensaje.username }})
    ================================================ FILE: 74-firebase-eliminar/index.html ================================================ Vue

    Mensajes

    • {{ mensaje.mensaje}} ({{ mensaje.username }})
    ================================================ FILE: 75-firebase-transactions/index.html ================================================ Vue

    Datos del usuario

    Username:
    {{ datosPerfil.username }}
    Ciudad:
    {{ datosPerfil.ciudad }}
    País:
    {{ datosPerfil.pais }}
    Likes:
    {{ datosPerfil.likes }}
    ================================================ FILE: 76-firebase-push-agregar/index.html ================================================ Vue
    ================================================ FILE: 77-firebase-listas-eventos/index.html ================================================ Vue
    ================================================ FILE: 78-firebase-ordenar/index.html ================================================ Vue
    ================================================ FILE: 79-firebase-filtrar/index.html ================================================ Vue
    ================================================ FILE: 8-instancia-vue/index.html ================================================ Vue.js 

    {{ $data }}

    {{ mensaje }}

    ================================================ FILE: 8-instancia-vue/js/main.js ================================================ const vm1 = new Vue({ el: 'main', data: { mensaje: 'Instancia Vue 1', }, beforeUpdate() { console.log('BeforeUpdate: ', this.mensaje); }, updated() { console.log('Update: ', this.mensaje); }, methods: { alReves(){ this.mensaje = this.mensaje.split('').reverse().join(''); } }, computed: { mensajeMayusculas(){ return this.mensaje.toUpperCase(); } } }); const vm2 = new Vue({ el: '#app', data: { mensaje: 'Instancia Vue 2', } }); ================================================ FILE: 9-data-binding-atributos-clases/index.html ================================================ Vue.js

    Tareas

    {{ tareasCompletadas.length }} completadas

    • {{ tarea.titulo }} 
    {{ $data }}
    ================================================ FILE: 9-data-binding-atributos-clases/js/main.js ================================================ new Vue({ el: 'main', data: { tareas: [ {titulo: 'Hacer la compra', completado: false}, {titulo: 'Aprender Vue.js', completado: false}, {titulo: 'Aprender Firebase', completado: false}, {titulo: 'Dominar ES6', completado: false}, {titulo: 'Salir a correr', completado: false}, ] }, methods: { completarTarea(tarea) { tarea.completado = !tarea.completado; } }, computed: { tareasCompletadas() { return this.tareas.filter((tarea) => tarea.completado); } } }); ================================================ FILE: README.md ================================================ # Aprende Vue2 y Firebase paso a paso Curso 100% gratuito. La mejor forma de dar el salto a JavaScript moderno. ## Repositorio del curso Este es el repositorio del curso. En el encontrarás todos los documentos y archivos que uso en cada una de las lecciones. Puedes clonarlo o descargarlo para utilizarlo en tu entorno de desarollo. ### Más información * [vue.wmedia.es](http://vue.wmedia.es/) - Landing page del curso. * [Curso](http://wmedia.teachable.com/) - Apúntate al curso