FrontendMasters – Introduction to Vue 3 2020-10

Description

Introduction to Vue 3 is the name of a course for teaching Vue.js. Get started with the Vue.js JavaScript framework right now. You will learn how to build components by reusing them as well as flexing them using props, lifecycles and slots. From directives to build agency using markup, you will learn how to build your own personalized directives, and finally you will learn the new things added in Vue 3 and how to summarize agency using new API components.

What you will learn in the Introduction to Vue 3 course

Introduction to Vue.js as a JavaScript framework

Topics related to Directives, Modifiers & Data Rendering include v-model Directive, v-if & v-else, v-bind, v-for, v-once & v-pre, Event Bindings & v-on, v-html & v-text

Explain what and how methods work, Computed Properties and explain with an example about Watchers

Explain components, props and slots with examples

Program development, installation and use of Vue CLI and use of Nuxt by providing solutions and examples

Discuss animations and their use with CSS in action and the types of dynamics available

Examine the Composition API and Custom Directives and how to use them with an example

Use the Vuex Library for shared or asynchronous shared data, logic and methods

Course information

Publisher: FrontendMasters Instructor: Sarah Drasner English language Level of training: basic to advanced Number of courses: 65 Duration: 4 hours and 57 minutes

Topics

Introduction

Introduction 00:00:00 – 00:10:38

Course Resources & Setup 00:10:39 – 00:13:56

Vue 3 Hello World 00:13:57 – 00:19:12

Directives, Modifiers & Data Rendering

V-model Directive 00:19:13 – 00:23:17

V-if & v-else 00:23:18 – 00:26:47

V-bind 00:26:48 – 00:28:43

V-for 00:28:44 – 00:31:39

V-once & v-pre 00:31:40 – 00:34:12

Event Bindings & v-on 00:34:13 – 00:36:26

V-html & v-text 00:36:27 – 00:38:51

Directives Exercise 00:38:52 – 00:39:52

Directives Solution 00:39:53 – 00:47:03

V-model Modifiers 00:47:04 – 00:48:30

Event Modifiers 00:48:31 – 00:50:19

Methods, Computed Properties & Watchers

Methods 00:50:20 – 00:59:22

Methods in Forms 00:59:23 – 01:03:54

Sorting Table Data with v-for 01:03:55 – 01:08:13

Computed Properties 01:08:14 – 01:14:53

Computed Properties Exercise 01:14:54 – 01:16:28

Computed Properties Solution 01:16:29 – 01:19:59

Computed Properties Examples 01:20:00 – 01:23:21

Vue’s Reactivity System & Proxies 01:23:22 – 01:34:42

Set(), Map() & WeakMap() 01:34:43 – 01:38:47

Watchers 01:38:48 – 01:48:10

Watchers Exercise 01:48:11 – 01:49:29

Watchers Solution 01:49:30 – 01:51:33

Watchers Example 01:51:34 – 01:55:51

Components & Props

Components 01:55:52 – 02:03:47

Props 02:03:48 – 02:10:31

Components in Practice 02:10:32 – 02:20:47

Component Events with emit 02:20:48 – 02:27:55

Slots 02:27:56 – 02:38:23

Components Exercise 02:38:24 – 02:39:48

Components Solution 02:39:49 – 02:41:19

App Development

Single File Templates 02:41:20 – 02:46:25

Vue CLI 02:46:26 – 02:54:08

Creating & Deploying a Vue.js App 02:54:09 – 03:01:45

Visual Studio Code Snippets & Highlighting 03:01:46 – 03:04:22

Lifecycle Hooks 03:04:23 – 03:09:29

Nuxt 03:09:30 – 03:13:58

Nuxt Setup 03:13:59 – 03:20:46

Rendering in Nuxt 03:20:47 – 03:23:20

Vue CLI Exercise 03:23:21 – 03:23:50

Vue CLI Solution 03:23:51 – 03:26:17

Animations

Animations 03:26:18 – 03:33:19

CSS Animations 03:33:20 – 03:39:48

Animation Practice 03:39:49 – 03:40:21

Transition Modes 03:40:22 – 03:44:18

Animating with JavaScript Hooks 03:44:19 – 03:51:43

Animated Interaction 03:51:44 – 03:55:38

Nuxt Page Transitions 03:55:39 – 04:00:38

Nuxt Page Transitions Practice 04:00:39 – 04:01:02

Composition API & Custom Directives

Composition API 04:01:03 – 04:12:51

Computed Properties, Watch & WatchEffect 04:12:52 – 04:16:15

Props & Context 04:16:16 – 04:17:38

Lifecycle Hooks & Usecases 04:17:39 – 04:22:07

Script Setup & Composition Resources 04:22:08 – 04:24:06

Composition Exercise 04:24:07 – 04:24:49

Composition Solution 04:24:50 – 04:26:23

Custom Directives 04:26:24 – 04:34:00

Vuex

Vuex 04:34:01 – 04:44:40

Commit & emit 04:44:41 – 04:50:05

Vuex Exercise 04:50:06 – 04:51:00

Vuex Solution 04:51:01 – 04:54:21

Wrapping Up

Wrapping Up 04:54:22 – 04:58:16

Installation

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080