Monterail Academy
Co dziś będziemy robić
Habit Tracker

co jest potrzebne żeby zacząć



Środowisko
instalowane razem
co jest potrzebne żeby zacząć
npm install --global poi

TWORZYMY PROJEKT
Nowy folder i dwa pliki:

Zadanie 1. TWORZYMY PROJEKT
- Uruchom poi
- Włącz przeglądarkę (biała strona)
$ npm install --global poi
$ poi index.js

Hello World!
"montowanie" komponentu, wersja fiddle

template: '<...>'
render () { ... }
- fiddle dostarcza "Vue" jako global
Hello World!
"montowanie" komponentu, wersja poi

nazwa zmiennej w pliku
ścieżka/nazwa modułu
- poi dostarcza "Vue" jako moduł
Hello World!
SFC - Single File Component

- ścieżka lokalna zawsze od ./
- bez rozszerzenia .vue lub .js
Hello World!
SFC - Single File Component

- to samo co `<App />` w html
Hello World!
SFC - Single File Component

-
index.js - montowanie Vue i render
- App.vue - SFC - kod komponentu
zadanie 2. Hello vue world

zadanie dodatkowe: input field

data i v-for
lista elementów
Stan aplikacji
Reprezentacja wizualna
render
template
data
v-for="element in list"
list: ["a", "b", "c"]
lista elementów
count | label |
---|---|
2 | pizza |
1 | kebab |
3 | pierogi |
data () {
return {
items: [
{ count: 2, label: 'pizza' },
{ count: 1, label: 'kebab' },
{ count: 3, label: 'pierogi' }
]
}
}
dane
lista elementów
2x pizza
<ul>
<li v-for="item in list">
{{ item.count }}x {{ item.label }}
</li>
</ul>
1x kebab
3x pierogi
3x pierogi
- usunięcie ostatniego elementu
- dostosowanie treści pozostałych
1x kebab
3x pierogi
data () {
return {
items: [
{ count: 2, label: 'pizza' },
{ count: 1, label: 'kebab' },
{ count: 3, label: 'pierogi' }
]
}
}
lista elementów
2x pizza
<ul>
<li v-for="item in list" :key="element.label">
{{ item.count }}x {{ item.label }}
</li>
</ul>
1x kebab
3x pierogi
- usunięcie właściwego elementu
data () {
return {
items: [
{ count: 2, label: 'pizza' },
{ count: 1, label: 'kebab' },
{ count: 3, label: 'pierogi' }
]
}
}
HABIT
{
id: Number,
name: String,
color: String,
track: Array,
weeklyTarget: Number
}
Zadanie 3. habit list
{
id: 1234,
name: "wake up early",
color: "#bada55",
track: [],
weeklyTarget: 5
}
- wprowadź dane w postaci listy obiektów
- wyświetl listę obiektów z nazwami

Dodatkowe:
* pokoloruj tekst
UI komponenty i layout
INSTALOWANIE ZALEŻNOŚCI
Element UI
http://element.eleme.io/



Element UI
http://element.eleme.io/
$ npm install element-ui
Element UI

- http://element.eleme.io/#/en-US/component/quickstart
- http://element.eleme.io/#/en-US/component/i18n
CSS załączamy jak JS
- dodaj el-checkbox na każdy dzień tygodnia
- dodaj el-progress
- wyznacz progress przez wyrażenie w html (ile %)
- dodaj guzik do usuwania elementu
zadanie 4. przypięcie danych


tip:
<el-checkbox-group v-model="habit.track">
$ npm install element-ui
Wydzielamy komponent
- Więcej niż jeden plik *.vue
- rejestracja komponentu
- props i :bind
Wydzielamy komponent

import HabitCard from './HabitCard'
export default {
components: {
HabitCard
}
}
Well - styled component
<Well>
<span>something something...</span>
</Well>
<template>
<div class="well">
<slot/>
</div>
</template>
<style scoped>
.well {
// moje style dla well
}
</style>
- slot - miejsce w które wpadnie "wnętrze" komponentu
- scoped style - działa tylko w swoim komponencie
Well.vue
Habit card - props
<HabitCard :habit="objectFromList"/>
<template>
<span>{{ habit.name }}</span>
</template>
<script>
export default {
props: {
habit: Object
}
}
</script>
HabitCard.vue
App.vue
odbieranie danych z zewnątrz
Habit card - props
definiowanie prop
// przekazanie zmiennej someData
// przekazanie ciągu 'someData'
// przekazanie ciągu 'someData'
<div
:prop="someData"
prop="someData"
:prop="'someData'"
>
<HabitCard :habit="objectFromList"/>
App.vue
Przygotuj oddzielne komponenty z props i actions:
- <Well>: komponent wyłącznie ze stylem ramki
- tylko template i style
- <HabitCard>: element listy, który
- używa <Well>
- przyjmuje obiekt habit (prop)
Zadanie 5. Komponenty

import HabitCard from './HabitCard'
export default {
components: {
HabitCard
}
}
<HabitCard :habit="objectFromList"/>
robimy Formularz
- @zdarzenie
- metody
- v-model
ZDARZENIA - V-ON (@)
<button @click="doSomething"/>
// ...
methods: {
doSomething (evt) {
console.log('clicked!', evt)
}
}
// clicked! MouseEvent { ... }
zdarzenia - v-on (@)
<button @click="doSomething($event, 'hello')"/>
// ...
methods: {
doSomething (evt, extraParam) {
console.log(extraParam, evt)
}
}
// hello MouseEvent { ... }
specjalna nazwa
zdarzenia - $emit
<button @click="emitRemove">remove</button>
// ...
methods: {
emitRemove() {
this.$emit('remove')
}
}
<MyComponent @remove="handleRemove"/>
MyComponent.vue
inny komponent
zdarzenia
<el-form @submit.native.prevent="onSubmit">
...
</el-form>
Modyfikatory
- native - chodzi nam tylko o event z html, nie z $emit
- prevent - nie rób prawdziwego submit ( preventDefault() )
v-model
<input v-model="someData" />
<input
:value="someData"
@input="someData = $event.target.value"
/>
Formularz

Formularz
Nasz formularz potrzebuje:
- nazwę trenowanej czynności
- tygodniowy cel wykonania czynności
- opcjonalnie: kolor
{
id: Number,
name: String,
color: String,
track: Array,
weeklyTarget: Number
}
-
utwórz komponent z formularzem
-
dodaj edytowany element do listy na akcję @submit
-
reset formularza po dodaniu
zadanie 6. Formularz

-
Zadania z *:
-
usuwanie elementu listy
-
color picker
-
animacja dodawania
<el-form @submit.native.prevent="onSubmit">
...
</el-form>
vue-router
- przenosimy formularz do osobnej strony
- wydzielamy osobny moduł na dane
vue-router
$ npm install vue-router

vue-router

jak "slot" dla zawartości podstrony
vue-router

vue-router
import HabitList from './components/HabitList.vue'
import NewHabit from './components/NewHabit.vue'
import EditHabit from './components/EditHabit.vue'
Problemy:
- jak współdzielić dane między stronami?
- jak ograniczyć operacje na danych do kilku przewidywalnych akcji?
Centralny zbiór danych
jak współdzielić dane między stronami?
Centralny zbiór danych


jak ograniczyć operacje na danych?
Centralny zbiór danych


Zadania z *:
- przygotuj stronę do edycji istniejącego habitu
- animuj przejścia między stronami
- zapisuj i odczytuj dane z localstorage (persystencja)
Zadanie 7. Router
- oddziel dane do osobnego pliku store.js
- dodaj router i zdefiniuj "routes"
- Przygotuj osobną stronę do dodawania habitu

<router-view/>
Zadania z *:
- przygotuj stronę do edycji istniejącego habitu
- animuj przejścia między stronami
- zapisuj i odczytuj dane z localstorage (persystencja)
Zadanie 7. Router
- oddziel dane do osobnego pliku store.js
- dodaj router i zdefiniuj "routes"
- Przygotuj osobną stronę do dodawania habitu

<router-view/>
Next steps: VUEX
monterail academy vue
By Pawel Grabarz
monterail academy vue
- 1,254