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
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Grafana Cloudとソラカメ
devoc
0
140
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Immutable ActiveRecord
megane42
0
130
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Formの複雑さに立ち向かう
bmthd
1
720
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Designing for humans not robots
tammielis
250
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fireside Chat
paigeccino
34
3.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1030
460k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Music & Morning Musume
bryan
46
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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