Original subtitles

This course assumes a basic knowledge

2 of HTML, CSS, and JavaScript.

3 We'll be covering everything you need to know

4 to start building apps in Vue,

5 or to add Vue to an existing project.

6 Now before we dive into code,

7 let's take a look at the project we'll be building.

8 As you can see, it is a product page.

9 We're gonna introduce new Vue concepts

10 and add features as we go.

11 Up here you can see that we have In Stock

12 and below we have an Add to Cart button.

13 Now when I hover over these colors,

14 not only does the image change,

15 but this Out of Stock and In Stock is changing,

16 and that is disabling and enabling the button.

17 We also have a Cart here, which we can add to,

18 and we'll be developing some other features, such as tabs,

19 and we'll work with forms to add reviews,

20 so it'll be a pretty comprehensive application.

21 I also wanted to show you the Vue DevTools.

22 This is a really handy tool.

23 It's not only gonna show you

24 the structure of your application,

25 but you can also dive in and see the data,

26 the props, all sorts of useful information

27 about what is happening with your application

28 and with your individual components.

29 You'll learn all about this.

30 So please have this installed.

31 I'm using Chrome and if you are using Chrome,

32 and you're also running local files,

33 make sure to have this clicked, Allow access to file URLs.

34 This'll make sure that Vue activates on your project.

35 All right, now that we have everything we need,

36 let's start coding.

37 Here's a code that we're starting off with.

38 We've got an HTML file, and that is linked with a script tag

39 down to our main.js.

40 In our JavaScript, we have a variable called product,

41 whose value is Socks.

42 Now, we have a common problem in front-end development.

43 We want to get this data into our HTML.

44 Fortunately, Vue has a very simple way to do that.

45 First, we'll go to vuejs.org

46 and we'll look at the introduction page.

47 We're gonna take this script here,

48 copy it over and paste it,

49 and this will install Vue.

50 That's as simple as it gets.

51 All right we're gonna change out our variable here

52 and change it to app and make a new Vue instance.

53 We're gonna pass in some information.

54 So here we're putting an element property.

55 We're going to say app,

56 so this is going to connect to the div up here,

57 with the id of app.

58 So now our Vue instance is plugged into that div.

59 We're also gonna give it some data.

60 In this case, we're moving that variable,

61 product = 'Socks'.

62 Now it's becoming our data.

63 If we refresh, we have the same information.

64 That's because we haven't told that data where to go.

65 So as you can see, Product goes here.

66 So let's switch that out for product.

67 And when we do that, that will pull in the actual product

68 from our Vue instance's data.

69 We refresh again, and Socks is appearing.

70 Awesome, it worked!

71 Now let's explore a little deeper,

72 how this is actually working.

73 In our JavaScript, we say new Vue.

74 This creates a new Vue instance,

75 which is the root of a Vue application.

76 You can think of it like a heart, that powers everything.

77 It's created by passing an options object into it,

78 which has a variety of optional properties

79 which are used to store data and perform actions.

80 In order to form a relationship

81 between the Vue instance and part of the DOM,

82 we use the property el.

83 Here we are specifying that we'd like to plug our instance

84 into the div with the id of app.

85 Now this div, and the content within it,

86 is hooked up to our instance.

87 The instance can also have a property for data.

88 Here we're giving our instance a product,

89 whose value is Socks.

90 In order to display Socks,

91 we're using these double curly braces up here.

92 You can think of them somewhat like a phone,

93 which has a direct line into another phone

94 in the Vue instance.

95 So when we reference product up here,

96 it's as if we're asking our cell phone below,

97 what's the value of product?

98 And the phone says, Socks,

99 and Socks appears on the webpage.

100 This double curly brace syntax is called an Expression.

101 You may already be familiar with them.

102 They're used to produce or evaluate a value.

103 You can use them to add a character,

104 or number to your data, to combine values,

105 to perform conditional logic with a ternary operator,

106 to run methods on your data,

107 along with a lot of other use cases.

108 If we were to change Socks to Boots,

109 our expression would receive the updated value product

110 and the h1 would update accordingly.

111 But why?

112 Well, Vue is reactive.

113 In other words, the instance's data is linked

114 to every place that data is being referenced.

115 So if we are referencing product in multiple elements,

116 both elements would update to display product's new value.

117 Anywhere that relies on our instance's data,

118 will update when that data changes.

119 Let's open the Console

120 and show this reactivity happening live.

121 So here I am, back in my application,

122 and I'm gonna open the Console.

123 And I'm gonna type in app,

124 again that's the name of our Vue instance,

125 then product, which is the name of our data,

126 and I'm gonna give it a new value,

127 Coat, in this case.

128 Now Socks changes to Coat.

129 If I change Coat, to say, Compass,

130 Coat will change to Compass.

131 So there it is.

132 Our h1 is immediately updating with that new data value

133 because of the reactivity system.

134 All right, let's review.

135 So the Vue instance is the heart of the application.

136 It plugs in to an element in the DOM,

137 and that element can use an expression

138 to display that instance's data.

139 Time for a challenge.

140 Add a description to your data object.

141 Then use an expression

142 to display the description beneath the h1.

143 You can find a link to the Code Playground below.