Vue concepts and jargon - Vue.js Tutorial

- [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. One way that Vue tries to make this easier is by being declarative. Often when we're building up interactive pages with unassisted JavaScript, jQuery or what have you, we tie functions to events that say a button just got clicked or someone typed something in this field. Those functions then collect all the bits of the page they need to fulfill whatever the interaction is that we've specified. They'll grab form data, DOM elements and so on. Then we specify what we want to happen with those collected bits using code that's very tied to the state of the DOM at that particular point in time. We have to go track down all those DOM elements and all that sort of thing. 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. This is especially important when you have multiple instances of a component on a page. You don't have to go looking for which one you need, Vue is going to handle that for you already. I don't want to make this sound too much like magic, you're definitely still writing your fair share of JavaScript, but Vue does make many things easier. When we're using Vue we start with one or more instances. An instance is just a container for the data template and any functions we need. And it serves as the root component. There can be multiple Vue instances per page, maybe one for a highly interactive search bar and another one for a shopping cart. Or there can be just one if we're building a single page app. 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.