English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 8h 30m | 3.78 GB
Develop exciting projects including a guest list and greeting card application and gain hands-on experience with Vue.js
Vue.js is a fun and easy-to-use JavaScript framework for building user interfaces. From easily adding it to an existing website or application to just control a part of it, such as adding new components, through to using it for medium or large single-page applications, you can improve productivity in several ways.
The course will guide you through building two challenging yet exciting projects, which will help you apply everything you learn.
You’ll begin with a guest list app where users can add their name to an event guest list. Although this is a simple app, you’ll learn several Vue.js essentials while building it such as two-way data binding, event handling, templates and the Virtual DOM, and instance properties – data, computed, watchers, methods, and filters.
You will then build on your knowledge by creating a greeting card application where users can create and edit their custom greeting card. They will be able to add their text and images to create a personalised card. This project will get you up to speed with components (local, global, and single file), installing Node and NPM, passing data with $emit, and storing and retrieving images from Firebase. In addition to this, you’ll make use of Vue CLI to scaffold your projects with build tools such as Webpack and Babel.
By the end of this course, you will be well-versed with Vue.js and have gained hands-on experience in applying it effectively in your projects.
Learn
- Understand the Vue.js framework and how to integrate services such as Firebase storage
- Explore core Vue concepts such as instance methods, looping, Virtual DOM, data binding and event handling
- Discover tools such as the Vue CLI and other build tools
- Apply Vue.js to existing web sites or apps
- Learn how to build complex, scalable single-page applications
- Gain insights into props and prop validation
- Explore slots and slot-scope
- Bind to menu options to change fonts and styles
- Delve into EventBus and Mixins
Table of Contents
Introduction & Getting Started
1 Welcome
2 What is Vue & why should I learn it
3 Visual Studio installation
Vue Basics Guest List App
4 Section intro
5 Binding attributes to elements
6 Binding styles
7 Vue shorthand syntax
8 Outputting text & HTML
9 V-if vs v-show
10 Using JavaScript expressions
11 Section outro
12 Download project starter
13 Installing Vue.js
14 The Vue instance & the data object
15 Templates & the virtual DOM
16 Two-way data binding with v-model
17 Event handling & methods
18 List rendering
19 Conditional rendering in Vue
A deeper look at Vue Guest list app
20 Section intro
21 Adding our navigation links & keys
22 Accessing Vue instances externally
23 Vue instance properties & methods
24 Referencing elements with ref
25 Using string templates
26 The Vue lifecycle
27 Vue lifecycle hooks in action
28 Section outro
29 Adding a progress bar
30 Computed properties
31 Watchers
32 Key events and modifiers
33 Filters
34 More on looping keys & index numbers
35 Using multiple Vue instances
36 Looping with objects
Build Tools & Workflow Creative Cards App
37 Section intro
38 Installing Node & NPM
39 Scaffolding projects with the Vue-cli
40 Exploring our project layout & build tools
41 Using the data object with single file templates
42 Section outro
Introduction to Components Creative Cards App
43 Section intro
44 Creating the text input component
45 Receiving data from the text input
46 Creating the text output component
47 Passing data with props
48 Keeping components alive
49 Scoping CSS styles
50 Prop validation
51 Passing prop data to a style object
52 Introduction to slots
53 Slot scope & fallback content
54 What are components
55 Named slots
56 Section outro
57 Registering global components
58 Registering local components
59 Creating single file components
60 Adding the card front component
61 Emit data to parent components
62 Dynamic components
63 Creating the additional card components
Components Continued & Firebase Storage Creative Cards App
64 Section intro
65 Text options menu font sizes
66 Text options menu text alignment
67 Text options menu font style & weight
68 Remove image button
69 Passing data with callbacks
70 Making images draggable
71 Finishing the CardInsideLeft component
72 Finishing the CardInsideRight component
73 Finishing the CardBack component
74 Introduction to the event bus
75 Setting up Firebase
76 Sending events to the event bus
77 Receiving events from the event bus
78 Adding mixins
79 Section outro
80 Creating the Image Upload component
81 Uploading images to Firebase
82 Image preview thumbnail
83 Upload progress bar & emit file data
84 Image Output component
85 Downloading images from Firebase
86 Set image button
Transitions & Animations
87 Section intro
88 Initial render transitions
89 Element transitions & keys
90 Group transitions
91 V-move class & dynamic transition names
92 Section outro
93 Transition classes
94 Adding CSS transitions
95 Adding CSS animations
96 Component transitions & transition modes
97 JavaScript hooks introduction
98 JavaScript hooks in action
99 Mixing animations & transitions
100 Custom transition classes
Thank You
101 Thank you
Resolve the captcha to access the links!