In Depth Vue 3 For Beginners

Focused View

Chris Dixon

11:05:46

18 View

01 welcome to the class.mp4

02:00

02 what you will need for this course.mp4

00:44

03 what is vue js what can it do.mp4

02:50

04 overview of vue 3 changes.mp4

04:56

05 project source code.mp4

01:50

06 section intro first look at vue js.mp4

00:36

07 the vue instance.mp4

05:58

08 data lists.mp4

06:19

09 looping with objects.mp4

04:52

10 list indexes keys.mp4

03:55

11 binding attributes.mp4

06:58

12 mini challenge dynamic links.mp4

01:41

13 dynamic links my solution.mp4

02:35

14 javascript expressions.mp4

04:07

15 event handling.mp4

04:17

16 methods.mp4

02:13

17 raw html.mp4

02:08

18 vue lifecycle.mp4

09:44

19 section intro component basics.mp4

00:27

20 what are components.mp4

02:18

21 first look at components.mp4

04:19

22 props re using components.mp4

04:50

23 local components.mp4

05:09

24 section intro build tools single page applications.mp4

00:34

25 single page applications.mp4

03:10

26 the vue cli.mp4

06:21

27 project structure.mp4

08:10

28 the vetur extension.mp4

01:08

29 section intro countdown project.mp4

00:31

30 starter project download.mp4

03:32

31 single file components.mp4

10:18

32 making our events dynamic.mp4

05:19

33 calculating days left.mp4

06:40

34 conditional rendering.mp4

07:56

35 more on conditional rendering.mp4

04:07

36 computed properties.mp4

09:04

37 watchers multiple root nodes fragments.mp4

08:21

38 computed or watchers.mp4

02:54

39 ordering toggling past events.mp4

06:57

40 teleport.mp4

06:22

41 section intro forms events modifiers.mp4

00:28

42 our form component.mp4

06:24

43 styling positioning the form modal.mp4

07:13

44 emit custom events.mp4

05:44

45 binding form inputs.mp4

03:57

46 emit data with a custom event.mp4

06:52

47 emit multiple events.mp4

01:17

48 modifiers.mp4

02:07

49 validating our form.mp4

06:07

50 updating events.mp4

11:34

51 removing events stop propagation.mp4

09:34

52 section intro validation a deeper look at props.mp4

00:27

53 prop validation.mp4

08:56

54 non prop attributes.mp4

08:53

55 more on non prop attributes.mp4

06:09

56 section intro slots dynamic components.mp4

00:31

57 what we will be building starter project.mp4

02:43

58 project pages components.mp4

05:15

59 introduction to slots.mp4

02:04

60 overview page structure.mp4

05:51

61 slots in practice.mp4

07:10

62 passing dynamic data scope.mp4

04:18

63 fallback content.mp4

01:45

64 named slots.mp4

05:16

65 scoped slots.mp4

07:37

66 orders page.mp4

08:18

67 best sellers page.mp4

10:29

68 dynamic components.mp4

04:40

69 section intro provide inject.mp4

00:33

70 what is provide inject.mp4

02:37

71 setting up a provider.mp4

03:27

72 injecting data.mp4

06:53

73 mini challenge update orders best sellers pages to use provide inject.mp4

00:59

74 update orders best sellers pages to use provide inject.mp4

03:41

75 updating the provider from a child component.mp4

03:34

76 section intro introduction to routing.mp4

00:37

77 what we will be building starter project.mp4

04:09

78 setting up the vue router.mp4

03:46

79 router link and router view.mp4

04:32

80 params queries.mp4

05:36

81 matching dynamic routes.mp4

04:52

82 nested routes.mp4

04:56

83 active classes.mp4

02:40

84 fallback pages.mp4

04:29

85 setting up our project components routes.mp4

10:01

86 programmatic navigation.mp4

04:17

87 different router modes.mp4

02:34

88 section intro composition api.mp4

00:54

89 what is the composition api.mp4

06:15

90 composition setup.mp4

08:56

91 primitive vs reference types.mp4

07:50

92 quick introduction to proxies.mp4

05:18

93 using reactive isreactive.mp4

05:25

94 adding reactivity with ref.mp4

03:15

95 destructuring torefs.mp4

02:43

96 readonly.mp4

02:31

97 computed.mp4

06:16

98 standalone composition functions.mp4

07:37

99 mini challenge moving over the cards by category.mp4

01:05

100 moving over the cards by category.mp4

02:01

101 accessing the router.mp4

04:05

102 watch and watcheffect.mp4

08:21

103 using alongside the options api.mp4

03:52

104 section intro pushing on with our project.mp4

00:43

105 linking to selected card category styling.mp4

09:34

106 the create view.mp4

04:04

107 retrieving the selected card.mp4

06:52

108 selecting the current page.mp4

04:32

109 switching card pages.mp4

05:08

110 the card preview component.mp4

05:30

111 text output component.mp4

07:15

112 card edit component.mp4

02:08

113 text input component hover menu.mp4

05:51

114 adding menu options.mp4

07:13

115 menu options continued.mp4

04:35

116 menu styling.mp4

08:49

117 updating the card.mp4

09:04

118 adding new sections.mp4

07:39

119 removing sections.mp4

03:55

120 rearranging the order of sections.mp4

10:16

121 changing the section height.mp4

03:58

122 additional styling.mp4

04:52

123 provide inject with composition.mp4

05:56

124 section intro navigation guards lazy loading.mp4

00:31

125 navigation guards.mp4

13:59

126 lazy loading routes.mp4

07:35

127 grouping routes into chunks.mp4

01:31

128 section intro uploading images.mp4

00:35

129 image upload component.mp4

09:47

130 setting up cloudinary.mp4

03:00

131 reading file objects previewing.mp4

06:49

132 uploading the image file.mp4

05:45

133 saving the image url to our card.mp4

04:43

134 repositioning the image.mp4

03:08

135 removing images.mp4

02:05

136 deployment to netlify.mp4

09:31

137 thank you.mp4

00:27

Description

Project starter files, source code, and stages:

https://github.com/chrisdixon161/vue-3-course

Vue 3 is here! Immerse yourself in this amazing developer-friendly framework for building user interfaces!

Together we explore everything Vue.js has to offer from the ground up, all while building 4 projects to put your knowledge into practice. You will learn all of the essential Vue skills, along with the new Vue.js 3 features and syntax.

We start off very beginner-friendly, building on your existing HTML & CSS skills by introducing Vue.js to an existing HTML project, implementing the features gradually. You will learn all of the essential Vue skills and syntax while building our first project, where we add a blog to a portfolio website.

You will learn all the essentials such as data, methods, looping, events, and lifecycle hooks before moving onto the different types of components available, and how to pass data to them.

Once we have a solid grounding it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI. While building the project, you will learn so much more including watchers, computed properties, forms, conditional rendering, and teleport to name a few.

Project 3 will be a user dashboard that teaches you all about slots, dynamic components and using provide/inject.

The last project is a card editing application. We begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling too. This project will introduce the new Vue 3 Composition API, how to organize your code into re-usable files, routing, lazy loading, image uploading, reactivity, deployment, and so much more.

This course will give you a solid understanding of Vue.js 3, along with learning core Javascript too.

What You'll Learn?

Technology
Web Development
HTML
CSS
Web Design
Javascript
Node.Js

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Vue JS

Chris Dixon

Instructor's Courses

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

Thanks for taking an interest and I look forward to you joining me.

Chris

SkillShare

View courses SkillShare

Skillshare is an online learning community based in the United States for people who want to learn from educational videos. The courses, which are not accredited, are only available through paid subscription.

language english
Training sessions 137
duration 11:05:46
English subtitles has
Release Date 2024/01/22

Courses related to Vue JS

VueMastery Real World Vue

1:31:54

06/12/2023

Udemy Vue Mastery - Unit Testing Vue 2

44:38

05/09/2024

VueMastery Mastering Vuex Beginner

1:27:18

06/12/2023