Learn how to bind data to any HTML attribute or inner text.
- [Instructor] Now we'll look at some of the different ways…you can set up data binding with Vue.…We've seen that you can use string interpolation…to cause property values in the data object…to be rendered to the page.…So knowing that,…you might for example try to create a dynamic link…using string interpolation inside a href value, like so.…Of course, we'd need to define url…as a property of our data object.…And we'll just use Google's homepage for a quick example.…
Before we try this out,…I'll go ahead and enable autosave in CloudNine…since we'll be updating and refreshing a lot…and it'll save some keystrokes.…Let's click the gear icon in the upper right…and then under experimental,…we can turn on autosave,…which, although still experimental,…is pretty reliable for a single user.…Now if I refresh the page in Chrome…and then click the home link,…I can see that it didn't try to substitute anything…for that expression in curly braces.…
If I go back and open the Chrome developer tools with F12,…I can see that in the console we get a very useful warning…
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