¿Otro framework más?

Puedo incluir funcionalidad de forma progresiva

En la charla nos centraremos en SPA Medias

Compagina 2 tipos de Data Binding

Utiliza Virtual DOM

Sin dependencias, escribe HTML, CSS y JS

No es nada intrusivo en el flujo de trabajo convencional de cualquier front

Nuestra Webapp empieza por MAIN.JS

					import Vue from 'vue';
					import App from './layouts/app.vue';
					
					new Vue({
						el: '#app',
						template: '<app/>',
						components: { App }
					});	
					

Elementos de un template

• {{ }}

  La interpolación

  Permiten pintar datos de nuestro modelo por pantalla mediante un marcado de llaves.
• V-

  Las directivas

  Son atributos HTML personalizados que aumentan el comportamiento de las etíquetas estándar o de los componentes. Los oficiales de Vue empiezan por v-
• |

  Los filtros

  Son transformaciones visuales sobre datos del modelo. Convertir 2000 en 2.000,00€ por ejemplo.

Ejemplo

Pintar películas si existen resultados

<template>
	<subpanel v-if="movies">
		<h2>Se han encontrado {{ movies.total_results | normalize }} resultados</h2>
		<movie 
			v-for="movie in movies.results" 
			:key="movie.id"
			:id="movie.id" 
			:title="movie.title" 
			:posterPath="movie.poster_path" 
			:voteAverage="movie.vote_average"
			:voteCount="movie.vote_count"
		/>
		<pagination 
			:page="movies.page" 
			:totalPages="movies.total_pages"
			@page="searchMovieByPage" 
		/>
	</subpanel>
</template>
					

DATA

Estado interno de un componente. Son reactivos y mutables. Para nosotros son un objeto plano. Ayudan como esquema interno

METHODS

Son funciones que manejan los eventos disparados por el usuario

COMPUTED

Propiedades que reacciona a cambios realizados en el estado

Comunicación entre componentes

Propiedades y Estados

SLOT

Permite crear componentes cuya etiqueta HTML es de tipo bloque

¿Cómo reutilizo lógica entre componentes?

Con MIXINS

¿Cómo escalo la aplicación con diferentes pantallas?

Con VUE-ROUTER

        import Vue from 'vue';
        import Router from 'vue-router';
        import HomeView from '@/views/home-view.vue';
        import AboutView from '@/views/about-view.vue';
        import MovieView from '@/views/movie-view.vue';

        Vue.use(Router);
	
        export default new Router({
            routes: [
                { path: '/', name: 'home', component: HomeView },
                { path: '/about', name: 'about', component: AboutView },
                { path: '/movie/:movieId', name: 'movie-detail', component: MovieView, props: true }
            ]
        });