Learn about using the v-model for 2-way binding with modifiers for additional functionality and validation.
- [Instructor] It's time now to take a look at how we…can use two-way data binding, so that updates to our model…are reflected in our UI and vice-versa.…For many of the rest of our examples, we're going to be working…on an existing website for a fictitious company…called H+ Sport, which sells sports drinks, vitamins,…and apparel.…I've downloaded part of the main template,…which you can find in the exercise files,…under chapter one, 01_04, the start folder, H+ Sport.…
So, what we can do is just drag everything inside of…this folder into the root folder of our Cloud9 workspace.…We're going to be working on the subscribe.html page here,…and for now, I want you to completely ignore just about…all of the static markup in this file.…We're using this template to make our page look a little…more professional, and also because we're going to be using…the H+ Sport API later on to work with some test data…that we'll fetch using Ajax.…
So, if you just scroll down a little, or if you do ctrl-F…and search for the word view, you should come to this…
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