Vue.js
núria soriano
Por qué Vue?
Rápido
Vue + vue-router + vuex 26kb min+gzip
Se adapta a ti
Templates vs Render Functions vs JSX
Javascript vs Typescript
No opinionado
Escalable
Core: Declarative rendering & component system
Routing: vue-router
Large Scale State Management: vuex
Build system: vue-loader/vueify, vue-cli
SSR: vue-server-renderer
Fácil
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var vm = new Vue({
data: {
message: 'Hello World!'
}
}).$mount('#app')
<script>Anatomía de un componente
Vue Single File Component
Plantilla, lógica y estilo
Usando HTML + Javascript + CSS
O Pug, CoffeeScript, SASS…
Se importa como un módulo ES2015
Hot-reload, scoped CSS…
<template>
<my-component></my-component>
</template>
<script>
import 'myComponent' from './MyComponent'
export default {
name: 'app',
components: {
myComponent
}
}
</script>
<style lang="scss" scoped>
div {
color: blue
}
</style>
<template>
<div>
<div>
{{ item.name }}
</div>
<img :src="url"/>
<button @click="nombreDeLaFuncion"></button>
<div v-for="item in items">{{ item.name }}</div>
<div v-if="someCondition">
print this
</div>
<div v-else>
print that
</div>
<div v-show="someOtherCondition">
display this
</div>
</div>
</template>Template
Propiedades
data() {
return {
collection: [1, 2, 3, 4]
}
}Métodos
methods: {
addNumbers() {
var moreNumbers = [5,6,7,8]
this.collection.push(...moreNumbers)
}
}Propiedades computadas
Reactivas
computed: {
evenNumbers() {
return this.collection.filter(number => number %2 === 0)
}
}Solo se recalculan cuando es necesario
Lifecycle hooks
Ejecutar lógica en determinados momentos
created() {
http.get('http://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}Comunicación
entre componentes
Parent to Child
Child
export default {
props: [ 'propName' ],
// ...
}Parent
<child-component :propName="someData">
</child-component>
export default {
props: {
propName: {
type: Boolean,
default: true
},
otherProp: {
type: String,
required: true
}
},
// ...
}Child to Parent
Child
this.$emit('eventName', data)Parent
<child-component @eventName="method">
</child-component>Sync
Child
this.$emit('update:foo', newValue)Parent
<child-component :foo.sync="bar">
</child-component>Desde Vue 2.3
<child-component :foo="bar" @update:foo="val => bar = val">
</child-component>Routing
Router
import VueRouter from 'vue-router';
import User from 'src/components/User';
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<div id="app">
<router-view></router-view>
</div>Router
<router-link to="home"></router-link>
<router-link :to="{
name: 'Detail',
params: {
id: 1
}
}">
</router-link>
this.$router.push({
name: 'Detail',
params: {
id: 1
}
})State management
State Management
State Management
Vuex
Varios componentes son dependientes del mismo estado
Sincronizar estado sin necesidad de eventos
Solución escalable para aplicaciones complejas
Fácil de debuggar
El estado
const store = new Vuex.Store({
state: {
movies: [
{ id: 1, title: '...', saved: true },
{ id: 2, title: '...', saved: false }
]
}
})
const store = new Vuex.Store({
state: {
movies: [
{ id: 1, title: '...', saved: true },
{ id: 2, title: '...', saved: false }
]
},
getters: {
savedMovies: state => {
return state.movies.filter(movie => movie.saved)
}
}
})Objeto
No mutable directamente
Usar el estado en nuestros componentes
computed: {
movies () {
return this.$store.state.movies
},
savedMovies () {
return this.$store.getters.savedMovies
}
}
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
...mapState({
'movies'
}),
...mapGetters([
'savedMovies'
])
}
}Definir mutaciones
const store = new Vuex.Store({
state: {
movies: []
},
mutations: {
addMovie (state, movie) {
state.movies.push(movie)
}
}
})Mutaciones asíncronas: Acciones
const store = new Vuex.Store({
state: { ... },
mutations: { ... },
actions: {
getMovies ({ commit }) {
api.getMovies()
.then( data => {
data.forEach(movie => commit('addMovie', movie))
})
}
}
})Usar mutaciones y acciones en componentes
methods: {
addMovie (movie) {
return this.$store.commit('addMovie')
},
getMovies () {
return this.$store.dispatch('getMovies')
}
}
import { mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapMutations({
'addMovie'
}),
...mapActions([
'getMovies'
])
}
}Construir una SPA
Tutorial
Estructura del proyecto
├─ build/ # Configuración de webpack
├─ config/ # Configuración general, variables de entorno…
├─ src/
│ ├─ main.js # Archivo principal de entrada
│ ├─ App.vue # Componente raíz
│ ├─ components/ # Componentes
│ └─ assets/ # Assets procesados por webpack (sass…)
├─ static/ # Assets estáticos no procesados por Webpack
├─ .babelrc # babel config
├─ .postcssrc.js # postcss config
├─ .eslintrc.js # eslint config
├─ .editorconfig # editor config
├─ index.html # Plantilla html
└─ package.json # Scripts y dependencias
¡A volar!
nuria-fl
soriano.nuria@gmail.com
pincfloit
Introducción a Vue.js - AdaJS
By nuria-fl
