Vue JS 3 Tutorial for Beginners #7 - Forms & Inputs

🐱‍💻 🐱‍💻 BUY THE FULL 20-hr COURSE ON UDEMY:

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[loreleieleanor]

I (and I can't stress this enough) ADORE the little music you play when you're downloading things. It makes me smile every time.

[kierrboy]

CSS Styles

32:34 pill css

.pill {
display: inline-block;
margin: 20px 10px 0 0;
padding: 6px 12px;
background: #eee;
border-radius: 20px;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
color: #777;
cursor: pointer;
}

37:02 submit css

button {
background: #0b6dff;
border: 0;
padding: 10px 20px;
margin-top: 20px;
color: white;
border-radius: 20px;
}
.submit {
text-align: center;
}

43:47 error css

.error {
color: #ff0062;
margin-top: 10px;
font-size: 0.8em;
font-weight: bold;
}

[Zale]

Your tutorials are better and more clear compared to any other courses for beginners, great work!

[pagevpetty]

2:10 Signup form
5:25 2-way data binding
13:47 Checkboxes
33:09 Delete
35:51 Submit form
40:30 Validate

[medui]

I am genuinely impressed by your teaching skills. As a professional video editor transitioning to programming—having developed a deep passion for coding—I must say that, after 13 years of self-directed learning and thousands of hours spent on video courses and tutorials, this is the first time I am compelled to provide feedback. Your teaching is exceptional. Thank you for your excellent instruction.

[mk]

I cannot imagine how much effort is required to produce these impeccable and extremely comprehensive tutorials, I am baffled by your dedication! Appreciate it very very much!

[Tsiode]

I usually don't comment, but I needed this for my work and this is by far one of the most understandable tutorials out there.

[Yazuroshi]

5:25 - 2-way data binding
10:37 - select boxes (also checkboxes from 14:00)
20:37 - keyboard events
32:00 - deleting skills

[bajtucha]

For the sake of performance I encourage you to perform deleting of items (the challenge) like this:

<div v-for="(skill, index) in skills" :key="skill" class="pill" @click="deleteSkill(index)">

deleteSkill (skill){
this.skills.splice(skill, 1)
}

That way you don't iterate through array again and use 'index' value that already has been found during v-for loop.

[maskman]

This is the best vuejs form tutorial, everything covered except radio, Shaun walks us through all kinds of input type and the use of each of them with step by step instructions and explanations, so there is no need to use those fancy form plugins / modules, because these wrapper component increases the complexity to the codes, anyhow this is an awesome tutorial, it serves an excellent refresh and for beginners to understand the power of vuejs that makes life so much easier !!!

[olamideabass]

i am very new to vue js, watched a couple of your videos and I was able to complete a vue task at work in no time. God bless you shaun.

[evandromatt]

Sorry for my english.

I did the challenge like this:
removeSkill(e){
this.skills.splice(this.skills.indexOf(e.target.textContent), 1)
}

And then, seeing your solution I changed to this:
removeSkill(skill){
this.skills.splice(this.skills.indexOf(skill), 1)
}

It still works, but because the click is in the <span> tag and not in the <div> tag, I need to click right in the text to delete, in the first solution I could click in the .pill element and still deletes it.

[dheerajsingh]

This is The Hardest Framework I was thinking but its easier than other frameworks. I wasted my time overs years to learn React and Angular but now I am on the right way with help of Ninja bro....

[filco]

1:10 thx for the music. It really helped me to get through the waiting time

[andrewsharpe]

I really love these videos. They breakout every conceivable concept a beginner or intermediate programmer might need, but I have to quibble with your solution at around 30:00 for stopping the comma being added to the skills array. If you just used a keydown event then the value passed would not include that key, and your user wouldn’t have to weirdly use alt with their commas. This would leave another issue whereby the comma could be written into the input box, but that’s where the keyup event would come in to clear it. I’m guessing the reason you did it this way was to recap on event modifiers, in which case, fine, but maybe do a submit alternative using alt s for this?

[bakercsgo]

i am so thankfulf or this vue course! after a few months of casually learning react and working through multiple projects and tutorials i decided to try out Vue and its like night and day how much more it clicks with me.

P.S your a great teacher and ive been loving the challenges in this series!

[zeeshanhayder]

Trust me you have cleared my doubt I am stopping video at 16 and appreciating you here!

[TomasMisura]

regardless I am javascript/vue beginner I understood a lot. I consider this tutorial as one the best I have ever seen. I have to admit that sometimes I was a bit lost but it was my fault not yours.

[berkay]

We're waiting for MEVN Stack, thank you for the video!

[afolabijosh]

Ninja ninja my guy my dey greet you from Nigeria. I just want to let you know that I love you and most especially the effort you put in to this video in order to make it more simple especially for love bruhv