Vue.js

Czym jest Vue?

Framework JS
Data utworzenia: Luty 2014
Twórca:

Dlaczego Vue?

Framework	Rozmiar zminifikowanej paczki produkcyjnej
React 16.2.0 + React DOM	97.5K
Angular 2	566K
Vue 2.4.2	58.8K

https://gist.github.com/Restuta/cda69e50a853aa64912d

Benchmarki

https://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html

Vue vs. React

Wirtualny DOM
Reaktywne komponenty
Zawierają tylko główny rdzeń (core), resztę obsługują biblioteki

Ale...

Lepsza optymalizacja renderingu
Przerzucenie pisania widoku na HTML-like templates
Ograniczanie styli do komponentu
Możliwość używania jak jQuery

Vue vs AngularJS

Podobna składnia
Data binding (dwustronny vs jednostronny)
Optymalizacja

Vue vs Angular (≥2)

TypeScript

Jak zacząć?

Tak, jak z jQuery!




  {{ message }}


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue CLI

Co można zrobić?

Wiązanie atrybutów



  To jest link


new Vue({
  el: '#bind',
  data: {
    link: 'http://agh.edu.pl'
  }
})

To jest link

Wiązanie zdarzeń

new Vue({
  el: '#bind-events',
  data: {
    message: 'To zostanie wyświetlone jako alert'
  },
  methods: {
    showAlert: function () {
      alert(this.message);
    }
  }
})

Instrukcje warunkowe

new Vue({
  el: '#cond',
  data: {
  message: 'Widać mnie?',
    show: false
  },
  methods: {
    showMsg: function () {
      this.show = !this.show;
    }
  }
})

Pętle


	 {{ option }}

new Vue({
  el: '#loop',
  data: {
    options: ['Pizza', 'Kebab', 'Sushi', 'Bibimbap']
  },
  methods: {
    pickFood: function (option) {
      alert('Jemy: ' + option);
    }
  }
})

Kliknij: {{ option }}

Reaktywność


  Moja nazwa dania: {{ meal }}

new Vue({
el: '#model',
  data: {
    meal: ''
  }
})

Moja nazwa dania: {{ meal }}

Komponenty

Vue.component('resto', {
  props: ['place'],
  template: '{{ place.text }}'
})

new Vue({
  el: '#components',
  data: {
    places: [
      { id: 0, text: 'Kebab' },
      { id: 1, text: 'Pizza' },
      { id: 2, text: 'Sushi' }
    ]
  }
})

Komponenty

Okiem psuja

Computed properties

const br1 = new Vue({
  el: '#breaker1',
  computed: {
    now: function() {
      return Date.now()
    }
  },
  methods: {
    realNow: function() {
      return Date.now()
    }
  }
})

Teraz jest: {{ now }}

Properties

const br2 = new Vue({
  el: '#breaker2',
  data: {
    user1: {
      name: 'SRiR'
    },
    user2: {
      name: 'ZTI'
    }
  }
});
br2.admin = { name: 'DDay', passwd: '123456' };
br2.user1.passwd = '141592';
Vue.set(br2.user2, 'passwd', '141592');

{{ user1.passwd }}
{{ user2.passwd }}
{{ admin.passwd }}

Tablice

addSushi: function() {
  this.options.push({ name: 'suszi', from: 'Japan' })
},
correctSushi: function() {
  this.options[1].name = 'sushi'
},
maybeBibimbap: function() {
  this.options[1] = { name: 'bimbap', from: 'Korea' }
},
readdBibimbap: function() {
  Vue.set(this.options, 1, { name: 'bimbap', from: 'Korea' })
},
correctBibimbap: function() {
  this.options[1].name = 'bibimbap'
}

{{ option.name }} from {{ option.from }}

Dodatki

SSR i kompilacja statyczna

Vue Router


  
    Restauracje
    Jedzenie

const Resto = { template: 'Resto' }
const Food = { template: 'Food' }
const routes = [
  { path: '/resto', component: Resto },
  { path: '/food', component: Food }
]
const router = new VueRouter({
  routes
})
const app = new Vue({
  router
}).$mount('#app-router')

Vuex

State Management Pattern

const store = new Vuex.Store({
  state: {
    name: ''
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
})

https://vuex.vuejs.org/

Vue Devtools

Komponenty UI

VuePress

Generator stron statycznych

https://vuepress.vuejs.org/

Oprócz tego...

Zadanie!

https://codesandbox.io/s/vnm29p1w90

Zadanie dodatkowe

Korzystając z API, zaprojektuj SPA z wewnętrznym routingiem

https://github.com/toddmotto/public-apis

https://github.com/abhishekbanthia/Public-APIs