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
26
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
36
Other Decks in Programming
See All in Programming
新宿ダンジョンを可視化してみた
satoshi7190
2
240
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Semantic search with Django and pgvector
pauloxnet
0
240
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
280
SIMD Parallel Programming with the Vector API
josepaumard
0
120
エンターテイメント業界で利用されるAWS
demuyan
0
210
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Invisible Side of Design
smashingmag
294
49k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Facilitating Awesome Meetings
lara
42
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Documentation Writing (for coders)
carmenintech
60
3.9k
Making Projects Easy
brettharned
108
5.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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