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

  1. usunięcie ostatniego elementu
  2. 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

  1. 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">

http://element.eleme.io/

$ 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

http://element.eleme.io/#/en-US/component/form

Formularz

http://element.eleme.io/#/en-US/component/form

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

http://element.eleme.io/#/en-US/

component/form

 

  • 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

Made with Slides.com

monterail academy vue

  • 1,213

More from Pawel Grabarz