Čia yra išsamus žingsnis po žingsnio vadovas su konkrečiais kodo pavyzdžiais, kaip sukurti TodoList programą su Vue.js:
1 veiksmas: projekto nustatymas
Pradėkite kurdami naują Vue.js projektą naudodami Vue CLI. Atidarykite terminalą ir paleiskite šią komandą:
Taip bus sukurtas naujas katalogas todo-list-app
su pagrindine projekto struktūra ir priklausomybėmis.
2 veiksmas: sukurkite TodoList Component
Aplanke src
sukurkite naują failą pavadinimu TodoList.vue
. Tai bus pagrindinis programos komponentas TodoList.
: TodoList.vue
_
3 veiksmas: sukurkite TodoItem Component
Aplanke src
sukurkite naują failą pavadinimu TodoItem.vue
. Tai bus antrinis komponentas, atsakingas už atskirų darbų elementų pateikimą.
: TodoItem.vue
_
4 veiksmas: atnaujinkite TodoList Component
.vue TodoList atnaujinkite šablono skyrių, kad TodoItem s būtų pateikta naudojant v-for direktyvą.
: TodoList.vue
_
5 veiksmas: TodoList programos testavimas
Norėdami išbandyti TodoList programą, atidarykite failą „src/App.vue“ ir pakeiskite esamą turinį šiuo kodu:
6 veiksmas: paleiskite programą
Išsaugokite visus pakeitimus ir paleiskite kūrimo serverį terminale paleisdami šią komandą:
Apsilankykite http://localhost:8080
savo žiniatinklio naršyklėje, kad pamatytumėte, TodoList kaip programa veikia.
Šis pavyzdys parodo pagrindines a
TodoList programa naudojant Vue.js. Vartotojai gali matyti darbų sąrašą, pažymėti juos kaip užbaigtus, ištrinti ir pridėti naujų elementų naudodami pateiktą formą. Užduočių elementų būsena tvarkoma komponente TodoList, o kiekvienas atskiras užduoties elementas pateikiamas naudojant komponentą TodoItem.
Atkreipkite dėmesį, kad tai yra supaprastintas diegimas ir jūs galite tinkinti ir toliau tobulinti programą pagal savo konkrečius poreikius.