Vue.JS

The Progressive JavaScript Framework

Marani Matias Ezequiel

Estudiante de ing. sistemas && Desarrollador && Profesor

|| @maranimatias

Un poco de historia.

Creado por Evan You, cuando estaba trabajando en Google Creative Labs.

Evan You:

"I figured, what if I could just extract the part that I really liked about Angular and bulid something really lightweight without all the extra concepts involved?"

@youyuxi

¿Qué es Vue?

  • Es un Framework JavaScript código abierto para construir interfaces de usuario
  • Enfocado en el patron MV-viewModel
  • Posee conceptos de Angular y React
  • Con menor complejidad
  • Primer lanzamiento en 2014, la v2 en abril del 2016

Comparando con Angular.JS - El original.

  • Similitudes, ng-if, ng-show, ng-repeat.
  • Directivas y Filtros.
  • Angular actualiza directamente el DOM.

Comparando con React.

  • React es una librería.
  • Vue usa template, React JSX.
  • Vue usa mejor el Virtual DOM.
  • Usar Redux es posible, Vuex librería oficial.
  • React Native - Weex.

Comparando con Angular.

  • TypeScript
  • Vue posee mayor flexibilidad, Angular define una estructura.
  • Vue prevé escalar aplicaciones.
  • El core de Vue es 4 veces más liviano.

Lo más importante

Progresivo.

Renderizado declarativo.

Reactivo.

Componente functional.

Basic App Vue

<script src="https://unpkg.com/vue"></script>

          <body>
            

              
{{ message }}

              
            

            
          <body>

Un Componente Vue


            Vue.component('hello-component', {
              template: '#hello',
              data: function () {
                return {
                  message: 'Welcome to your Vue.js app!'
                }
              }
            });
          

            
          

          <body>
            

              
            

          </body>

Métodos

Methods


            
          

            Vue.component('hello-component', {
              template: '#hello',
              data: function () {
                return { message: 'Welcome to your Vue.js app!' }
              },
              methods: {
                change: function(value) {
                  this.message = "new " + value;
                }
              }
            });

Eventos

Eventos para teclas


          

          

          
Do something

El evento submit no recargara la pagina.

Propiedades calculadas

computed


            
          

            Vue.component('hello-component', {
              template: '#hello',
              data: function () {
                return { message: 'Welcome to your Vue.js app!' }
              },
              methods: { /* ... */ },
              computed: {
                reversedMessage: function () {
                  return this.message.split('').reverse().join('')
                }
              }
            });

Ciclo de vida de un Componente

Usar los eventos en nuestro componente


              Vue.component('hello-component', {
                template: '#hello',
                data: function () {
                  return { message: 'Welcome to your Vue.js app!' }
                },
                methods: { /* ... */ },
                computed: { /* ... */ },
                beforeCreate: function(){ /* ... */ },
                created: function(){ /* ... */ },
                beforeMount: function(){ /* ... */ },
                mounted: function(){ /* ... */ }
                beforeUpdate: function(){ /* ... */ },
                updated: function(){ /* ... */ }
              });

directives && filters

Directivas de control de flujo


              
 Mayor 

              <p v-else> Menor </p>
            

              

                
 Math.random() Mayor que 0.5

              

            

              
    
                
  • 
                  {{ item.message }}
                
    • 
                
  • 
                  {{ parentMessage +" - "+ index +" - "+ item.message }}
                
    • 
              

              

                {{ key + ": " + value }}

atributos vinculados HTML

o sintaxis abreviada :

Directivas personalizadas


              <input v-focus>
            

              // Register a global custom directive called v-focus
              Vue.directive('focus', {
                inserted: function (el) {
                  el.focus();
                }
              })

Podemos declara directivas locales para cada componente.

Filtros


              
{{ message | capitalize }}

            

              Vue.filter('capitalize', function (value) {
                if (!value) return '';
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.slice(1);
              });

Componentes padres e hijos

Comunicación entre padres e hijos.

Eventos Personalizados


              
            

              Vue.component('parent', {
                template: '#parent',
                data: function () { return { count: 0 } },
                methods: {
                  mParent: function (value) { this.count += value; }
                }
              });
              Vue.component('child', {
                props: ['clicks'],
                template: '',
                methods: {
                  mChild: function () { this.$emit('count', 5); }
                }
              });

Comunicación entre componentes sin parentesco


              var bus = new Vue()

              // in component A's method
              bus.$emit('id-selected', 1)

              // in component B's created hook
              bus.$on('id-selected', function (id) {
                // ...
              })

Slots


              

                
el título de padre

                
                  
Titulo

                  
 Se mostrará dentro de Slot

vue-cli


              $ # install vue-cli
              $ npm install --global vue-cli

              $ vue init webpack my-project

              $ cd my-project
              $ npm install
              $ npm run dev

Componentes de un solo archivo. (.vue)

Librerías || Plugins


              var Vuex = require('vuex');
              Vue.use(Vuex);

Vuex

Bibliografía

Gracias