$30 off During Our Annual Pro Sale. View Details »

Introducción a Vue.js

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

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
43

Other Decks in Programming

See All in Programming
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
110
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
270
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
130
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
410
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
220
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
750
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
130
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
270
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
150
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
390
チームをチームにするEM
Avatar for hitode909 hitode909
0
370

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
190
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
330
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
2
3.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
250
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
2
190
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
38
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
240

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