Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Frontend Applications with Vue 3
Overview
Introduction (2:01)
Prerequisite knowledge (2:02)
The sample notes application (3:02)
The Vue CDN notes app
Installation (2:55)
Display note titles from an array of notes (4:19)
Use methods to sort and format notes (7:45)
Select a note on title click (6:33)
Edit the selected note on editor input (5:36)
Create a new note with a button (2:43)
Delete the selected note with a button (4:55)
Filter notes on search input (6:48)
The Vue CLI notes app
Installation (6:51)
Split App.vue into components (8:51)
Split NoteContainer.vue into subcomponents (9:44)
Display note titles from an array of notes (5:54)
Use methods to sort and format notes (3:55)
Select a note on title click (11:40)
Edit the selected note on editor input (6:09)
Create a new note with a button (3:39)
Delete the selected note with a button (6:22)
Filter notes on search input (6:46)
Vue.js provide/inject for deeply nested components
Overview (2:23)
Provide/inject notes data (7:06)
Provide/inject selectedNote data (2:50)
Provide/inject selectNote method (3:42)
Provide/inject updateSelectedNote method (3:39)
Conclusion (2:55)
Vue.js Composition API for code organization and reuse
Overview (2:36)
Convert data and created options to Composition API (4:44)
Convert computed option to Composition API (2:51)
Convert methods option to Composition API (3:46)
Convert provide option to Composition API (3:40)
Using props and context arguments in the Composition API (3:36)
Conclusion (2:41)
Conclusion
Vue.js approaches (2:02)
Other frontend frameworks (2:13)
Display note titles from an array of notes
Reference code
Display note titles from an array of notes
Resources
Vue.js data properties
Vue.js v-for
Complete and Continue