- [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.