Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a Vue.js

Avatar for Andrés Santibáñez Andrés Santibáñez
February 08, 2018
Programming
0
31

Introducción a Vue.js

Qué es Vue.js, sus principios, filosofía y cómo empezamos a utilizarlo en nuestras aplicaciones.

Avatar for Andrés Santibáñez

Andrés Santibáñez

February 08, 2018
Tweet

More Decks by Andrés Santibáñez

See All by Andrés Santibáñez
Conociendo Android
Avatar for Andrés Santibáñez asantibanez
0
42

Other Decks in Programming

See All in Programming
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
時間軸から考えるTerraformを使う理由と留意点
Avatar for Ryoma Fujiwara fufuhu
16
4.8k
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
7
2.5k
1から理解するWeb Push
Avatar for Minoru Takeuchi dora1998
7
1.9k
Rancher と Terraform
Avatar for Ryoma Fujiwara fufuhu
2
550
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
2
250
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
320
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
160
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
Avatar for JaiChangPark itsmedreamwalker
0
150
そのAPI、誰のため？ Androidライブラリ設計における利用者目線の実践テクニック
Avatar for mkeeda mkeeda
2
1.3k
Navigating Dependency Injection with Metro
Avatar for Zac Sweers zacsweers
3
2k

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.1k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k

Transcript

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

    8, 2018

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

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

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

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

  4. ¿Qué es Vue.js? Centrado en Componentes

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

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

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

    y grandes.

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

  9. ¿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>

  10. ¿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>

  11. ¿Por qué usar Vue.js?

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

    similares.

  13. ¿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

  14. Historia de Vue.js

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

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

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

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

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

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

  18. Conceptos Clave de Vue.js

  19. 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>

  20. 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>

  21. 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>

  22. 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>

  23. Conceptos Clave Enfocado en el Estado de los Componentes

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

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

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

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

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

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

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

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

  28. ¿Cómo empezar?

  29. Instalación de Vue.js

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

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

  31. 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

  32. 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

  33. Utilizando Vue.js

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

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

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

  37. Componentes en Vue.js

  38. 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>

  39. 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>

  40. 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>

  41. 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>

  42. Single File Components • Archivos .vue

  43. Single File Components • Archivos .vue • Divididos en 3

    secciones

  44. 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>

  45. 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>

  46. 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>

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

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

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

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

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

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

  50. Interfaces Dinámicas

  51. Interfaces Dinámicas

  52. Interfaces Dinámicas Uso de “directivas” en HTML

  53. 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: '', } },

  54. 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: '', } },

  55. 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: '', } },

  56. 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 }, },

  57. 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 }, },

  58. 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 }, },

  59. 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 }, },

  60. Algunas Directivas • v-model: data binding • v-show: muestra/esconde bloque

    • v-for: renderizado de listas • v-if: bloque condicional • v-on: comunicación a través de eventos

  61. Demo 2 ejemplos

  62. Compose Tweet

  63. Star Wars Characters