Join Michael Sullivan for an in-depth discussion in this video Componentizing existing in-DOM templates, part of Learning Vue.js.
- [Narrator] In this video I'm gonna show you…what it would look like to refactor our in document template…for the near - earth objects grid…and turn it into a component.…We just did this on a smaller scale…with the astronomy picture of the day,…but doing it with this larger example…will highlight a few important concepts.…I'm gonna open the explorer by clicking this file icon…on the left and then I'm gonna start by adding…this grid_component folder to the workspace…which you can find in the exercise files.…First we'll look at grid_component.html.…
Converting a large template…to a string can be a little tricky.…So we're gonna start halfway at a point…where I've already moved some code…and mark up to external files.…I've taken all the CSS that was here before…and moved it into a separate file…and I've also taken…everything inside the bootstrap container…and used it for the component template…which is inside AsteroidGrid.js now.…So all of this mark up…is now a single quoted java script string…so that the double quotes can all live there happily,…
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI
Skill Level Intermediate
Web Programming Foundationswith Morten Rand-Hendriksen58m 44s Beginner
What you should know1m 29s
1. The Simplest Form
2. Essential Directives, Options, and Tools
3. Enhancing User Interfaces
4. Vue Components
Next steps2m 32s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.