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
35

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
44

Other Decks in Programming

See All in Programming
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
590
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
280
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
980
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
550
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
330
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
470
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
240

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
370
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
100
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
700
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
130

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