html,body{font-size:16px !important;line-height:18px !important;height:100%;color:#333;padding:0;margin:0}*,html,body{font-family:"Poppins",sans-serif;font-weight:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-rendering:geometrirecision;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none !important;letter-spacing:-0.1px;word-wrap:break-word}.row{display:flex;flex-wrap:wrap;margin-left:-10px;margin-right:-10px;padding:0 2px}.col{flex:0 0 auto;width:25%;margin-bottom:20px;padding-left:10px;padding-right:10px}.col .entity-item{height:100%}strong,b{font-family:"Poppins",sans-serif;font-weight:bold}figure{margin:0;padding:0}a{text-decoration:none;color:#174fae}a:hover{text-decoration:underline}pre{padding:5px;margin-top:20px;background:#f3f3f3;border:1px solid #ccc}p{font-size:18px;line-height:24px}.link{cursor:pointer}.nowrap{white-space:nowrap}.overflow-auto{overflow:auto !important;-webkit-overflow-scrolling:touch !important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:"Poppins",sans-serif;font-weight:bold}.multiple:after{content:',';margin-right:4px}.multiple:last-child:after{content:'';margin-right:0}.icon-home{display:flex;justify-content:center;align-items:center}.icon-home svg{fill:#fff;width:15px;height:15px}.icon svg{fill:#fff;width:35px;height:35px}.m-0{margin:0 !important}.p-0{padding:0 !important}.mt-0{margin-top:0 !important}.mb-0{margin-bottom:0 !important}.mb-2{margin-bottom:10px !important}.me-1{margin-right:5px !important}.me-2{margin-right:10px !important}.mb-4{margin-bottom:20px !important}.mt-2{margin-top:20px !important}.mt-1{margin-top:10px !important}.opacity-0{opacity:0 !important}hr{border:0;border-top:1px solid #ccc}.hide-scrollbar{overflow-x:scroll;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.d-none{display:none !important}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit--select:none;-moz--select:none;-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn:hover{text-decoration:none}.btn-link{font-weight:400;color:#0d6efd;text-decoration:none}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark a{color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-dark:hover a{color:#fff;text-decoration:none}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-dark{color:#fff;background-color:#001c4c;border-color:#001c4c}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-rounded{border-radius:50px}.btn-dark:hover{color:#ccc}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-movie{font-size:25px;line-height:25px;padding:0;border-radius:50% !important;width:60px;height:60px;margin:0 15px 0 0;display:flex;justify-content:center;align-items:center}.btn-movie svg{width:30px;height:30px}.btn-icon{line-height:0}.btn-icon svg{fill:#fff;width:1.1em;height:1.1em}.btn-movie:hover svg{fill:#fff}.breadcrumb{font-size:16px;line-height:30px}.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:"/";font-size:12px}.sidebar{display:flex;justify-content:space-between;height:100%;flex-direction:column}.sticky-box{height:100%;width:100%;margin-bottom:20px;padding:0}.banner{position:sticky;top:10px;margin-bottom:20px;margin-left:auto;margin-right:auto}.banner ins{position:sticky;top:10px;text-decoration:none;display:block;overflow:hidden !important}.banner ins:after{content:'PUBLICIDAD';background:#f5f5f5;width:100%;display:block;text-align:center;font-size:12px;line-height:12px;padding:4px 0}.bottom-ad-module{display:none}.roba-mobile{display:none}.roba-mobile,.roba-desktop{min-height:600px}.roba-desktop{display:flex;justify-content:start;align-items:end;flex-direction:column;width:320px;max-width:320px}.board-article-outbrain{margin-bottom:40px}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-):not(.invalid-tooltip):not(.invalid-){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control-sm{min-height:calc(1.5em+.5rem+2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.container{width:1140px;margin-left:auto;margin-right:auto}.top{margin-bottom:20px}.topbar-container{width:100%;background-color:#001c4c}.topbar{position:relative;display:flex;justify-content:center;padding:10px 0;z-index:2}.header-section{border-top:1px solid #fff;background-color:#eaede2;padding:10px 0;text-align:center}.header-section .header-section-title,.header-section .header-section-title a{font-family:"Poppins",sans-serif;font-weight:700;font-size:26px;line-height:26px;margin:0;padding:0;color:#001c4c}.menu-container{width:100%}.menu{position:relative;display:flex;justify-content:center;border-bottom:1px solid #ffffff59;padding:5px 0;z-index:2;background-color:#f3f3f3}.menu .navbar-nav{display:flex;flex-direction:row;list-style:none;padding:0;margin:0}.menu .navbar-nav .nav-link{display:block;padding:.5rem;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;color:rgba(0,0,0,.55);font-weight:500;font-size:14px;line-height:14px;text-transform:uppercase}.form-search-container{padding:15px 0;width:auto;background-color:#e9f1f8}.form-search{display:flex;flex-direction:row;justify-content:center;width:1140px;margin-left:auto;margin-right:auto}.form-search form{display:flex;width:50%}.form-search .input-search-autocomplete{background-color:#ffffffa8}.section{width:100%;margin-bottom:40px}.section .section-header{display:flex;align-items:center;justify-content:space-between;border-top:3px solid #001c4c;border-bottom:1px solid #001c4c;margin-bottom:20px}.section .section-header p,.section .section-header h2,.section .section-header h1{font-size:24px;line-height:28px;font-weight:bold;color:#001c4c;font-size:24px;line-height:24px;padding:10px 0;margin:0}.entity-item{display:flex;flex-direction:column;position:relative;width:100%;border-bottom:4px solid #001c4c;background:#f3f3f3;box-shadow:0 0 4px #000;text-align:left;margin-bottom:0}.entity-item .entity-item-details{order:1;padding:10px}.entity-item .entity-title,.entity-item .entity-title a{font-size:18px;line-height:20px;font-family:"Poppins",sans-serif;font-weight:600;color:#333;text-decoration:none;margin-bottom:0;margin-top:0;text-transform:uppercase}.entity-item .entity-title small{font-size:14px;line-height:16px}.entity-item .entity-title a:before{content:"";top:0;left:0;right:0;bottom:0;display:block;margin:0;padding:0;position:absolute;z-index:2}.entity-item .entity-item-image{order:0}.entity-item .figure{position:relative;aspect-ratio:.66666667;display:flex;justify-content:center;align-items:center;background-color:#222;color:#fff;overflow:hidden}.entity-item .figure:after{content:var(--category-var);position:absolute;bottom:5px;right:5px;font-size:14px;line-height:14px;text-align:right;background:#2e579e;color:#fff;font-weight:bold;padding:3px 6px;border-radius:5px}.entity-item .figure .img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.footer{background-color:#001c4c;padding:20px 0}.footer .container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer p{font-size:14px;line-height:1;color:#fff;text-align:center;padding:0 10px}.footer a{color:#ccc}.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 1.1);gap:10px;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth}.gallery figure{scroll-snap-align:start;position:relative;aspect-ratio:16 / 9;border-radius:10px;border:1px solid #ccc;display:flex;justify-content:center;align-items:center;background-color:#222;color:#fff;width:100%}.gallery img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:10px}.video-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 1.1);gap:10px;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth}.video{scroll-snap-align:start;border-radius:10px;overflow:hidden}.video iframe{width:100%;height:100%;aspect-ratio:16 / 9}.entity-gallery .gallery-row>*{border:1px solid #ffffff00}.entity-gallery .gallery-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 4.06);gap:15px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding:0}.entity-gallery .gallery-row-6{grid-auto-columns:calc(100% / 5.9)}.entity-gallery .gallery-column{width:100%;scroll-snap-align:start;object-fit:cover}.entity-gallery .entity-item{display:flex;flex-direction:column;position:relative;margin-bottom:0;height:100%}.carousel-wrapper{position:relative}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000099;color:white;border:0;padding:10px 10px;cursor:pointer;z-index:10;border-radius:100%;display:flex;justify-content:center;align-items:center}.carousel-button svg{fill:#fff;width:20px;height:20px}.carousel-prev{left:0}.carousel-next{right:0}.accordion{width:100%;border:1px solid #ccc;border-radius:8px}.accordion-item{border-top:1px solid #ccc}.accordion-header{display:flex;justify-content:start;align-items:center;padding:15px;cursor:pointer;font-weight:bold}.accordion-header .badge{background-color:#6c757d;color:#fff;padding:5px 10px;border-radius:4px;font-size:14px}.accordion-checkbox{display:none}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 10px;background-color:#fff}.accordion-checkbox:checked ~ .accordion-content{max-height:500vh;padding:0 10px}.accordion-content .table{width:100%;margin-top:10px;margin-bottom:10px;border-collapse:collapse}.accordion-content .table td{padding:10px;border:1px solid #ddd}.accordion-item:first-of-type{border-top:0}.accordion-header::after{flex-shrink:0;margin-left:auto;content:"+";background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}.accordion-header h4{font-weight:normal}.accordion-content p{margin-top:0}.no-disponible{text-align:center}@media(max-width:1024px){.container{width:100%}.top{margin-bottom:0}.other-container{width:100%;margin:0;padding-left:15px;padding-right:15px}.col{flex:0 0 auto;width:50%}.menu{display:block}.aside-container{display:none}.form-search{width:100%}.form-search form{display:flex;width:100%;margin:0 15px}.entity-item .entity-title,.entity-item .entity-title a{font-size:16px;line-height:18px}.breadcrumb{margin-bottom:10px;padding-left:15px;padding-right:15px}.gallery{grid-auto-columns:calc(100% / 1.1)}.entity-gallery .gallery-row{grid-auto-columns:calc(100% / 2.3)}.section .section-header p,.section .section-header h2,.section .section-header h1{font-size:20px;line-height:22px}.roba-desktop{display:none}.roba-mobile{position:relative;top:0;margin-bottom:30px;display:flex;justify-content:start;align-items:center;flex-direction:column;width:calc(100vw - 30px);max-width:calc(100vw - 30px)}.roba-mobile ins{position:sticky;top:0}.bottom-ad-module{display:block;position:fixed;bottom:0;left:0;width:100%;margin:0;box-shadow:0 -1px 5px 0 rgba(0,0,0,.2);text-align:center;line-height:0;background:#f5f5f5;z-index:3000004;transition:transform .5s ease,opacity .5s ease}.bottom-ad-module-hidden{transform:translateY(100%);opacity:0}.bottom-ad-module .publi-box__close-btn{display:block;color:#666;background:#f5f5f5;z-index:1000001;font-size:17px;padding:5px;box-shadow:1px -2px 2px 0 rgba(0,0,0,.2);border-top-left-radius:8px;width:28px;height:28px;position:absolute;top:-28px;right:0;cursor:pointer}} .article{width:100%}.movie-header{position:relative;margin-bottom:40px;display:flex;flex-direction:row;align-items:flex-start}.movie-header .figure{position:relative;aspect-ratio:.66666667;display:flex;justify-content:center;align-items:center;background-color:#222;color:#fff;width:250px;flex:0 0 250px;overflow:hidden;margin-right:20px}.movie-header .figure .img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.movie-title-container{margin:0 auto;z-index:1;flex:1 1 100%;overflow:hidden}.movie-title-container .title{border-top:4px solid #001c4c;border-bottom:1px solid #ccc;font-weight:bold;font-size:36px;line-height:38px;margin:0;padding:10px 0;margin-bottom:20px;color:#001c4c;text-transform:uppercase}.movie-title-container .author-name{margin-bottom:30px}.movie-title-container .author-name a{font-weight:normal;text-transform:uppercase}.movie-title-container .categories{position:absolute;bottom:0;margin-bottom:0}.movie-title-container .categories-relative{position:relative}.movie-title-container .categories a{margin-bottom:10px;margin-right:5px}.movie-title-container .tagline{margin-bottom:20px}.movie-buttons{display:flex;align-items:center;margin-bottom:20px}.movie-buttons .btn-buy{font-size:20px;line-height:1;font-family:sans-serif;font-weight:normal;text-transform:uppercase;height:60px;justify-content:center;align-items:center;display:flex;padding:0 30px;border-radius:30px}.movie-buttons .discountPercentage{font-size:22px;line-height:22px;font-weight:bold;color:green}.movie-container{display:flex;flex-direction:row}.movie-body{margin:0;width:780px;flex:0 0 780px;overflow:hidden}.aside-container{text-align:right;width:320px;flex:0 0 320px;position:relative;margin-left:40px}.providers{width:100%}.providers .provider-container{margin-bottom:20px}.providers a{margin-right:10px;display:inline-block}.providers a:last-child{margin-right:0}.providers img{width:55px;height:55px;border-radius:5px}.providers .provider-type{display:block;background:#eaede2;padding:5px;margin-bottom:10px;font-weight:bold}.providers .provider-container:last-child{margin-bottom:0}.movie-info .row-info{display:flex;flex-direction:row;margin-top:10px;margin-bottom:10px}.movie-info .col-title{font-size:18px;line-height:24px;width:40%;flex:0 0 40%;display:flex;align-items:center;margin:0;font-weight:normal}.movie-info .col-title .icon{display:flex;margin-right:5px}.movie-info .col-title .icon svg{width:20px;height:20px}.movie-info .col-value{width:60%;flex:0 0 60%}.movie-info .col-value p{padding:0;margin:0}.movie-info .col-value .link{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.movie-share{position:fixed;bottom:10px;right:10px;z-index:1000}.movie-share .btn{font-size:25px;line-height:25px;padding:0;border-radius:50% !important;width:60px;height:60px;display:flex;justify-content:center;align-items:center;background:#064cc3}.movie-share .btn svg{width:30px;height:30px;fill:#fff}.circle-wrap{width:60px;height:60px;background:#ccc;border-radius:50%;margin:0 15px 0 0;z-index:1}.circle-wrap .circle{position:relative}.circle-wrap .circle .mask,.circle-wrap .circle .fill{width:60px;height:60px;position:absolute;border-radius:50%}.mask .fill{clip:rect(0,30px,60px,0);background-color:#000}.circle-wrap .circle .mask{clip:rect(0,60px,60px,30px)}.circle-wrap .inside-circle{font-family:sans-serif;width:49px;height:49px;border-radius:50%;background:#064cc3;color:#fff;position:absolute;z-index:100;font-weight:700;font-size:18px;line-height:18px;top:5px;left:5px;display:flex;justify-content:center;align-items:center}@media(max-width:1024px){.movie-body{width:100%;flex:0 0 100%;overflow:unset}.movie-header{flex-direction:column}.movie-header .figure{margin:0;width:100%;flex:0 0 100%;background-color:transparent;aspect-ratio:unset;padding:20px 50px}.movie-header .figure .img{position:relative;height:auto;box-shadow:0 0 10px 0 #333}.movie-title-container{width:100%;margin:0;padding-left:15px;padding-right:15px;text-align:center}.movie-title-container .title{border-top:0;font-size:26px;line-height:30px;margin:0 0 20px 0}.movie-buttons{flex-direction:column;margin-bottom:30px;border-bottom:1px solid #ccc;padding-bottom:20px}.movie-buttons .btn-buy{margin-bottom:10px}.movie-title-container .categories{position:relative}.movie-container{margin:0;padding-left:15px;padding-right:15px}.movie-info .row-info{flex-direction:column}.movie-info .col-title,.movie-info .col-value p,.movie-info .col-value a{margin:0}.movie-info .col-title{width:100%;flex:0 0 100%;font-weight:600}.movie-info .col-value{width:100%;flex:0 0 100%}}
Este libro sobre Vue.js, un framework de JavaScript, combinando teoría y práctica en sus numerosos ejemplos. Es muy sencillo de aprender y está dirigido a cualquier desarrollador Front End que desee desarrollar aplicaciones web fluidas, dinámicas y reactivas. Si bien el conocimiento de los lenguajes HTML, CSS y JavaScript es una ventaja adicional para comprender mejor la lectura de este libro, hay un capítulo dedicado a JavaScript que permitirá al lector estar al día con las nuevas sintaxis, que han aparecido en los últimos años. Después de una introducción al concepto de DOM virtual y la arquitectura MVVM de la que se inspira Vue.js, el lector pasa rápidamente a la práctica con la instalación y configuración de herramientas de ayuda al desarrollo. Se aprende a usar Vue.js en un proyecto nuevo o en uno ya existente y el lector se vuelve capaz de manipular el DOM de una página web, configurar los comportamientos esperados como consecuencia de las acciones del o incluso istrar estilos CSS usando directivas introducidas por el framework. También se dedica un capítulo a la creación de formularios dinámicos. En el resto del libro, el autor detalla cómo organizar su código en componentes y diseñar una aplicación en función de su tamaño, en particular mediante la compartición de código. El lector también aprende cómo usar el empaquetador de módulos Webpack para compilar y desplegar una aplicación en producción. Después de recordar los conceptos de seguridad relacionados con las aplicaciones web (CORS, cookies, tokens JWT, ataques CSRF y XSS, protocolo OAuth 2.0), el autor explica cómo consumir API en su aplicación de manera segura, primero en forma de un API REST y luego en forma de API GraphQL. Finalmente, el lector aprende el enrutamiento con Vue Router para simular las URL de la aplicación en un navegador, así como la centralización de la gestión de datos con el plug-in Vuex.