Learn how to conditionally render elements and render list elements in a loop.
- [Narrator] Next we'll see a bit more…template syntax and also discover how…we can take advantage of control flow techniques…for rendering content in a loop…as well as toggling the display of elements.…If the list of sports here were something…that we needed to pull from a database or an API…and rendered dynamically without knowing…how many there were, it might be helpful…to be able to loop through the values…as we render the associated form controls.…We can accomplish this easily using…a single div element with the v-for directive.…
And this takes an expression of the form item in collection.…So, for example, I might use interest in interests.…Although I could use any identifier for the first part,…like sport or eye for example,…this will refer to a new array called interests,…which contains the complete list…and not just the ones that the user has selected.…And I'm just going to reset this…to default to an empty array there.…
So this will have the effect of looping…through the interest array and adding…a new div to the DOM for each item.…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton