Summary

In this chapter, we created our first real Vue app, with several useful functions, like a real-time markdown preview, a note list, and the local persistence of the notes. We introduced different Vue features, such as the computed properties that are automatically updated and cached as needed, the methods to reuse logic inside functions, the watchers to trigger code when properties change, lifecycle hooks to execute code when the Vue instance is created, and the filters to easily process expressions in our template. We also used a lot of Vue directives inside our template, such as ;v-model to bind form inputs, v-html to display dynamic HTML from our JavaScript properties, v-for to repeat elements and display lists, v-on (or @) to listen to events, v-bind (or :) to dynamically bind HTML attributes to JavaScript expressions or to apply CSS classes dynamically, and v-if to include or not template parts, depending on JavaScript expressions. We saw all of these features come together to build a fully functional web application, with Vue superpower helping us to get the work done without getting in the way.

In the next chapter, we will start a new project--a card-based browser game. We will introduce some new Vue features and will keep reusing all we know to continue building better and prettier web apps.