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
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
50
32k
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
260
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
660
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
Avatar for Yusuke Suto sutochin26
0
300
VS Code Update for GitHub Copilot
Avatar for 74th(Atsushi Morimoto) 74th
1
550
#QiitaBash MCPのセキュリティ
Avatar for Tommy(sigma) ryosukedtomita
0
660
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
560
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
370
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
Avatar for Kentaro Yoshida y_ken
0
340
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
710
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
Avatar for Mana Takada mana_takada
0
140
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
170

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
390
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
940
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k

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