1
00:00:00,420 --> 00:00:04,230
Every Vue application starts with
at least two things, some data and

2
00:00:04,230 --> 00:00:05,690
a template.

3
00:00:05,690 --> 00:00:09,093
You can think of a template as
a representation of how you want

4
00:00:09,093 --> 00:00:13,115
the structure of your application,
the HTML, to relate to your data.

5
00:00:13,115 --> 00:00:18,699
In other words, rather than hard code data
about cats, for example, into the HTML,

6
00:00:18,699 --> 00:00:23,760
you'd use placeholders to tell Vue where
to place the data within your HTML.

7
00:00:23,760 --> 00:00:29,893
For example,
let's create a div with an ID of helloVue.

8
00:00:33,911 --> 00:00:36,291
This element, and
everything nested within it,

9
00:00:36,291 --> 00:00:39,080
is what we will hook up
to Vue as a template.

10
00:00:39,080 --> 00:00:41,570
Inside the helloVue div,
I'll create an h1.

11
00:00:43,800 --> 00:00:47,254
Normally, we'd put some
text between the text, but

12
00:00:47,254 --> 00:00:51,628
because this is going to be a Vue
template, instead of normal text,

13
00:00:51,628 --> 00:00:56,579
we're going to add placeholders that
will tell Vue where to place the data.

14
00:00:56,579 --> 00:00:57,948
In a Vue template,

15
00:00:57,948 --> 00:01:03,696
we can use something known as mustache
syntax to tell Vue where to display data.

16
00:01:03,696 --> 00:01:07,562
It's called mustache syntax
because it uses curly braces,

17
00:01:07,562 --> 00:01:10,300
which look a bit like sideways mustaches.

18
00:01:10,300 --> 00:01:15,491
I'll create a placeholder
called {{ title }}.

19
00:01:19,354 --> 00:01:21,485
Save, then open up the app.js file.

20
00:01:21,485 --> 00:01:26,182
Every Vue project begins
with creating a new Vue

21
00:01:26,182 --> 00:01:30,300
instance with a constructor called Vue.

22
00:01:30,300 --> 00:01:35,060
The instance can be optionally
saved to a variable.

23
00:01:36,925 --> 00:01:41,140
The Vue Instance takes an object,
and this object takes some options,

24
00:01:41,140 --> 00:01:45,287
some properties containing important
information about the data and

25
00:01:45,287 --> 00:01:47,970
methods we'll be using with our templates.

26
00:01:49,260 --> 00:01:53,691
We'll learn about a few options we
can pass to the Vue instance, but

27
00:01:53,691 --> 00:01:57,440
the two main things we need to
get started are el and data.

28
00:02:04,764 --> 00:02:06,492
The el property, short for

29
00:02:06,492 --> 00:02:11,398
element, is how we tell Vue which HTML
element to attach the Vue instance to.

30
00:02:11,398 --> 00:02:18,270
In our index.html, we've already created
a Vue template with an id="helloVue".

31
00:02:19,833 --> 00:02:22,992
So that's what we'll pass to
the Vue instance as a string.

32
00:02:28,920 --> 00:02:31,528
Notice that I've included
a hash symbol here.

33
00:02:31,528 --> 00:02:35,370
We're telling Vue that we intend
to use an HTML element with an ID

34
00:02:35,370 --> 00:02:37,000
of helloVue as our template.

35
00:02:37,000 --> 00:02:41,514
So Vue should attach, or
mount itself, to that element.

36
00:02:41,514 --> 00:02:46,708
The data property on the Vue instance
is an object where I can define

37
00:02:46,708 --> 00:02:52,013
which data I want to connect with
which placeholder in my template.

38
00:02:52,013 --> 00:02:56,080
In my HTML, I created a placeholder and
called it, title.

39
00:02:56,080 --> 00:02:59,870
So now in my data object,
I can add a property called title.

40
00:03:03,010 --> 00:03:05,080
Now I can set title to whatever I want.

41
00:03:08,500 --> 00:03:10,990
Let's save and open this up in a browser.

42
00:03:21,673 --> 00:03:24,878
Instead of seeing the word
title in curly braces,

43
00:03:24,878 --> 00:03:29,168
we see the value of what we've set
as the title in the Vue instance.

44
00:03:29,168 --> 00:03:34,113
So whatever I've defined as title
in my Vue instance is what we'll

45
00:03:34,113 --> 00:03:36,509
see when the page is displayed.

46
00:03:36,509 --> 00:03:38,471
Let's go back to app.js and

47
00:03:38,471 --> 00:03:42,902
change the value of title to
HELLO WORLD!!!!, in all caps.

48
00:03:45,046 --> 00:03:47,379
With some extra exclamation points.

49
00:03:48,690 --> 00:03:52,890
Save and refresh the page and
you'll see that the title has changed.

50
00:03:52,890 --> 00:03:55,720
Associating data with a template,
like we've done here,

51
00:03:55,720 --> 00:04:00,130
is a simple example of a concept called
data binding, which basically means that,

52
00:04:00,130 --> 00:04:04,770
whenever the value of this title
property changes in our Vue instance,

53
00:04:04,770 --> 00:04:08,070
you will automatically update it for
us in the template.

54
00:04:08,070 --> 00:04:11,930
As we continue to learn Vue it will
become clear why this is a convenient and

55
00:04:11,930 --> 00:04:14,410
powerful way to organize your code.

56
00:04:14,410 --> 00:04:18,240
It's easier to see how the data
automatically updates from the console.

57
00:04:19,380 --> 00:04:24,468
I can open up the console and
change the value of

58
00:04:24,468 --> 00:04:30,079
title by referring to
the name of the Vue instance,

59
00:04:30,079 --> 00:04:34,140
which we named earlier helloWorld.

60
00:04:36,222 --> 00:04:42,945
I can access and change the title
property using dot notation.

61
00:04:46,246 --> 00:04:50,007
And, you'll see that over here
the title changes instantly.

62
00:04:50,007 --> 00:04:53,927
Note that we're not working with
a database or anything here, so

63
00:04:53,927 --> 00:04:57,220
this change will only persist
until the page reloads.

64
00:04:57,220 --> 00:05:01,901
If I refresh the previous data, what I
have coded into the file will reappear.

65
00:05:01,901 --> 00:05:07,190
I can create and bind as many data
properties as I want to my template.

66
00:05:07,190 --> 00:05:10,178
Let's add a new property to
the Vue instance called message.

67
00:05:19,512 --> 00:05:22,886
If you're following along with me,
remember that this is an object,

68
00:05:22,886 --> 00:05:25,940
so you need a coma after
your first data property.

69
00:05:25,940 --> 00:05:28,955
Now, I can add the message property
as a placeholder to my template.

70
00:05:30,888 --> 00:05:31,702
Save this.

71
00:05:34,542 --> 00:05:37,349
And we'll put the placeholder
between paragraph text.

72
00:05:41,412 --> 00:05:48,936
Here I called it message, so in my HTML,
I will call it {{ message }}.

73
00:05:48,936 --> 00:05:52,880
Save, refresh the browser,
and you'll see my new data.

74
00:05:52,880 --> 00:05:57,720
You can see that instead of hard coding my
data into the HTML I'm instead building

75
00:05:57,720 --> 00:06:02,350
a template containing placeholders that
tell Vue where my data should go.

76
00:06:02,350 --> 00:06:06,580
Throughout the course we'll see many
examples of how useful this can be.

77
00:06:06,580 --> 00:06:10,745
Templating and data binding are used, in
one form or another, in all of the popular

78
00:06:10,745 --> 00:06:14,785
front-end frameworks, so we'll explore a
lot moe of what you can do in them in Vue.