Learn about one-way data binding and reactivity when data changes.
- [Instructor] We know that Vue manages and displays data. Let's talk a little bit about what that means conceptually and cover some of the jargon that goes along with it. Vue helps visualize data. When we're creating web pages or working with CMSs that create pages for us, in a sense we're just displaying data. Our data might be products in a store, news articles, photographs or other artwork. But in a sense, it's all data. And of course on a lower level we all work with web forms which have their own data as well, the value of their fields. Vue makes it easier to manage the data that's displayed in a user interface. In other words, visualizing the data.
This kind of programming is called imperative, because it's basically a series of commands, pretty low level commands for a web browser, specific DOM elements and all that. It can feel a little bit like micromanaging. Vue works in a way that's called declarative, where you declare or define your components and data, and how they all interact in response to events at a higher level and in advance. In the case of Vue you're actually making templates. You still assign event handlers and so forth, but the relationships are between higher level components not between specific DOM elements. And everything is managed much more by Vue than by the particulars of your code.
Inside that root component we'll probably also have other components, which have their own template, data, and functions. One of the main tasks when planning a Vue app or any other component based UI toolkit is figuring out what data we have and what components we'll need to represent it visually. We will of course probably change things as we're building and learn more, but it's good to think about it in advance. With Vue you don't have to build any custom components if your needs are simple, but as things get even a little bit interesting, you're probably going to end up building some. Before we leave this conceptual area let's get a little more Vue related jargon out of the way.
Directives are like custom HTML attributes that we can use in templates to get custom behaviors. They all start with V hypen. Like v-for. If you've every used the original version of angular, this will look familiar. Props are the main way to pass data around to components. We'll get into more detail on this, but basically components can have data that they own and then they can pass data to other components via props, which look a lot like custom HTML attributes as well. One way data flow refers to the way the data are passed around in Vue, it's all one way and that way is downhill from the parent component down through their children.
Data do not flow from the children upward. If we need to pass data upward in Vue, we usually use custom events. Child components can emit events that can be listened for in parent components, which can modify their data, potentially modifying the props, which they send back down to their children. Vue maintains its own representation of the DOM for the purpose of figuring out what has changed and what needs to be updated on your page in response to those changes. This virtual DOM and the ways that Vue figures out what to update when something changes are some of the main ingredients in Vue's secret sauce. So that covers what we need in terms of concepts and terminology to start out, so let's move on.
- Installing Vue.js and Vue devtools
- Creating interactive components
- Adding data to components
- Listening for events
- Scaffolding components
- Building and wiring forms
- Animating transitions
- Incorporating live data via REST APIs
- Adding third-party Vue components