Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducción a Vue.js
Search
Andrés Santibáñez
February 08, 2018
Programming
0
30
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
Share
More Decks by Andrés Santibáñez
See All by Andrés Santibáñez
Conociendo Android
asantibanez
0
40
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
140
sappoRo.R #12 初心者セッション
kosugitti
0
230
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
チームリードになって変わったこと
isaka1022
0
190
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLとの向き合い方2022年版
quramy
44
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5.1k
Writing Fast Ruby
sferik
628
61k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
A better future with KSS
kneath
238
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Introducción a Vue.js Andrés Santibáñez Meetup Frontend Dev Guayaquil Febrero
8, 2018
¿Qué es Vue.js? • Framework Javascript para desarrollo de aplicaciones
frontend. • [Permite el] “Desarrollo de Interfaces de Usuario”
¿Qué es Vue.js? Permite la crear páginas y apps web
dinámicas. https://vuejs.org/v2/examples/todomvc.html
¿Qué es Vue.js? Centrado en Componentes
¿Qué es Vue.js? Adopción incremental
¿Qué es Vue.js? Adopción incremental Empezar por componentes.
¿Qué es Vue.js? Adopción incremental Empezar por componentes. SPA pequeños
y grandes.
¿Qué es Vue.js? • Utiliza HTML, CSS y JS
¿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>
¿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>
¿Por qué usar Vue.js?
¿Por qué usar Vue.js? • Es un framework más. Existen
similares.
¿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
Historia de Vue.js
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
Historia de Vue.js • 83K estrellas en Github • 5K
menos que React • Open source • Patreon: $ 9,800
Historia de Vue.js • Última Version: 2.5.13 • Versiones con
nombres de anime • Level E • Dragon Ball • Ghost in the Shell
Conceptos Clave de Vue.js
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>
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>
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>
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>
Conceptos Clave Enfocado en el Estado de los Componentes
Conceptos Clave Enfocado en el Estado de los Componentes data()
{ return { email: '', password: '', isWorking: false } }
Conceptos Clave Enfocado en el Estado de los Componentes data()
{ return { email: '', password: '', isWorking: false } }
Conceptos Clave Reactivo / Orientado a Eventos data() { return
{ isChecked: false } }, computed: { checkedMessage() { return this.isChecked ? "Checked :D" : "NOT Checked :(" } }
Conceptos Clave Reactivo / Orientado a Eventos data() { return
{ isChecked: false } }, computed: { checkedMessage() { return this.isChecked ? "Checked :D" : "NOT Checked :(" } }
¿Cómo empezar?
Instalación de Vue.js
Instalación de Vue.js Opción A: Incluir un script en nuestra
página web <script src="/js/vue.js"></script>
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
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
Utilizando Vue.js
Utilizando Vue.js <div id="app"></div>
Utilizando Vue.js <div id="app"></div> <script> new Vue({ // }).$mount('#app') </script>
Utilizando Vue.js <div id="app"></div> <script> new Vue({ // }).$mount('#app') </script>
Componentes en Vue.js
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>
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>
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>
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>
Single File Components • Archivos .vue
Single File Components • Archivos .vue • Divididos en 3
secciones
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>
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>
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>
Vue.component('hello', { template: `<div> {{ message }} </div>`, data() {
return { message: 'Hello Frontend Dev Guayaquil!' } } })
Vue.component('hello', { template: `<div> {{ message }} </div>`, data() {
return { message: 'Hello Frontend Dev Guayaquil!' } } })
Vue.component('hello', require('./Hello.vue')) { template: `<div> {{ message }} </div>`, data()
{ return { message: 'Hello Frontend Dev Guayaquil!' } } })
Interfaces Dinámicas
Interfaces Dinámicas
Interfaces Dinámicas Uso de “directivas” en HTML
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: '', } },
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: '', } },
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: '', } },
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 }, },
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 }, },
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 }, },
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 }, },
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
Demo 2 ejemplos
Compose Tweet
Star Wars Characters