Vue JS 3 Tutorial for Beginners #2 - Vue.js Basics (part 1)
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Hey gang, in this Vue 3 tutorial you'll learn how to quickly setup Vue.js in a web application (using the CDN) and use it to implement some basic functionality such as using data properties & reacting to click events.
---Timestamps---
0:00 - How to use Vue (CDN)
3:36 - Creating a Vue app
8:58 - Data & templates
13:34 - Click events
21:37 - Conditional Rendering
🐱💻 🐱💻 BUY THE FULL 20-hr COURSE ON UDEMY:
www.thenetninja.co.uk/udemy/v...
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Vue-3-F...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
For those that just started:
This is hands down the best introduction video to Vue 3, and Shaun takes his time to explain what's happening what's happening when Vue is mounted. Thanks Shaun!
As of min 28, for everyone coming from React, instead of showing 2 spans which is more costly , i tried this and it worked
{{showBooks ? 'Hide' : 'Show'}} Books
This way we only change the content inside of the span rather than changing the whole span element with a new element
Thank you so much. I've been struggling with Vue 3 as my first .js framework this past week. You made this at just the right time! Very well thought out and clearly explained.
You're the only Vue tutorial guy I've watched that explains view in a not-too-fast and not-too-slow way. Your explanations are clear too. I've never tried Vue so my first impression is that .... it's really intuitive especially when it comes to being able to manipulate things based in user response like clicking, etc... Maybe I'll learn this framework soon
This is definitely the most clear and simple introduction of Vue that I found so far! Very well explained
Just awesome tutorials, my respect to the author! Nothing unnecessary - just an informative and concise output that is perfectly understandable for everybody with basic knowledge of JavaScript and HTML. It's definitely the best thing on TH-cam about Vue 3. Glad to start learning with it!
I think one of the core powers of your videos is `simplicity` ☁️💆☁️
Thank you! I try to make things as simple as possible.
It's a lot of things I think, nice voice, good video structure, in depth, but easy to understand explanations and he does it all with you step by step. Overall good teacher.
I got back to coding after a few months and this voice made me boot up again. Loved it, an amazing refresher
I've tried learning Vue by reading through documentations and tutorials, I tried crash courses, but I must say, so far this is the best introductory resource I've found, hands down. I'm nearly 26 minutes into the video and I had to replay on several occasions because I was too busy playing around with the new tools you were teaching, because guess what? Everything was crystal clear, so much so that I could afford to comfortably experiment with, well, everything. So yeah, great video, thank you for having made it.
The way this tutorial is structured is way better than if you had started with a full vue project setup! Very nice video :)
I was about to give up on vue but you made it seem a lot simpler than the tutorials I've followed. Thank you!
It's been over a year since I last built a project in VueJS. But, due to other reasons I'm back to VueJS. Thank you "The Net Ninja" for providing this awesome tutorial for us to be able to relearn or reacquaint with VueJS.❤😉
Hands down to Shaun for explaining it in such an easy and in-depth. This is by far the best Vue course on youtube
Legend! Thanks Ahsan :) that means a lot
I've been using TH-cam to learn various skills for 10+ years and I have to say, you are easily the best teacher I've come across.
Your lesson structure and the focus on understanding the concepts rather than blurting out a series of instructions make the information super easy to absorb.
Awesome. Thank you. ❤️
I learnt so much about Javascript and NodeJS with you, that I decided that it was the time to start learning VueJS to get something cleaner than a totally handcrafted project.
thank you Net Ninja. I have learned a lot. You explain things well. Give good context. Explain in terms where you link what people already know to the new content, rather than just being technical.
Thank you The Net Ninja you explain things very clearly and your video helped me a lot with my projects and also I've been waiting for this new Vue js 3 video
came here for Vue tutorial, was not expected to see Brandon Sanderson mentioned in this video. I'm really glad to find another fellow fan in the wild here!
I do not even know Javascript but you made this beginner tutorial on a JS framework so easy even I could understand it, follow along, and overall have a good time. Subscribed. I look forward to having you and your content on my web development journey!!
Awesome to hear :) welcome aboard and have fun on your journey!
literally because of this.. I now work as a vuejs dev. thank you so much!
Fantastic tutorial. Best I have tried to follow as a beginner to Vue 3. Thank you.
THANK YOU SO MUCH FOR THIS TUTORIAL!!! As a beginner backend dev needing to learn frontend from scratch its extremely usefull.
Awesome, glad it helped :)
You are #1 ❤ Very easy & going into single deep details , thanks a lot for this tutorial
I am loving your tutorial so far. I've already learned more than in my webtechnology class!
Glad you enjoy it! :)
YES YES YES
Epic Return of the Ninja!
A top notch video. I've just started with Vue 3. Hands down, this video is one of the best! I can only say "ditto" to all the positive comments below.
This's gonna be the world's most popular vue series ♥️
watched a bit of these vids and started building a POC coz of deadline.
POC approved and now Im back to understand what I built 😂. Thanks guys
this is a very simple vue tutorial that absolutely everything to me was easy to understand!
thank you!!
You have real talent for teaching! Thanks for the great tutorial!
As a profesor and developer i have tip, put side by side editors with html and js code, students will easy follow the course. If you decrees left file panel maybe you can put html preview far right to.
Brandon Sanderson is awesome! Thanks for associating this tutorial with him, you exponential increased my interest
Excellent explanation!!!By far the most comprehensive compared to many other Tutorials!
Thanks Stavros. Glad it was helpful!
This video explained the concepts so well! Thank you!
love the book titles you choose as examples!
This came in handy, Net Ninja you are helping us out a lot over here with your awesome content... With love from Nigeria NG🇳🇬
RT
Na so my broda
One of the best around. No jokes.
Among the best tutorials of vue 3 !
Thank you so much for this tutorial! I will do the rest of them, and I am already considering paying for the course! Thank you so much!
You are so welcome! :) glad it was helpful
i love vue now, at least for what I'm doing it makes much more sense than react. Thanks
I love this channel! I learned node js and now vue 3
Hi there, I am a late learner for Vue.js, you are the best teacher ever! God bless you!
Thank you! 😃 that means a lot
I love this tutorial, simple but to the points !!!
Amazing your tutorial is very easy to follow. Thank you so much.
Hi Shaun! I have learned a lot from you over the years. Thanks a lot for all of this. you're the best! :)
Happy to hear that! :) thanks for your support
You do an excellent job of explaining the how to code in vue!
Easy to follow , keep up the good work
Sir do you have tutorial of installing vue complete step and creating app outside that folder,
please help me why my app.js file not appearing on my code when i run it without net, but it's perfectly fine when there is an internet.
Hi Shan, when i read the docs in vue, i noticed the contents still adapts 2.6 vue.js version, its a lot different from your sample codes here... May i know the docs as your reference for this tutorial?
Thanks
Thanks bro. I WILL continue through all the provide videos😊
Have fun! :)
Hi, and thanks a lot for this tutorials :) Could someone help me on how to enable intellisense for Vue in *.js files? I'm not getting suggestions at all. Does Vetur need extra setup for that?
Yeah! Finally perfect tutorial! You are great! Thanks!
Absolutly fantastic! I only with I learnt this much earler!
hello, when i was following the instruction, I found out that it seems the app in main.js didn't export to index.html May I know why it didn't happen in this video? thanks a lot!
I got a: vue@3.0.2:1235 [Vue warn]: Property "changeTitle" was accessed during render but is not defined on instance.
at following this for some reasons...
The Final Empire is an amazing book! :D
So is this course tbh
Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!
This was really great - thank you!
Glad it was helpful!
It's amazing learning with you
Toggle can also be implemented like this:
{{ showBooks ? 'Hide' : 'Show' }} Books
Thak you so much, always learning new stuff from you
Incrível, um brasileiro acompanhando seus vídeos kkk
Thank you for your help.
on 11:10 he is returning the var title but when i put it in a P tag then it shows: {{ title }} how can i fix this
Im at the age part but when i click increase or decrease it says NaN any fixes?
Why is it when the function has no parameters you reference it (by excluding the ()), but as soon as you add parameters it's okay?
Great stuff. Thank you for this
Another excellent tutorial series from Net Ninja!
Thanks Andrew! :)
brother which extension do u use? I love the colors, relaxing for my eyes
Thanks for this tutorial 😊
excellent vid!!! TY!
Shaun - looking at the Udemy course, what is all the "archived" material about; what's it all for?
can you tell me the name of your font , that you are using on Vs code ??
You always make total sense
Best explanation ever.
Perfect tutorial, bro!
What CSS framework works good with vue?
I love ur tutorials
For those using Flask as the backend - change Vue delimiters (e.g. delimiters: ['[[', ']]']). Otherwise Jinja will render curly braces and Vue will get HTML without them.
Brilliant, thank you!!!
i'm trying to buy one of your courses on udemy.. but the price got like 10 times higher since yesterday that i checked the course out. seems only targeted for my use. can you fix me with a coupon? it's for the vue with the firebase thing.
Here to make sure the video(series) trends. Thank you.
Just great! Thanks!
Thx a lot. Maybe you show how to create vue widget for php site (wordress or another)?
what is vue3 production cdn at place of vue@next
always want to learn more if see your videos!.
Any plans to do svelte nodejs project?
are the syntax different now?
It was really helpful! thank u so much dude
No problem! :) thanks for the comment
Great Tutorial! Hoping for a Laravel Inertia Content on your Udemy Courses :D
Thank you so much 🙏
amazing, thank you❤❤
At 7:34 my browser doesn't change and despite double-triple-checking spellings of things, I see a warning in the console: [Vue warn]: Failed to mount app: mount target selector "#app" returned null.
I hadn't saved the index.html file... carry on :)
the best Vue tutos
I searched "Learn Vue in an hour" and by golly you did it.
clicking a button has never been so fun before
I really appreciate your tutorials
Thanks Ebuka :)
you're such a good teacher! thank you :)
Thank you! 😃
Thanks alot ❤
Thank you! Sensei🤩
Any time!
Man your my hero 🙂🙂🙂 i hope the best for you ❤️❤️
Thanks!
wow net ninja is back :),