Introducción a Vue.js

Transcript

Introducción a Vue.js Andrés Santibáñez Meetup Frontend Dev Guayaquil Febrero

8, 2018

¿Qué es Vue.js? • Framework Javascript para desarrollo de aplicaciones

frontend. • [Permite el] “Desarrollo de Interfaces de Usuario”

¿Qué es Vue.js? Permite la crear páginas y apps web

dinámicas. https://vuejs.org/v2/examples/todomvc.html

¿Qué es Vue.js? Centrado en Componentes

¿Qué es Vue.js? Adopción incremental

¿Qué es Vue.js? Adopción incremental Empezar por componentes.

¿Qué es Vue.js? Adopción incremental Empezar por componentes. SPA pequeños

y grandes.

¿Qué es Vue.js? • Utiliza HTML, CSS y JS

¿Qué es Vue.js? • Utiliza HTML, CSS y JS •

Permite crear nuevos tags <html> <head> </head> <body> <app> <navbar></navbar> <div class="content"> <sidebar></sidebar> <dashboard></dashboard> </div> </app> </body> </html>

¿Qué es Vue.js? • Utiliza HTML, CSS y JS •

Permite crear nuevos tags <html> <head> </head> <body> <app> <navbar></navbar> <div class="content"> <sidebar></sidebar> <dashboard></dashboard> </div> </app> </body> </html>

¿Por qué usar Vue.js? • Es un framework más. Existen

similares.

¿Por qué usar Vue.js? • “Para gustos, hay colores” •

@asantibanez: simplicidad, rapidez de implementación. • No hay que aprender otros lenguajes • JSX: React • TypeScript: Angular

Historia de Vue.js • Evan You. Creador de Vue.js •

Google, Meteor • Trabajó con AngularJs • Decidió extraer ﬁlosofías de Angular y crear un nuevo framework • Lanzamiento: Febrero 2014 • Exposición Hacker News • 4 años

Historia de Vue.js • 83K estrellas en Github • 5K

menos que React • Open source • Patreon: $ 9,800

Historia de Vue.js • Última Version: 2.5.13 • Versiones con

nombres de anime • Level E • Dragon Ball • Ghost in the Shell

Conceptos Clave Interfaces Interactivas a través de Componentes <create-todo-form></create-todo-form> <todos-list>

<todo-item></todo-item> <todo-item></todo-item> <todo-item></todo-item> </todos-list>

Conceptos Clave Interfaces Interactivas a través de Componentes <create-todo-form></create-todo-form> <todos-list>

Conceptos Clave Enfocado en el Estado de los Componentes

Conceptos Clave Enfocado en el Estado de los Componentes data()

{ return { email: '', password: '', isWorking: false } }

Conceptos Clave Enfocado en el Estado de los Componentes data()

{ return { email: '', password: '', isWorking: false } }

Conceptos Clave Reactivo / Orientado a Eventos data() { return

{ isChecked: false } }, computed: { checkedMessage() { return this.isChecked ? "Checked :D" : "NOT Checked :(" } }

Conceptos Clave Reactivo / Orientado a Eventos data() { return

{ isChecked: false } }, computed: { checkedMessage() { return this.isChecked ? "Checked :D" : "NOT Checked :(" } }

Instalación de Vue.js Opción A: Incluir un script en nuestra

página web <script src="/js/vue.js"></script>

Instalación de Vue.js Opción A: Incluir un script en nuestra

página web <script src="/js/vue.js"></script> npm install vue Opción B: npm

Instalación de Vue.js Opción A: Incluir un script en nuestra

página web <script src="/js/vue.js"></script> npm install vue Opción B: npm npm install —-global vue-cli vue init webpack [project-name] cd [project-name] npm install npm run dev Opción C: vue-cli

Utilizando Vue.js <div id="app"></div>

Utilizando Vue.js <div id="app"></div> <script> new Vue({ // }).$mount('#app') </script>

Componentes en Vue.js <div id="app"> <hello></hello> </div> <script> Vue.component('hello', {

template: `<div> {{ message }} </div>`, data() { return { message: 'Hello Frontend Dev Guayaquil!' } } }) new Vue({ // }).$mount(‘#app') </script>

Componentes en Vue.js <div id="app"> <hello></hello> </div> <script> Vue.component('hello', {

template: `<div> {{ message }} </div>`, data() { return { message: 'Hello Frontend Dev Guayaquil!' } } }) new Vue({ // }).$mount('#app') </script>

Componentes en Vue.js <div id="app"> <hello></hello> </div> <script> Vue.component('hello', {

template: `<div> {{ message }} </div>`, data() { return { message: 'Hello Frontend Dev Guayaquil!' } } }) new Vue({ // }).$mount('#app') </script>

Componentes en Vue.js <div id="app"> <hello></hello> <hello></hello> <hello></hello> </div> <script>

Vue.component('hello', { template: `<div> {{ message }} </div>`, data() { return { message: 'Hello Frontend Dev Guayaquil!' } } }) new Vue({ // }).$mount('#app') </script>

Single File Components • Archivos .vue

Single File Components • Archivos .vue • Divididos en 3

secciones

Single File Components • Archivos .vue • Divididos en 3

secciones <template> <div class="text-white"> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello Fron } } } </script> <style> .text-white { color: #ffffff; } </style>

Single File Components • Archivos .vue • Divididos en 3

Vue.component('hello', { template: `<div> {{ message }} </div>`, data() {

return { message: 'Hello Frontend Dev Guayaquil!' } } })

Vue.component('hello', { template: `<div> {{ message }} </div>`, data() {

return { message: 'Hello Frontend Dev Guayaquil!' } } })

Vue.component('hello', require('./Hello.vue')) { template: `<div> {{ message }} </div>`, data()

{ return { message: 'Hello Frontend Dev Guayaquil!' } } })

Interfaces Dinámicas

Interfaces Dinámicas Uso de “directivas” en HTML

Interfaces Dinámicas Uso de “directivas” en HTML <input type="text" v-model="firstName"

/> <input type="text" v-model="lastName" /> <p> Your full name is {{ firstName }} {{ lastName }} </p> data() { return { firstName: '', lastName: '', } },

Interfaces Dinámicas Uso de “directivas” en HTML <input type="text" v-model="firstName"

Interfaces Dinámicas Uso de “directivas” en HTML (2) <input placeholder="Email"

v-model="email" type="text" /> <div v-show="emailEmpty"> <p class="text-red"> Debe especificar un correo </p> </div> <input placeholder="Contraseña" v-model="password" type=“password" /> <div v-show="passwordEmpty"> <p class="text-red"> Debe especificar una contraseña </p> </div> data() { return { email: '', password: '' } }, computed: { emailEmpty() { return this.email.length === 0 }, passwordEmpty() { return this.password.length === 0 }, },

Interfaces Dinámicas Uso de “directivas” en HTML <input placeholder="Email" v-model="email"

type="text" /> <div v-show="emailEmpty"> <p class="text-red"> Debe especificar un correo </p> </div> <input placeholder="Contraseña" v-model="password" type=“password" /> <div v-show="passwordEmpty"> <p class="text-red"> Debe especificar una contraseña </p> </div> data() { return { email: '', password: '' } }, computed: { emailEmpty() { return this.email.length === 0 }, passwordEmpty() { return this.password.length === 0 }, },

Introducción a Vue.js

Introducción a Vue.js

More Decks by Andrés Santibáñez

Other Decks in Programming

Featured

Transcript