Vue 3 Crash course for beginner 2023: Build Tags Input while learning Vue 3 js concepts

Vue 3 Crash course for beginner 2023: Build Tags Input while learning Vue 3 js concepts

In this Vue 3 crash course for beginners, we'll be building tags input while learning Vue 3 js concepts.

If you're a beginner and you're looking for a crash course in Vue 3, then this is the video for you! In this video, we'll be building tags input using Vue 3 js concepts, so you'll have a better understanding of how Vue works. By the end of this video, you'll have a good foundation in Vue 3 js that you can build on!

- interpolation
- Directives
- Attribute binding
- Conditional rendering
- List rendering
- Style and class bindings
- Handling event
- Two-way bindings with v-model
- Methods
- Computed property
- Watcher

After you finish this section, you'll have a simple reusable tags input component with the following features:
- Enter any tags separated by a comma or when the user hit the Tab key or Enter key
- Remove a tag by clicking the remove button
- Remove the last tag by hitting the Backspace key or Delete key

Timeline
00:00 Introduction
08:14 Introduction to Single File Component (SFC)
17:53 Directives and Attribute bindings
26:38 Handling events
33:30 Two-way bindings with v-model
37:39 Working with methods
45:28 Style and class bindings
51:52 Computed properties
55:39 Watchers
59:40 Styling the Tags Input component
01:02:46 Component communication with Props
01:11:30 Component Communication with Events

[abrahamkibet]

it is awesome do you have other videos like this for drag and drop items while uploading them

[codedjango]

@1:00:13....how is it that console.log doesnot show you any error since you were not using the "key" in the for loop till now? If I do this with vue-cli, then it throws an error in console forcing me to use "key" in for loop...