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

Introducción a Vue.js

Andrés Santibáñez
February 08, 2018
Programming
0
29

Introducción a Vue.js

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

Andrés Santibáñez

February 08, 2018
Tweet

More Decks by Andrés Santibáñez

See All by Andrés Santibáñez
Conociendo Android
asantibanez
0
39

Other Decks in Programming

See All in Programming
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
1.3k
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
2
1.3k
WebAssembly Unleashed: Powering Server-Side Applications
chrisft25
0
1.2k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
1k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
210
Develop iOS apps with Neovim / vimconf_2024
uhooi
1
100
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
azuki
2
130
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
2.1k
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
RubyLSPのマルチバイト文字対応
notfounds
0
120
[KR] Open-Source Ecosystems
skydoves
0
100
社内活動の取り組み紹介
~ スリーシェイクでこんな取り組みしてます ~
bells17
0
100

Featured

See All Featured
The Invisible Side of Design
smashingmag
298
50k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Optimizing for Happiness
mojombo
376
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Music & Morning Musume
bryan
46
6.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Happy Clients
brianwarren
98
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
What's new in Ruby 2.0
geeforr
343
31k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Ruby is Unlike a Banana
tanoku
97
11k

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