├── components
    ├── SlotComponents
    │   └── buttonComp.js
    ├── DirectiveOnce.js
    ├── DirectivePre.js
    ├── DirectiveHtml.js
    ├── HelloWorld.js
    ├── DirectiveSlot.js
    ├── DirectiveShow.js
    ├── SaludarComp.js
    ├── DirectiveIf.js
    ├── computedComponents
    │   ├── ComputedPropertiesGetSet.js
    │   └── ComputedProperties.js
    ├── movies
    │   ├── MovieFav.js
    │   ├── SearchComp.js
    │   ├── MovieDetails.js
    │   ├── MovieComp.js
    │   └── index.js
    ├── DirectiveModel.js
    ├── VueDirectives.js
    ├── DirectiveOn.js
    ├── DirectiveFor.js
    └── PropsComp.js
├── movies.text
├── computed.html
├── index2.html
├── movie_fav.css
├── movies.html
└── index.html


/components/SlotComponents/buttonComp.js:
--------------------------------------------------------------------------------
1 | let buttonComp = {
2 |     template: `<button>
3 |                 <slot name="action">Abrir</slot>
4 |                 <slot name="element">Ventana</slot>
5 |         </button>`
6 | }


--------------------------------------------------------------------------------
/components/DirectiveOnce.js:
--------------------------------------------------------------------------------
 1 | let DirectiveOnce = {
 2 |     template: `<div>
 3 |             <h2 v-text="title" v-once></h2>
 4 |         </div>
 5 |         `,
 6 |     data () {
 7 |         return {
 8 |             title: 'Directiva v-once',
 9 |         }
10 |     },
11 | }


--------------------------------------------------------------------------------
/components/DirectivePre.js:
--------------------------------------------------------------------------------
 1 | let DirectivePre = {
 2 |     template: `<div>
 3 |             <h2 v-text="title"></h2>
 4 |             <p v-pre>{{ title }}</p>
 5 |         </div>
 6 |         `,
 7 |     data () {
 8 |         return {
 9 |             title: 'Directiva v-pre',
10 |         }
11 |     },
12 | }


--------------------------------------------------------------------------------
/components/DirectiveHtml.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let DirectiveHtml = {
 3 |     template: `<div>
 4 |             <h1 v-text="title"></h1>
 5 |             <p v-html="message"></p>
 6 |         </div>
 7 |         `,
 8 |     data () {
 9 |         return {
10 |             title: 'Directiva v-html',
11 |             message: '<b>Hola desde directive html</b>',
12 |         }
13 |     },
14 | }


--------------------------------------------------------------------------------
/components/HelloWorld.js:
--------------------------------------------------------------------------------
 1 | Vue.component('hello-world', {
 2 |     template:`<header>
 3 |                 <h1>{{ title }}</h1>
 4 |                 <h3>{{ message }}</h3>
 5 |             </header>  
 6 |                 `,
 7 |     data() {
 8 |         return {
 9 |             title: 'Hola Mundo',
10 |             message: 'Bienvenido al curso de Vuejs'
11 |         }
12 |     }
13 | })
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/components/DirectiveSlot.js:
--------------------------------------------------------------------------------
 1 | let DirectiveSlot = {
 2 |     template: `<div>
 3 |             <h2 v-text="title"></h2>
 4 |             <button-comp>
 5 |                 <template #action>
 6 |                     Cerrar
 7 |                 </template>
 8 |                 <template #element>
 9 |                     Modal
10 |                 </template>
11 |             </button-comp>
12 |         </div>
13 |         `,
14 |     data () {
15 |         return {
16 |             title: 'Directiva v-slot',
17 |         }
18 |     },
19 |     components: {
20 |         buttonComp,
21 |     }
22 |     
23 | }


--------------------------------------------------------------------------------
/components/DirectiveShow.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let DirectiveShow = {
 3 |     template: `<div>
 4 |             <h1 v-text="title"></h1>
 5 |             <p v-show="mostrar" v-html="message"></p>
 6 |             <p v-show="user.permission">El Usuario Tiene Permiso para ver esto</p>
 7 |             <p v-show="!user.permission">El Usuario Tiene No Tiene Permisos</p>
 8 | 
 9 |         </div>
10 |         `,
11 |     data () {
12 |         return {
13 |             title: 'Directiva v-show',
14 |             message: '<b>Hola desde directive v-show</b>',
15 |             mostrar: true,
16 |             user: {
17 |                 permission: false,
18 |             }
19 |         }
20 |     }
21 | }


--------------------------------------------------------------------------------
/movies.text:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         id: 1,
 4 |         title: 'Titanic',
 5 |         synopsis: 'Durante las labores de recuperación de los restos del famoso trasatlántico Titanic, una anciana norteamericana se pone en contacto con la expedición para acudir…',
 6 |         cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/zraTDtulFw2wrpyuYf646k95MNq.jpg'
 7 |     },
 8 |     {
 9 |         id: 2,
10 |         title: 'El Rey León',
11 |         synopsis: 'Un remake del clásico animado de Disney de 1994 El rey león que estará dirigido por Jon Favreu. Simba (Donald Glover) es el hijo del rey de los leones, Mufasa…',
12 |         cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/3A8ca8WOBacCRujSKJ2tCVKsieQ.jpg'
13 |     },
14 |     {
15 |         id: 3,
16 |         title: 'Toy Story',
17 |         cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/uMZqKhT4YA6mqo2yczoznv7IDmv.jpg'
18 |     }
19 | ]


--------------------------------------------------------------------------------
/computed.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Propiedades Computadas</title>
 8 | </head>
 9 | <body>
10 |     <div id="app">
11 |         <computed-properties></computed-properties>
12 |         <computed-properties-get-set></computed-properties-get-set>
13 |     </div>
14 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
15 |     <script src="./components/computedComponents/ComputedProperties.js"></script>
16 |     <script src="./components/computedComponents/ComputedPropertiesGetSet.js"></script>
17 |     <script>
18 |         let vm = new Vue({
19 |             el: '#app',
20 |             data () {
21 |                 return {
22 |                     title: 'Computed Properties'
23 |                 }
24 |             }
25 |         })
26 |     </script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/components/SaludarComp.js:
--------------------------------------------------------------------------------
 1 | var SaludarComp = ('formuario-vue',{
 2 |     template: `
 3 |             <div @click="upps">
 4 |                 <h2>Saludo para tí</h2>
 5 |                 <label @click.stop="" for="nombre">Nombre:</label>
 6 |                 <input @click.stop="" type="text" name="nombre" id="nombre">
 7 |                 <label @click.stop="" for="pais">Pais:</label>
 8 |                 <input @click.stop="" type="text" name="pais" id="pais">
 9 |                 <button @click.stop="saludar">Saludar</button>
10 |             </div>
11 |                 `,
12 |     data(){
13 |         return {
14 |  
15 |         }
16 |     },
17 |     methods: {
18 |         saludar(){
19 |             var name = document.getElementById('nombre').value;
20 |             var pais = document.getElementById('pais').value;
21 |             alert('Hola mi nombre es '+name+' y soy de '+pais);
22 |         },
23 |         hey () {
24 |             alert('Hey')
25 |         },
26 |         upps(){
27 |             alert('No diste click en el botón');
28 |         }
29 |     }
30 | });


--------------------------------------------------------------------------------
/components/DirectiveIf.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let DirectiveIf = {
 3 |     template: `<div>
 4 |             <h1 v-text="title"></h1>
 5 |             <p v-if="mostrar" v-html="message"></p>
 6 |             <h1>Uso de v-if / v-else</h1>
 7 |             <p v-if="user.permission">El Usuario Tiene Permiso para ver esto</p>
 8 |             <p v-else>El Usuario Tiene No Tiene Permisos</p>
 9 |             <h1>Uso de v-if / v-else-if / v-else</h1>
10 |             <p v-if="user.permission && user.vip">El Usuario Tiene Permiso y es VIP</p>
11 |             <p v-else-if="user.permission">El Usuario Tiene Permiso</p>
12 |             <p v-else-if="user.vip">El Usuario es VIP</p>
13 |             <p v-else>El Usuario No tiene Permisos ni es VIP</p>
14 | 
15 |         </div>
16 |         `,
17 |     data () {
18 |         return {
19 |             title: 'Directiva v-if',
20 |             message: '<b>Hola desde directive v-if</b>',
21 |             mostrar: true,
22 |             user: {
23 |                 permission: false,
24 |                 vip: true,
25 |             }
26 |         }
27 |     }
28 | }


--------------------------------------------------------------------------------
/components/computedComponents/ComputedPropertiesGetSet.js:
--------------------------------------------------------------------------------
 1 | Vue.component('computed-properties-get-set', {
 2 |     template: `
 3 |         <div>
 4 |             <h1>Computed Properties con Getter y Setter</h1>
 5 |             <p>Hola Soy {{ fullName }}</p>
 6 |             <p>Y tengo {{  userAge }} años</p>
 7 |         </div>
 8 |     `,
 9 |     data () {
10 |         return {
11 |             user: {
12 |                 name: 'Jesus',
13 |                 lastName: 'Lopez',
14 |                 year: '1992'
15 |             }
16 |         }
17 |     },
18 |     computed: {
19 |         fullName: {
20 |             get () {
21 |                 return `${ this.user.name } ${ this.user.lastName }`
22 |             },
23 |             set (newValue) {
24 |                 let name = newValue.split(' ')
25 | 
26 |                 this.user.name = name[0]
27 |                 this.user.lastName = name[1]
28 |             }
29 |         },
30 |         userAge () {
31 |             let date = new Date()
32 |             let currentYear = date.getFullYear()
33 | 
34 |             return currentYear - Number(this.user.year)
35 |         }
36 |         
37 |     },
38 |     
39 | })


--------------------------------------------------------------------------------
/components/movies/MovieFav.js:
--------------------------------------------------------------------------------
 1 | let MovieFav = {
 2 |     template: `
 3 |         <div v-show="show" class="movieFav-wrapper">
 4 |             <div :id="'fav-'+ _uid" class="movieFav">
 5 |                 
 6 |             </div>
 7 |         </div>
 8 |     `,
 9 |     
10 |     props: {
11 |         show: {
12 |             type: Boolean,
13 |             default () {
14 |                 return false
15 |             }
16 |         }
17 |     },
18 |     beforeCreate() {
19 |         console.log('Esto es antes de que se cree')
20 |     },
21 |     created() {
22 |          console.log('Ya creado')
23 |     },
24 |     beforeMount() {
25 |         console.log('Antes de montarse')
26 |     },
27 |     mounted() {
28 |         let vm = this
29 |         let $element = document.getElementById(`fav-${this._uid}`)
30 |         $element.addEventListener('animationend', function () {
31 |             vm.$emit('update:show', false)
32 |         })
33 |     },
34 |     beforeUpdate() {
35 |         
36 |     },
37 |     updated() {
38 |         
39 |     },
40 |     beforeDestroy() {
41 |         console.log('Antes de destruirse')
42 |     },
43 |     destroyed() {
44 |         console.log('Ya destruido')
45 |     },
46 | }


--------------------------------------------------------------------------------
/components/DirectiveModel.js:
--------------------------------------------------------------------------------
 1 | let DirectiveModel = {
 2 |     template: `<div>
 3 |             <h1 v-text="title"></h1>
 4 |             <p  v-html="message"></p>
 5 |             <input type="text" v-model="inputText">
 6 | 
 7 |             <h2>Tipo Checkbox</h2>
 8 |             <label>
 9 |                 <input type="checkbox"  v-model="checked">
10 |                 Activado
11 |             </label>
12 | 
13 |             <h2>Peliculas</h2>
14 | 
15 |             <label v-for="(movie, key) in movies" :key="key">
16 |                 <input :value="movie" type="checkbox"  v-model="favoritesMovies">
17 |                 {{ movie }}
18 |             </label>
19 | 
20 |             <div v-show="favoritesMovies.length > 0">
21 |                 <h2>Peliculas Favoritas</h2>
22 |                 <ul>
23 |                     <li v-for="(movie, key) in favoritesMovies" :key="key" v-text="movie"></li>
24 |                 </ul>
25 |             </div>
26 | 
27 |         </div>
28 |         `,
29 |     data () {
30 |         return {
31 |             title: 'Directiva v-model',
32 |             message: '<b>Hola desde directive v-model</b>',
33 |             inputText: 'Data del input',
34 |             checked: false,
35 |             favoritesMovies: [],
36 |             movies: ['Buscando a Nemo', 'Titanic', 'Toy Storie']
37 |         }
38 |     }
39 | }


--------------------------------------------------------------------------------
/components/computedComponents/ComputedProperties.js:
--------------------------------------------------------------------------------
 1 | Vue.component('computed-properties', {
 2 |     template: `
 3 |         <div>
 4 |             <h1>Computed Properties</h1>
 5 |             <p>Hola Soy {{ fullName }}</p>
 6 |             <p>Y tengo {{  userAge }} años</p>
 7 |         </div>
 8 |     `,
 9 |     data () {
10 |         return {
11 |             user: {
12 |                 name: 'Jesus',
13 |                 lastName: 'Lopez',
14 |                 year: '1992'
15 |             }
16 |         }
17 |     },
18 |     computed: {
19 |         fullName () {
20 |             return `${ this.user.name } ${ this.user.lastName }`
21 |         },
22 |         userAge () {
23 |             
24 |             // EXPLICACIÓN JEJEJE 
25 |             
26 |             let date = new Date() 
27 |             // new Date() es un Objeto JS
28 |             // nos retorna el tiempo actual 
29 |             
30 |             let currentYear = date.getFullYear()
31 |             // con con .getFullYaer() es un metodo
32 |             // del Objeto Date
33 |             // que nos retorna el año de la fecha que instanciamos
34 |             
35 |             return currentYear - Number(this.user.year)
36 | 
37 |         }
38 |         
39 |     },
40 |     methods: {
41 |         nombreCompleto () {
42 |             return `${ this.user.name } ${ this.user.lastName }`
43 |         }
44 |     }
45 | })


--------------------------------------------------------------------------------
/components/VueDirectives.js:
--------------------------------------------------------------------------------
 1 | 
 2 | Vue.component('vue-directives', {
 3 |     template: `<div>
 4 |                     <h1 v-text="title"></h1>
 5 |                     <p v-text="text"></p>
 6 |                     <a :href="link.href" :title="link.title" v-text="link.text"></a>
 7 |                     <DirectiveHtml/>
 8 |                     <DirectiveShow/>
 9 |                     <DirectiveIf/>
10 |                     <DirectiveFor/>
11 |                     <DirectiveOn/>
12 |                     <DirectiveModel/>
13 |                     <DirectiveSlot/>
14 |                     <DirectivePre/>
15 |                     <DirectiveOnce/>
16 |                     <SaludarComp/>
17 |                 </div>
18 |                 `,
19 |     data () {
20 |         return {
21 |             title: 'Directivas de Vue.js',
22 |             text: 'Texto de prueba v-text',
23 |             link: {
24 |                 text: 'VueJS Home',
25 |                 href: 'https://vuejs.org/',
26 |                 title: 'Documentacion Vue JS'
27 |             }
28 |         }
29 |     },
30 |     components: {
31 |         DirectiveHtml,
32 |         DirectiveShow,
33 |         DirectiveIf,
34 |         DirectiveFor,
35 |         DirectiveOn,
36 |         DirectiveModel,
37 |         DirectiveSlot,
38 |         DirectivePre,
39 |         DirectiveOnce,
40 |         SaludarComp
41 |     }
42 |     
43 | })
44 | 


--------------------------------------------------------------------------------
/components/DirectiveOn.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let DirectiveOn = {
 3 |     template:`<header>
 4 |                 <h1 v-text="title"></h1>
 5 |                 <p v-text="message"></p>
 6 |                 <p v-text="pelicula"></p>
 7 |                 <button @click.stop.prevent="comprarEntrada">Comprar entrada</button> 
 8 |                 <input type="text" @keydown="decirHola" />
 9 |                 disponibles <span v-text="entradas"></span>
10 |                 <div>
11 |                     <h1>Modificando Vista y Modelo</h1>
12 |                     <input type="text" :value="textInput" @keyup="updateDataTextInput">
13 |                 </div>
14 |             </header>  
15 |                 `,
16 |     data() {
17 |         return {
18 |             title: 'Directiva v-on',
19 |             message: 'Hola desde directiva v-on',
20 |             welcome_text: 'Bienvenido desde la data',
21 |             pelicula: 'Dora la exploradora',
22 |             entradas: 5,
23 |             textInput: 'Valor por defecto del input text',
24 |         }
25 |     },
26 |     methods: {
27 |         updateDataTextInput (event) {
28 |             this.textInput = event.target.value
29 |         },
30 |         decirHola () {
31 |             alert(this.welcome_text)
32 |         },
33 |         comprarEntrada () {
34 |             if(this.entradas > 0) {
35 |                 this.entradas--
36 |                 return alert(`Entrada para ${this.pelicula} comprada`)
37 |             } 
38 |             return alert('Ya no hay entradas')
39 |         }
40 |     }
41 | }


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Curso de Vue.js</title>
 8 |     <style>
 9 |         [v-cloak] {
10 |             display: none;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <div id="app">
16 |         <p v-cloak>{{ title }}</p>
17 |         <hello-world></hello-world>
18 |         <vue-directives></vue-directives>
19 |     </div>
20 |  
21 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
22 |     <script src="./components/HelloWorld.js"></script>
23 |     <script src="./components/DirectiveHtml.js"></script>
24 |     <script src="./components/DirectiveShow.js"></script>
25 |     <script src="./components/DirectiveIf.js"></script>
26 |     <script src="./components/DirectiveFor.js"></script>
27 |     <script src="./components/DirectiveOn.js"></script>
28 |     <script src="./components/DirectiveModel.js"></script>
29 |     <script src="./components/SlotComponents/buttonComp.js"></script>
30 |     <script src="./components/DirectiveSlot.js"></script>
31 |     <script src="./components/DirectivePre.js"></script>
32 |     <script src="./components/DirectiveOnce.js"></script>
33 |     <script src="./components/SaludarComp.js"></script>
34 |     <script  src="./components/VueDirectives.js"></script>
35 |     <script>
36 |         let vm = new Vue({
37 |             el: '#app',
38 |             data () {
39 |                 return {
40 |                     title: 'Directivas Vue JS v-cloak'
41 |                 }
42 |             }
43 |         })
44 |     </script>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/movie_fav.css:
--------------------------------------------------------------------------------
 1 | .movieFav-wrapper{
 2 |     background: #fff;
 3 |     position: fixed;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     left: 0;
10 |     top: 0;
11 | }
12 | .movieFav {
13 |     position: relative;
14 |     width: 100px;
15 |     height: 90px;
16 |     animation: heartbeat 2s forwards;
17 |     margin:0 auto
18 | }
19 | .movieFav:before,
20 | .movieFav:after {
21 |     position: absolute;
22 |     content: "";
23 |     left: 50px;
24 |     top: 0;
25 |     width: 50px;
26 |     height: 80px;
27 |     background: rgb(246, 71, 71);
28 |     -moz-border-radius: 50px 50px 0 0;
29 |     border-radius: 50px 50px 0 0;
30 |     -webkit-transform: rotate(-45deg);
31 |     -moz-transform: rotate(-45deg);
32 |         -ms-transform: rotate(-45deg);
33 |         -o-transform: rotate(-45deg);
34 |             transform: rotate(-45deg);
35 |     -webkit-transform-origin: 0 100%;
36 |     -moz-transform-origin: 0 100%;
37 |         -ms-transform-origin: 0 100%;
38 |         -o-transform-origin: 0 100%;
39 |             transform-origin: 0 100%;
40 | }
41 | .movieFav:after {
42 |     left: 0;
43 |     -webkit-transform: rotate(45deg);
44 |     -moz-transform: rotate(45deg);
45 |         -ms-transform: rotate(45deg);
46 |         -o-transform: rotate(45deg);
47 |             transform: rotate(45deg);
48 |     -webkit-transform-origin: 100% 100%;
49 |     -moz-transform-origin: 100% 100%;
50 |         -ms-transform-origin: 100% 100%;
51 |         -o-transform-origin: 100% 100%;
52 |             transform-origin :100% 100%;
53 | }
54 | @keyframes heartbeat
55 | {
56 |     0%
57 |     {
58 |         transform: scale( .5 );
59 |         opacity: 1;
60 |     }
61 |     50% {
62 |         transform: scale( 1.2 );
63 |         opacity: 1;
64 |     }
65 |     100%
66 |     {
67 |         transform: scale( 1.5 );
68 |         opacity: 0;
69 |     }
70 | }


--------------------------------------------------------------------------------
/components/DirectiveFor.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let DirectiveFor = {
 3 |     template: `<div>
 4 |             <h1 v-text="title"></h1>
 5 |             <p v-html="message"></p>
 6 |             <h3>Lista de un Array</h3>
 7 |             <ul>
 8 |                 <li v-for="(color, index) in list" :key="index" v-text="color"></li>
 9 |             </ul>
10 |             <h3>Lista de un Objeto</h3>
11 |             <ul>
12 |                 <li v-for="(item, key, index ) in object_list" :key="index">
13 |                     {{  key }}: {{ item }}
14 |                 </li>
15 |             </ul>
16 |             <h3>Lista de un Array con Objectos</h3>
17 |             <ul>
18 |                 <li v-for="(item, index ) in other_list" :key="index">
19 |                     Nombre: {{ item.name }} <br/>
20 |                     Apellido: {{ item.last_name }} <br/>
21 |                     Nick: {{ item.nick }} <br/>
22 |                 </li>
23 |             </ul>
24 |         </div>
25 |         `,
26 |     data () {
27 |         return {
28 |             title: 'Directiva v-for',
29 |             message: '<b>Hola desde directive v-for</b>',
30 |             list: ['Rojo', 'Amarrillo', 'Azul', 'Purpura', 'Rosa'],
31 |             object_list: {
32 |                 name: 'Jesus',
33 |                 last_name: 'Lopez',
34 |                 nick:  'Lopvi',
35 |             },
36 | 
37 |             other_list: [
38 |                 {
39 |                     name: 'Jesus',
40 |                     last_name: 'Lopez',
41 |                     nick:  'Lopvi',
42 |                 },
43 |                 {
44 |                     name: 'Jorge',
45 |                     last_name: 'Martinez',
46 |                     nick:  'jmar',
47 |                 },
48 |                 {
49 |                     name: 'Ismael',
50 |                     last_name: 'Carranza',
51 |                     nick:  'IsamaCa',
52 |                 },
53 |             ]
54 |         }
55 |     }
56 | }


--------------------------------------------------------------------------------
/components/movies/SearchComp.js:
--------------------------------------------------------------------------------
 1 | let SearchComp = {
 2 |     template: `
 3 |         <div>
 4 |             <!-- Search form -->
 5 |             <form @submit.prevent="search" class="form-inline md-form form-sm mt-0">
 6 |                 <div class="input-group md-form form-sm form-2 pl-0 w-100">
 7 |                     <div v-show="query" class="input-group-append">
 8 |                         <span @click="resetSearch" class="btn btn-danger">
 9 |                             <i class="fas fa-times"></i>
10 |                         </span>
11 |                     </div>
12 |                     <input class="form-control my-0 py-1 green-border" 
13 |                         type="text" 
14 |                         placeholder="Buscar" 
15 |                         aria-label="Buscar"  v-model="query">
16 |                     <div class="input-group-append">
17 |                         <button class="input-group-text green">
18 |                             <i class="fas fa-search text-grey"
19 |                             aria-hidden="true">
20 |                             </i>
21 |                         </button>
22 |                     </div>
23 |                 </div>
24 |             </form>
25 |         </div>
26 |     `,
27 |     data () {
28 |         return {
29 |             query: '',
30 |             page: 1,
31 |         }
32 |     },
33 |     methods: {
34 |         search () {
35 |             let URL = `${BASEURL}search/movie?api_key=${APIKEY}&language=es-MX&query=${this.query}&page=${this.page}`
36 | 
37 |             fetch(URL)
38 |                 .then(res => res.json())
39 |                 .then(data  => {
40 |                     this.$emit('input', data)
41 |                 })
42 |         },
43 |         setPage (page) {
44 |             this.page = page
45 |             this.search()
46 |         }, 
47 |         resetSearch () {
48 |             this.query = ''
49 |             this.page = 1
50 |             this.$emit('input', {})
51 |         }
52 |     },
53 |       
54 | }


--------------------------------------------------------------------------------
/components/movies/MovieDetails.js:
--------------------------------------------------------------------------------
 1 | let MovieDetails = {
 2 |     name: 'MovieDetails',
 3 |     template: `<div v-if="Object.keys(movie).length">
 4 |                    
 5 |                     <div class="heroMovie text-white py-5" :style="{
 6 |                         'background': 'linear-gradient(rgba(59, 168, 119, 0.45), rgba(59, 168, 119, 1)),url(https://image.tmdb.org/t/p/w1400_and_h450_face'+movie.backdrop_path+')',
 7 |                         'background-size': 'cover'
 8 |                     }">
 9 |                         <div class="container">
10 |                             <div class="row align-items-center">
11 |                                 <div class="col-12 col-md-4 col-lg-3">
12 |                                     <img :src="movie.poster_path | coverURL" class="w-100" />
13 |                                 </div>
14 |                                 <div class="col-12 col-md-8 col-lg-9">
15 |                                     <h2>Detalles: {{ movie.title }}</h2>
16 | 
17 |                                     <p v-text="movie.overview">
18 |                                     </p>
19 |                                 </div>
20 |                             </div>
21 |                         </div>
22 |                     </div>
23 |                     <div class="container">
24 |                         <div class="row">
25 |                             <div v-for="movie in similar" :key="movie.id" class="col-12 col-md-6 col-lg-4 col-xl-3 py-3">
26 |                                 <MovieComp 
27 |                                     :id="movie.id" 
28 |                                     :title="movie.title" 
29 |                                     :synopsis="movie.overview" 
30 |                                     :cover="movie.poster_path"
31 |                                     :like="movie.like"
32 |                                 />
33 |                             </div>
34 |                         </div>
35 |                     </div>
36 |                 </div>`,
37 |     data () {
38 |         return {
39 |             movie: {},
40 |             similar: []
41 |         }
42 |     },
43 |     components: {
44 |         MovieComp
45 |     },
46 |     watch: {
47 |         '$route.params.id' () {
48 |             this.getMovie()
49 |         }
50 |     },
51 |     methods: {
52 |         getSimilar () {
53 |             fetch(`${this.apiBaseURL}movie/${this.$route.params.id}/similar${this.apiConfig}`)
54 |                 .then(res => res.json())
55 |                 .then(({results}) =>{
56 |                     this.similar = results
57 |                 })
58 |         },
59 |         getMovie () {
60 |             fetch(`${this.apiBaseURL}movie/${this.$route.params.id}${this.apiConfig}`)
61 |                 .then(res => res.json())
62 |                 .then(data =>{
63 |                     this.movie = data
64 |                     this.getSimilar()
65 |                 })
66 |         }
67 |     },
68 |     mounted() {
69 |         this.getMovie()
70 |     },
71 | }


--------------------------------------------------------------------------------
/components/movies/MovieComp.js:
--------------------------------------------------------------------------------
 1 | let MovieComp = {
 2 |     template: `
 3 |         <div :id="id | formatId" class="card" :class="{'movie-like': isFav }">
 4 |             <img :src="cover | coverURL" class="card-img-top">
 5 |             <div class="card-body">
 6 |                 <h2 class="card-title">{{ title | uppercase }}</h2>
 7 |                 <p class="card-text">{{ synopsis | excertp }}</p>
 8 |                 <button class="btn" :class="btnStatus" @click="toggleLike">
 9 |                     <span v-text="isFav ? 'Favorita' : 'Agregar a Favoritas'"></span>
10 |                     <i class="far fa-heart " :class="{
11 |                         'far': !isFav,
12 |                         'fas': isFav
13 |                     }"></i>
14 |                 </button>
15 |                 <router-link :to="{ name: 'pelicula', params: { id }}" class="btn btn-primary">Detalle</router-link>
16 |             </div>
17 |         </div>
18 |     `,
19 |     props: {
20 |         id: {
21 |             type: Number,
22 |             required: true,
23 |         },
24 |         title: {
25 |             type: String,
26 |             required: true,
27 |         },
28 |         synopsis: {
29 |             type: String,
30 |             default: 'No posee Sinopsis'
31 |         },
32 |         cover: {
33 |             type: String,
34 |             required: true,
35 |         },
36 |         like: {
37 |             type:Boolean,
38 |             required: true,
39 |             default () {
40 |                 return false
41 |             }
42 |         }
43 |     },
44 |     filters: {
45 |         formatId (value) {
46 |             return `movieCard-${value}`
47 |         },
48 |         uppercase (value) {
49 |             return value.toUpperCase()
50 |         },
51 |         reverse (value) {
52 |             let word = value.split('')
53 |             return word.reverse().join('')
54 |         },
55 |         excertp (value) {
56 |             return value.substring(0, 100) + '...'
57 |         }
58 |     },
59 |     data () {
60 |         return {
61 |             className: {
62 |                 'btn-like': true,
63 |                 'btn-light': false,
64 |                 myclass: true
65 |             },
66 |             user: 'Jesus Lopez'
67 |            
68 |         }
69 |     },
70 |     watch: {
71 |         like (newVal, oldVal) {
72 |             console.log(newVal, oldVal)
73 |         }
74 |     },
75 |     computed: {
76 |         btnStatus () {
77 |             return this.isFav ? 'btn-like' : 'btn-ligth'
78 |         },
79 | 
80 |         isFav () {
81 |             let favMovies = this.$store.state.favMovies
82 | 
83 |             let index = favMovies.findIndex(movie => movie.id === this.id)
84 | 
85 |             return index >= 0
86 |         }
87 |     },
88 |     methods: {
89 |         toggleLike () {
90 |             // this.like = !this.like
91 |             let data = {
92 |                 id: this.id,
93 |                 like: !this.like
94 |             }
95 |             this.$emit('toggleLike', data)
96 |         }
97 |     },
98 | }


--------------------------------------------------------------------------------
/components/PropsComp.js:
--------------------------------------------------------------------------------
  1 | Vue.component('props-comp', {
  2 |     template: `
  3 |         <div class="container">
  4 |             <h5>Bienvenido {{ user }}</h5>
  5 |             <h1>Peliculas Props</h1>
  6 |             <div class="row">
  7 |                 <div class="col-12  col-md-6 col-lg-4" v-for="(movie, key) in movies" 
  8 |                 :key="key">
  9 |                     <MovieComp 
 10 |                     :id="movie.id" 
 11 |                     :title="movie.title" 
 12 |                     :synopsis="movie.synopsis" 
 13 |                     :cover="movie.cover"
 14 |                     :like="movie.like"
 15 |                     @toggleLike="onToggleLike"
 16 |                     />
 17 |                 </div>
 18 |             </div>
 19 |             <label> Cambiar Nombre 
 20 |                 <input :value="user.name" @change="setNameUser">
 21 |                 <input :value="user.lastName" @change="setLastNameUser">
 22 |             </label>
 23 |             {{ oldUser }}
 24 |             
 25 |             <MovieFav :show.sync="showFav"/>
 26 |         </div>
 27 |     `, 
 28 |     data () {
 29 |         return {
 30 |             user: {
 31 |                 name: 'Jesus',
 32 |                 lastName: 'Lopez'
 33 |             },
 34 |             oldUser: null,
 35 |             movies: [
 36 |                 {
 37 |                     id: 1,
 38 |                     title: 'Titanic',
 39 |                     synopsis: 'Durante las labores de recuperación de los restos del famoso trasatlántico Titanic, una anciana norteamericana se pone en contacto con la expedición para acudir…',
 40 |                     cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/zraTDtulFw2wrpyuYf646k95MNq.jpg',
 41 |                     like: false
 42 |                 },
 43 |                 {
 44 |                     id: 2,
 45 |                     title: 'El Rey León',
 46 |                     synopsis: 'Un remake del clásico animado de Disney de 1994 El rey león que estará dirigido por Jon Favreu. Simba (Donald Glover) es el hijo del rey de los leones, Mufasa…',
 47 |                     cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/3A8ca8WOBacCRujSKJ2tCVKsieQ.jpg',
 48 |                     like: false
 49 |                 },
 50 |                 {
 51 |                     id: 3,
 52 |                     title: 'Toy Story',
 53 |                     cover: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/uMZqKhT4YA6mqo2yczoznv7IDmv.jpg',
 54 |                     like: false
 55 |                 }
 56 |             ],
 57 |             showFav: false
 58 |             
 59 |         }
 60 |     },
 61 |     watch: {
 62 |         // user (newVal, oldVal) {
 63 |             
 64 |         //     console.log(newVal, oldVal)
 65 |         //     this.oldUser = oldVal
 66 |         // }
 67 |         user: {
 68 |             handler: function (newVal, oldVal) {
 69 |                 console.log('new:', newVal, 'old:', oldVal)
 70 |             },
 71 |             deep: true
 72 |         },
 73 |         'user.name': {
 74 |             handler: function (newVal, oldVal) {
 75 |                 console.log('new:', newVal, 'old:', oldVal)
 76 |             },
 77 |             deep: true
 78 |         },
 79 |         'user.lastName': {
 80 |             handler: function (newVal, oldVal) {
 81 |                 console.log('new:', newVal, 'old:', oldVal)
 82 |             },
 83 |             deep: true
 84 |         },
 85 | 
 86 |     },
 87 |     components: {
 88 |         MovieComp,
 89 |         MovieFav
 90 |     },
 91 |     methods: {
 92 |         setNameUser (event) {
 93 |             this.user.name = event.target.value
 94 |         },
 95 |         setLastNameUser (event) {
 96 |             this.user.lastName = event.target.value
 97 |         },
 98 |         onToggleLike (data) {
 99 |             let movieLike = this.movies.find(movie => movie.id == data.id)
100 |             movieLike.like = data.like
101 |             this.showFav = data.like
102 |         },
103 |         // onHideFav (show) {
104 |         //     this.showFav = show
105 |         // }
106 |     },
107 | })


--------------------------------------------------------------------------------
/movies.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>Props</title>
  8 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  9 |     <style>
 10 |     .btn-like{
 11 |         border-color: #ef5777;
 12 |         color: #ef5777;
 13 |     }
 14 |     .movie-like{
 15 |         box-shadow: 0 0 0 4px  #ef5777;
 16 |     }
 17 |     .movieFav-wrapper{
 18 |         background: #fff;
 19 |         position: fixed;
 20 |         display: flex;
 21 |         justify-content: center;
 22 |         align-items: center;
 23 |         width: 100%;
 24 |         height: 100%;
 25 |         left: 0;
 26 |         top: 0;
 27 |     }
 28 |     .movieFav {
 29 |         position: relative;
 30 |         width: 100px;
 31 |         height: 90px;
 32 |         animation: heartbeat 2s forwards;
 33 |         margin:0 auto
 34 |     }
 35 |     .movieFav:before,
 36 |     .movieFav:after {
 37 |         position: absolute;
 38 |         content: "";
 39 |         left: 50px;
 40 |         top: 0;
 41 |         width: 50px;
 42 |         height: 80px;
 43 |         background: rgb(246, 71, 71);
 44 |         -moz-border-radius: 50px 50px 0 0;
 45 |         border-radius: 50px 50px 0 0;
 46 |         -webkit-transform: rotate(-45deg);
 47 |         -moz-transform: rotate(-45deg);
 48 |             -ms-transform: rotate(-45deg);
 49 |             -o-transform: rotate(-45deg);
 50 |                 transform: rotate(-45deg);
 51 |         -webkit-transform-origin: 0 100%;
 52 |         -moz-transform-origin: 0 100%;
 53 |             -ms-transform-origin: 0 100%;
 54 |             -o-transform-origin: 0 100%;
 55 |                 transform-origin: 0 100%;
 56 |     }
 57 |     .movieFav:after {
 58 |         left: 0;
 59 |         -webkit-transform: rotate(45deg);
 60 |         -moz-transform: rotate(45deg);
 61 |             -ms-transform: rotate(45deg);
 62 |             -o-transform: rotate(45deg);
 63 |                 transform: rotate(45deg);
 64 |         -webkit-transform-origin: 100% 100%;
 65 |         -moz-transform-origin: 100% 100%;
 66 |             -ms-transform-origin: 100% 100%;
 67 |             -o-transform-origin: 100% 100%;
 68 |                 transform-origin :100% 100%;
 69 |     }
 70 |     @keyframes heartbeat
 71 |     {
 72 |         0%
 73 |         {
 74 |             transform: scale( .5 );
 75 |             opacity: 1;
 76 |         }
 77 |         50% {
 78 |             transform: scale( 1.2 );
 79 |             opacity: 1;
 80 |         }
 81 |         100%
 82 |         {
 83 |             transform: scale( 1.5 );
 84 |             opacity: 0;
 85 |         }
 86 |     }
 87 |     </style>
 88 | </head>
 89 | <body>
 90 |     <div id="app">
 91 |         <movie-app></movie-app>
 92 |     </div>
 93 |     <script src="https://kit.fontawesome.com/2190f1930b.js"></script>
 94 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 95 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 96 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 97 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 98 |     <script src="./components/movies/MovieFav.js"></script>
 99 |     <script src="./components/movies/MovieComp.js"></script>
100 |     <script src="./components/movies/index.js"></script>
101 |     <script>
102 |         let vm = new Vue({
103 |             el: '#app',
104 |             data () {
105 |                 return {
106 |                     title: 'Compartiendo data a componentes Hijos [props]'
107 |                 }
108 |             }
109 |         })
110 |     </script>
111 | </body>
112 | </html>


--------------------------------------------------------------------------------
/components/movies/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | const MovieApp= Vue.component('movie-app', {
  3 |     template: `
  4 |         <div class="container">
  5 |             <h5>Bienvenido {{ user.name }} {{ user.lastName }}</h5>
  6 |             <SearchComp ref="searchComp" v-model="searchMovies"/>
  7 |             <div v-show="! Object.keys(searchMovies).length">
  8 |                 <h1>Peliculas App </h1>
  9 |                <pre>{{ favMovies }}</pre>
 10 |                 <div class="row">
 11 |                     <div class="col-12  col-md-6 col-lg-4 py-3" v-for="(movie, key) in movies" 
 12 |                     :key="key">
 13 |                         <MovieComp 
 14 |                         :id="movie.id" 
 15 |                         :title="movie.title" 
 16 |                         :synopsis="movie.overview" 
 17 |                         :cover="movie.poster_path"
 18 |                         :like="movie.like"
 19 |                         @toggleLike="onToggleLike"
 20 |                         />
 21 |                     </div>
 22 |                 </div>
 23 | 
 24 |                 <div class="row">
 25 |                     <button @click="setPage(n)" class="btn m-1" :class="{
 26 |                         'btn-light': n != page,
 27 |                         'btn-primary': n == page
 28 |                     }" v-for="(n, index) in total_pages" :key="index">
 29 |                         {{n}}
 30 |                         
 31 |                     </button>
 32 |                 </div>
 33 |             </div>
 34 |             <div v-show="Object.keys(searchMovies).length">
 35 |                 <h1>Resultados de busqueda</h1>
 36 |                 <div class="row">
 37 |                     <div class="col-12  col-md-6 col-lg-4 py-3" v-for="(movie, key) in searchMovies.results" 
 38 |                     :key="key"
 39 |                     v-if="movie.poster_path">
 40 |                         <MovieComp 
 41 |                         :id="movie.id" 
 42 |                         :title="movie.title" 
 43 |                         :synopsis="movie.overview" 
 44 |                         :cover="movie.poster_path"
 45 |                         :like="movie.like"
 46 |                         @toggleLike="onToggleLike"
 47 |                         />
 48 |                     </div>
 49 |                 </div>  
 50 |                 <div class="row">
 51 |                     <button @click="$refs.searchComp.setPage(n)" class="btn m-1" :class="{
 52 |                         'btn-light': n != searchMovies.page,
 53 |                         'btn-primary': n == searchMovies.page
 54 |                     }" v-for="(n, index) in searchMovies.total_pages" :key="index">
 55 |                         {{n}}
 56 |                         
 57 |                     </button>
 58 |                 </div> 
 59 |             </div>
 60 |             
 61 |             <MovieFav :show.sync="showFav"/>
 62 |         </div>
 63 |     `, 
 64 |     data () {
 65 |         return {
 66 |            
 67 |             add: 0,
 68 |             user: {
 69 |                 name: 'Jesus',
 70 |                 lastName: 'Lopez'
 71 |             },
 72 |             oldUser: null,
 73 |             movies: [
 74 |                
 75 |             ],
 76 |             searchMovies: {
 77 | 
 78 |             },
 79 |             showFav: false,
 80 |             page: 1,
 81 |             total_pages: null
 82 |         }
 83 |     },
 84 |     computed:{
 85 |         ...Vuex.mapState(['favMovies','counter'])
 86 |     },
 87 |     watch: {
 88 |         page () {
 89 |             this.getPopularMovies()
 90 |         }
 91 |     },
 92 |     components: {
 93 |         MovieComp,
 94 |         MovieFav,
 95 |         SearchComp
 96 |     },
 97 |     methods: {
 98 |         
 99 |         onToggleLike (data) {
100 |             let movieLike = this.movies.find(movie => movie.id == data.id)
101 |             movieLike.like = data.like
102 |             // this.$store.commit('toggleFavMovie', movieLike)
103 |             this.storeFavorita(movieLike)
104 |             this.showFav = data.like
105 |         },
106 |         getPopularMovies () {
107 |             const URL = `${BASEURL}discover/movie?sort_by=popularity.desc&api_key=${APIKEY}&page=${this.page}`
108 |             fetch(URL)
109 |                 .then(response => response.json())
110 |                 .then(({results, page, total_pages}) => {
111 |                     console.log(page, total_pages)
112 |                     this.total_pages = total_pages
113 |                     this.movies = results.map(m => {
114 |                         m.like = false
115 |                         return m
116 |                     })
117 |                 })
118 |         },
119 |         setPage (page) {
120 |             this.page = page
121 |             this.getPopularMovies() 
122 |         },
123 |         ...Vuex.mapMutations({
124 |             storeFavorita: 'toggleFavMovie'
125 |         })
126 |         // onHideFav (show) {
127 |         //     this.showFav = show
128 |         // }
129 |     },
130 |     mounted() {
131 |         let locationURL = new URL(window.location.href)
132 |         this.page = locationURL.searchParams.get('page') || 1
133 |     
134 |         this.getPopularMovies()
135 |     },
136 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>Props</title>
  8 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  9 |     <style>
 10 |     .input-group.md-form.form-sm.form-2 input.green-border {
 11 |         border: 1px solid #3BA877;
 12 |     }
 13 |     .input-group-text.green{
 14 |         background-color: #3BA877;
 15 |         color: #fff;
 16 |         border: 1px solid #3BA877;
 17 |     }
 18 |     .btn-like{
 19 |         border-color: #ef5777;
 20 |         color: #ef5777;
 21 |     }
 22 |     .movie-like{
 23 |         box-shadow: 0 0 0 4px  #ef5777;
 24 |     }
 25 |     .movieFav-wrapper{
 26 |         background: #fff;
 27 |         position: fixed;
 28 |         display: flex;
 29 |         justify-content: center;
 30 |         align-items: center;
 31 |         width: 100%;
 32 |         height: 100%;
 33 |         left: 0;
 34 |         top: 0;
 35 |     }
 36 |     .movieFav {
 37 |         position: relative;
 38 |         width: 100px;
 39 |         height: 90px;
 40 |         animation: heartbeat 2s forwards;
 41 |         margin:0 auto
 42 |     }
 43 |     .movieFav:before,
 44 |     .movieFav:after {
 45 |         position: absolute;
 46 |         content: "";
 47 |         left: 50px;
 48 |         top: 0;
 49 |         width: 50px;
 50 |         height: 80px;
 51 |         background: rgb(246, 71, 71);
 52 |         -moz-border-radius: 50px 50px 0 0;
 53 |         border-radius: 50px 50px 0 0;
 54 |         -webkit-transform: rotate(-45deg);
 55 |         -moz-transform: rotate(-45deg);
 56 |             -ms-transform: rotate(-45deg);
 57 |             -o-transform: rotate(-45deg);
 58 |                 transform: rotate(-45deg);
 59 |         -webkit-transform-origin: 0 100%;
 60 |         -moz-transform-origin: 0 100%;
 61 |             -ms-transform-origin: 0 100%;
 62 |             -o-transform-origin: 0 100%;
 63 |                 transform-origin: 0 100%;
 64 |     }
 65 |     .movieFav:after {
 66 |         left: 0;
 67 |         -webkit-transform: rotate(45deg);
 68 |         -moz-transform: rotate(45deg);
 69 |             -ms-transform: rotate(45deg);
 70 |             -o-transform: rotate(45deg);
 71 |                 transform: rotate(45deg);
 72 |         -webkit-transform-origin: 100% 100%;
 73 |         -moz-transform-origin: 100% 100%;
 74 |             -ms-transform-origin: 100% 100%;
 75 |             -o-transform-origin: 100% 100%;
 76 |                 transform-origin :100% 100%;
 77 |     }
 78 |     @keyframes heartbeat
 79 |     {
 80 |         0%
 81 |         {
 82 |             transform: scale( .5 );
 83 |             opacity: 1;
 84 |         }
 85 |         50% {
 86 |             transform: scale( 1.2 );
 87 |             opacity: 1;
 88 |         }
 89 |         100%
 90 |         {
 91 |             transform: scale( 1.5 );
 92 |             opacity: 0;
 93 |         }
 94 |     }
 95 |     </style>
 96 | </head>
 97 | <body>
 98 |     <div id="app">
 99 |         <router-view></router-view>
100 |        
101 |             
102 |     </div>
103 |     <script src="https://kit.fontawesome.com/2190f1930b.js"></script>
104 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
105 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
106 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
107 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
108 |     <script src="https://unpkg.com/vuex@2.0.0"></script>
109 |     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
110 |     <script src="/components/movies/MovieFav.js"></script>
111 |     <script src="/components/movies/MovieComp.js"></script>
112 |     <script src="/components/movies/SearchComp.js"></script>
113 |     <script src="/components/movies/MovieDetails.js"></script>
114 |     <script src="/components/movies/index.js"></script>
115 |     <script>
116 |         const APIKEY = '29ed1d64cc3508c30f08131eb1860d99'
117 |         const BASEURL = 'https://api.themoviedb.org/3/'
118 | 
119 |         Vue.mixin({
120 |             data () {
121 |                 return {
122 |                     apiConfig: `?api_key=${APIKEY}&language=es-MX`,
123 |                     apiBaseURL: BASEURL
124 |                 }
125 |             },
126 |             filters: {
127 |                 coverURL (str) {
128 |                     return `https://image.tmdb.org/t/p/w185_and_h278_bestv2${str}`
129 |                 }
130 |             } 
131 |         })
132 |         let test = {
133 |             template: `<h1>Test de Router Vue</h1>`
134 |         }
135 |         let routes = [
136 |             {
137 |                 path: '/test',
138 |                 name: 'test',
139 |                 component: test,
140 |             },
141 |             {
142 |                 path: '/pelicula/:id',
143 |                 name: 'pelicula',
144 |                 component: MovieDetails,
145 |             },
146 |             {
147 |                path: '/',
148 |                name: 'home',
149 |                component: MovieApp 
150 |             },
151 |         ]
152 |         
153 |         let router = new VueRouter({
154 |             mode: 'history',
155 |             routes
156 |         })
157 | 
158 |         let store = new Vuex.Store({
159 |             state: {
160 |                 favMovies: [],
161 |                 counter: 10
162 |             },
163 |             
164 |             mutations: {
165 |                 toggleFavMovie (state, movie) {
166 |                     let index = state.favMovies.findIndex(favMovie => favMovie.id == movie.id)
167 |                     
168 |                     if(index >= 0) {
169 |                         state.favMovies.splice(index, 1)
170 |                         return
171 |                     }
172 | 
173 |                     state.favMovies.push(movie)
174 |                 }
175 |             }
176 |         })
177 | 
178 |         let vm = new Vue({
179 |             el: '#app',
180 |             router,
181 |             data () {
182 |                 return {
183 |                     title: 'Compartiendo data a componentes Hijos [props]'
184 |                 }
185 |             },
186 |             store
187 |         })
188 |     </script>
189 | </body>
190 | </html>


--------------------------------------------------------------------------------