Vue JS Crash Course

Подписаться 2,2 млн

Просмотров 1,3 млн

50% 1

Learn the fundamentals of Vue JS (v3) in this project-based crash course
Task Tracker:
github.com/bradtraversy/vue-c...
Random User Generator:
codepen.io/bradtraversy/pen/L...
Latest Udemy Courses:
traversymedia.com
💖 Support The Channel!
/ traversymedia
Timestamps:
0:00 - Intro & Slides
7:17 - User Generator Mini Project (CDN)
21:35 - Vue CLI Setup
24:30 - Files, Dev Server & Cleanup
28:22 - Global Styles
29:06 - Header Component
30:44 - Component Props
32:06 - Button Component
35:25 - Events
36:09 - Task Data & created() Method
38:22 - Tasks Component & v-for Loop
41:09 - Single Task Component
44:34 - Dynamic Classes
45:53 - Emit Events (Delete Task)
52:14 - Toggle Reminder
56:20 - AddTask Component & v-model
1:04:57 - Toggle Form & Template Conditionals
1:11:20 - Building For Production
1:13:33 - JSON-Server Setup
1:17:18 - Refactoring to Use The Backend
1:30:48 - Implementing the Router
1:48:23 - Restrict a Component to a Route

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1,1 тыс.

@diegoabdo2555 3 года назад

I don’t even use Vue but for some reason I just felt happy seeing this on my recommended.

@jay-rathod-01 3 года назад

Traversy is more addictive than weed. same hapend with me.

@TraversyMedia 3 года назад

Yeah, it's hard to do stuff that everyone would be interested in because there are so many damn technologies. I'm glad you clicked anyway :)

@bobcwang 3 года назад

T t Ym ym

@bobcwang 3 года назад

T t Ym ym

@justme3894 3 года назад

@@TraversyMedia Sooo many dam technologies to accomplish the same goals, it gets really confusing for starters

@plumpdolphin 2 года назад

This is an absolutely legendary tutorial! Took me a couple days to work through it at my own pace, experiment, and digest all the information. Started with minimal HTML and JS knowledge, near-zero CSS, and totally zero Vue experience. Came out with a good fundamental knowledge of all-of-the-above! Thank you so much 😄

@borakayalar 2 года назад

If you are beginner for Vue and you know some structures but could not understand something about it, this video exactly for you. Thanks for it

@manfrom20xx13 2 года назад

I WATCHED THE ENTIRE THING. IT'S SO DAMN GOOD. I LEARNED A LOT, THANK YOU SO MUCH! I DON'T KNOW WHY I'M SHOUTING, BUT I'M SUPER EXCITED WOHOO

@mgjulesdev 2 года назад

GO AND BUILD STUFFS IN VUE NOW!

@whaileee9749 2 года назад

Also watched the whole thing. I share your excitement!!!

@cryptoboy1461 2 года назад

Calm down shequila

@mylesdavies9476 3 года назад

Really great to see a third iteration of the Vue crash course, looking forward to the composition API video. It would be great if you could do a follow up to this and put together a slightly more advanced Vue video looking at more advanced features of the router, animations, vuex etc

@dustincintron1682 3 года назад

You make a huge difference in people's lives and career, Brad. Thank you and keep up the great work.

@TheSuperRyne 10 месяцев назад

Дс дч с,дэ ДМ ч лс kc nn j bbn bl ,my j

@andrelncampos 5 месяцев назад

Two years down the road, and this video remains remarkably pertinent and up-to-date. Kudos on your commendable effort, undoubtedly a substantial undertaking. I genuinely hope you persist in making significant contributions to the community, showcasing your impressive dedication and expertise.

@oussamachahidi9201 3 года назад

the way he teaches makes me feel like we are both at the same level and we learning together i really enjoyed it!! God bless you

@emdadgar_official 2 года назад

yeap ... i watch crash course to get a overview . then going to full course.

@Stoney_Eagle 3 года назад

What a timing, I'm concidering using VueJs for my frontend 😉

@maskman4821 3 года назад

The Net Ninja has the best vue3 course ever on udemy, that is a solid vue2 + vue3 course, you are gonna learn everything about this cutting-edge (composition-api) technology along with awesome projects !!!

@adsj5951 3 года назад

@@maskman4821 Agreed here if you consider vue you should better find course that shows the vue 3 composition api and new features of vue3

@Stoney_Eagle 3 года назад

I will look it up, thanks guys. It's gonna be a lot of work converting everything and I'm not even done converting php to nodejs 😳

@MyBoxer96 3 года назад

@@maskman4821 Maximillian also has a great Vue course. He covers everything

@sakibullah3577 3 года назад

@@maskman4821 thanks for info man! i appreciate it

@jelenar1108 3 года назад

I love all of your tutorials, you always explain everything so great!

@HeyStanleey 3 года назад

It took me 3 days to finish this tutorial, so I can understand everything in detail and research some concepts more in depth at the same time. Thank you so much for this, I learned a lot!

@themoroccanpianist8953 2 года назад

did you build any project with Vuejs ?

@popoduck8309 2 года назад

at 55:00 why is he using task.id in the Tasks.vue file Since we already emitted that id from the Task component as a number. If u ever see this comment please answer this. Thanks :)

@Mronmovies 2 года назад

@@popoduck8309 That was probably accidental. The Inner id emitted is actually redundant in this case. In the for loop inside the Tasks component he associated every Task component created with an emit that triggers when the inner emit is emitted, that outer emit is associated with the task.id that was used to create the Task component. If you want the inline version you can replace that line with Or you can just remove the id emitted in the Task component. Hope it makes sense.

@popoduck8309 2 года назад

@@Mronmovies Now I get it Thanks :)

@devdante8237 2 года назад

Yeah, same here.... Still not finished yet, but it helps a lot in understanding and gaining process! Thx a lot!! This is awesome!

@jeffreyambayec4491 2 года назад

I got my web dev job just from watching your laravel crash course. I know something good will come my way after finishing this one. Thanks for the tuts Brad! You're awesome!

@weirdcase 3 года назад

I usually get bored and don't learn much from video tutorials but this really helped. I like the way you make mistakes and then correct them in the video. It helps as it keeps the focus on, also shows where common mistakes occur. Most tutorials tend to be perfect which doesn't help in real life scenarios where mistakes and typos actually happen. Great job!

@alexanderzharkov6953 3 года назад

There is only one thing left to say after watching the video till the end: Thank you, Brad!

@CHPdBest 2 месяца назад

I came across this superb video when I came in search of tutorials to refresh my Vue knowledge..No words to describe how helpful this has been, the precise and clear delivery of content would help a novice or an experienced dev equally..Thanks again!

@rbdevelopment 2 года назад

Amazing pace, out-of-the-charts knowledge, perfect guidance. I'm relatively new at this and it helped me to understand the concept literally in 2 hours! Keep up the good work 🤟

@johnnygotti1568 2 года назад

You are the first person I go to for tutorials. I just did a react project, wanted to pad the resume, learned vue in 3 days watching your video whenever I felt like and coding along. Now I have a nice "self-built" app that I can reference when I'm looking for ways to do something, and I can remember what I did, or just look at your video again. Cannot thank you enough, man.

@musangowope5556 3 года назад

This is literally the perfect course and it really came at the right time. Im going to be working on an existing vue project in the near future. this tutorial is definitely a great way to get reacquainted with vue

@icaromendes1250 9 месяцев назад

It is not the first time I choose to study something and I get to one of your tutorials, they are well measured, straight to the point. Really a fan here.

@MrDFJohnson 3 года назад

React and Vue crash courses, THANKS!

@maskman4821 3 года назад

The Net Ninja has the best vue3 course on udemy, that is a solid vue2 + vue3 course, you are gonna learn everything about this cutting-edge (composition-api) and awesome projects !!!

@kendedetar 3 года назад

I had a hard time beginning reactive front-end frameworks. React and Angular are pretty scary. But this tutorial and Vue itself is very friendly and welcoming! 😄 Thank you for the great video, Brad! 😄

@milanche7395 Год назад

Every programming language is scary at beginning. Don't give up. 💪😎

@assefatedla6681 3 года назад

You are one of the best instructors I know on youtube. You explain in simple terms and write elegant code. Keep up the good work

@TraversyMedia 3 года назад

Thanks :) I appreciate that

@oao1786 Год назад

Tell me other good instructor on RU-vid.

@ViorelMocanu 3 года назад

Great tutorial, Brad! I've just passed through quite a few Vue tutorials until now, and yours served to clarify a few things, kudos for the clarity.

@Scy 2 года назад

Thanks for not trying to teach programming from scratch like every other tutorial. Straight to the point.

@codeaperture 3 года назад

Is been a while. Traversy media was my first love in web development and I always like his magical and elegant code

@DaDa-gr7cy 3 года назад

Liked before watching, your crash courses are ALWAYS amazing. Thanks a lot ❤

@UnderGun81 3 года назад

Gracias Brad, I just started a frontend internship a couple of weeks ago and I got introduced to the codebase on Monday, it's all Vue, so this definitely helps.

@bobbuilder6846 Год назад

I'm only 12 minutes in but already your video is very useful. As a backend developer who hasn't touched front end frameworks for a while, it's so helpful getting straight into it. Thanks!

@SwapnilSoni 3 года назад

Omg you're reading my mind!! I was eagerly waiting for this ❤️

@deivitsalazar1991 3 года назад

I really do hope vue becomes more popular. It is an amazing framework. I come from a react background then got my first job and the framework they were using was vue. Freaking love it.

@naveenkamath2882 2 года назад

same bro but I am learning vue now

@ak3147 Год назад

Same

@tossichugs Год назад

Very useful intro to Vue for me. Definitely helped to clarify why some of the things I was trying to implement in my first Vue project weren’t working as expected. Also appreciated how you broke down your components and showed consideration for resusability of your code (the button in particular).

@blasm1713 3 года назад

You're the best explaining, no, really. I've watched other tutorials in english, spanish and french, not only it is well explained but well structured as well. Thanks a lot!!

@harounekechaoui8232 3 года назад

i was waiting for it, gotta open visual studio code and start. thanks brad

@squirrelboy001 2 года назад

Really great tutorial! Clear, straight to the point and covering a lot of useful concepts in detail. Thanks so much!

@scottfuston941 2 года назад

Great tutorial! I have to learn Vue over the weekend for a job interview on Monday. You made this very easy to understand the basics! Thank you!

@sebastiancastillo3560 3 года назад

This is GOLD !! The perfect way to teach. Quick and clear. I'm linking Vue with Django Rest and everything is going great. Thank you very much Brad!👌

@cuervowebdesign9356 2 года назад

Thank you, Brad. Great as always. I was just thinking which Javascript library or framework should I learn next, thought of Vue and there you were. Amazing tutorial.

@dirkbertels3872 Год назад

It's almost 2 years later now and vue3 has updated a bit, such as using Vite - but this tutorial is still very relevant. The presentation is an impressive performance, showing a master programmer's mind at work. I personally love the use of ternary logic in combination with higher order array operations (using spread operations), all inspiring me to update my js skills!

@ganjarulez009 10 месяцев назад

is it still viable to watch at this point? :D

@user-jb4cn3jd3b 6 месяцев назад

i've just watch the old one (from 4 years ago) and I can say that one is viable for what it's worth, you just have to do some tweaks maybe when he's using some syntax that is not compliant anymore, but it's pretty straight forward@@ganjarulez009

@andrelncampos 5 месяцев назад

Yes!!!

@akshaymishra5263 3 года назад

It's like you read my mind Brad, I am learning vue js and just finished your todo app vue js course two days ago and now you've made a new video🙌🏻

@fcosantos 2 года назад

I'm brazilian guy and I starting code with VueJS. I was lost and found this channel, OMG. Thanks, very thanks!

@seetlive 2 года назад

As a React first developer, it was helpful for me when you make those analogies between React and Vue, It helps me a lot to understand how things are done in Vue faster. Thank you for the tutorial.

@moodiali7324 Год назад

do u think that vue is easier than react or next js? i am getting that feeling a little but i just started learning vue

@carolinec4978 3 года назад

Love hearing that intro jingle - you just know good video content is coming your way!

@nospam2k 2 года назад

I wish every tutorial was like this!!! Who wants to hear the history of the universe and your childhood for 10minutes before your 30 second piece of info??? Right to the point.This is long but thorough. I listened to it at 2x and got what I needed!!! I have never even heard of Vue, know very little about Angular and somewhat familiar with nodejs before watching this and I'm ready to code! Fantastic!!!

@markbalazo1914 2 года назад

I just finished the tutorial in 3 days to better understand the concept. This is a clear and concise tutorial. Thank you so much!

@codelta2 3 года назад

Thank you brad! Highly appreciate your great work that we all benefit from 😊

@jemaleakil7620 3 года назад

Thank you so much Brad! You are my favorite Instructor

@victorrono7841 3 года назад

Exactly what I was looking for. Just finished watching the older vue Js tutorial last night and it was very educative.

@leandrofahur_ 2 года назад

I am a huge fan of yours!!! Started with Udemy, and now anywhere I come across your videos I just need to check it! Thank you for your existence 🚀

@bailimohamedali1466 3 года назад

man, now what's missing is an Angular crash course 2021. great work!

@yaroslavkniaziev1045 3 года назад

The excitement on my face when I saw the notification...

@Caelgut 3 года назад

About to head on to a project that uses Vue frontend and Strapi backend and as a former educator let me just commend you on your teaching methods! Really superb. I learned a lot. Thank you!

@oohkumar 2 года назад

Awesome. Did the whole thing start to finish and then started adding my own features. Super easy. Love Vue.js. Thanks Brad.

@donl.a.6045 3 года назад

Just what I was looking for. thank you!

@sanketmathur3072 3 года назад

I just wanna say thank you for making this.

@Fun-io9kv 2 года назад

Yea specially in english

@shauntonesify 3 года назад

Brad- you know how to really read a room. I just got a job interview with Vue as one of the technologies. and of course, you come out with this video :) Thank again for all your hard work.

@solsnnr 2 года назад

I have an applicant examination where I have to build an expense management website using VueJS, and I have zero knowledge in Vue (I am a ReactJS developer in my previous company for about 6 months only). But, once again, thanks to Traversky Media for helping me again with my web development journey. After watching this, I think I can build the said website. You literally helped from HTML, ReactJS, and now with VueJS. I am really enjoying your full courses. Your channel is the reason why I new languages/trchnology don't scare me. Thank you Traversky Media.

@AlexGBY9 3 года назад

This is the millionth time this happens, I need something very specific at my job and this guy releases a video about that exact topic

@milos018 3 года назад

Great job showing Vue in such a short time. Just a thought - you can use event modifiers instead of e.preventDefault() inside the method

@black-forest-code 3 года назад

I started learning Vue in 2016, but then had to quickly switch to React for a client project and have had little to do with Vue since then. I've stayed with React ever since. Now I need Vue for a new project. This crash course helped me get back to basics of Vue quickly. Thank you Brad!

@Dryfee 3 года назад

I hust finished Brad's VueJS todo app. Now i'm here... Seeing whats new in 2021. Thanks so much for this Brad!

@GTsurwa 3 года назад

Vue gets some love as well. Been waiting for this. Thank you, times infinity, Brad 👍🏿.

@TechBunch 3 года назад

WooHoo, Boss is back!!!

@flavioarantesdoamorimbarce95 2 года назад

Thank you so much for sharing it. I used Vue in version 2 about 4 years ago, now I'm starting to learn it again and this video was a booster into this process.

@comunicloud30 2 года назад

Amazing crash course. I need to learn VUE ASAP cause I got a new job, this course was a jump ahead. Thank you Brad. You rock!

@mrcavior7943 3 года назад

Exactly what i needed, thank you! I've been playing around with apis and wanted to make some small frontend app in vue that will be connected to it but sometimes gathering info bit-by-bit and going through documentation is tiresome - and i didn't want to spend too much time on it, i wanted to focus on my api. Cheers and wish you all the best!

@TraversyMedia 3 года назад

Yeah, Vue definitely cuts out all the bullcrap and makes creating UIs really easy

@conatus1789 Год назад

This is really good! Thanks a lot

@aayushojha9597 3 года назад

This is perfect, haha.. I was just going through your old vue.js crash course and later found out that you had posted a new one. Thank you so much for this video😊

@kizomanizo 2 года назад

I 'Vue' occasionally, I still use this tutorial as my go-to guide before googling most basic tricks. Very nice narration!

@mircast0 3 года назад

Brad, so after building the same app in ReactJS and VueJS. What is your opinion about them? What's easier? What's more for beginners? I would appreciate an answer. Thanks. :)

@wen-tungwen9446 3 года назад

I'm a female developer from Taiwan. I've taken 3 of your courses from Udemy , but I didn't notice they are taught by the same person till NOW! thanks a lot for your teaching!

@ivoxii 2 года назад

I always wanted to go to china :)

@salillakra 9 месяцев назад

@@ivoxii☠️

@romanempire3517 9 месяцев назад

@@ivoxiiit's TAIWAN! NOT Bat eating capital of the world

@ivoxii 9 месяцев назад

@@romanempire3517 Taiwan is in China, big up Xi Jinping

@atlantic_love 7 месяцев назад

@@ivoxiiWhy are you such a dip?

@Mikael_Puusaari 3 года назад

Awesome, thank you! Just finished a course in something else and got back to continue looking into Vue and this was perfect Also, just perfect in length to include so much without rushing it Will subscribe and look forward to more good stuff!

@lutherjohnjomaya2744 2 года назад

I've got training on Monday using Vue, and this course of yours would be helpful in my journey as Full Stack Developer. Keep it up Brad.. I hope someday I can support you in helping a dev like me through your channel.

@dbybanez 3 года назад

I'm a normal person. I see a new video from Brad, I hit like.

@billjenner4374 3 года назад

Brad, You have some great MERN classes on Udemy. I prefer Vue over React. Would you ever consider a MEVN course on Udemy?

@megr 2 года назад

Watched the whole video. This is just a great tutorial for me as I'm jumping into FrontEnd after 7 years on the BackEnd. Thanks a lot!

@igde 3 месяца назад

It took me a week to build the app using TypeScript and Composition API and I now I feel much more confident in Vue. Thanks Brad, this tutorial is great even after three years! .)

@ayushsoni146 3 года назад

RU-vid algorithms and Google tracking man. I just searched Vue on Google and here it is in my recommendations. 😂

@likewealwaysdo 3 года назад

nahh. *_BRAD_* is tracking u 😂

@Zxanonblade Год назад

Really useful tutorial, just was having issues with the part where you used a proxy to replace "localhost:5000" with "api" in your code at 1:21:32. I'm pretty sure I wrote everything correctly but the tasks wouldn't show up, inspecting the network of lh:8080 just showed that tasks was in 404, it didn't connect. :/

@asuraxsoul_junjie2051 Год назад

i faced the same issue, realised that my vue.config.js was not in the root folder

@Zxanonblade Год назад

@@asuraxsoul_junjie2051 hm. Will try that next time I'm using Vue

@revisionnaire 10 месяцев назад

i have that erro with 403 and idk y 😭

@gabrielx95 Год назад

Best tutorial in the world. Im starting a new software role in two weeks, needed to learn vue and this is an amazing jumping off point! Thanks!

@SouthernSeneca 3 года назад

Just love how you explain things, just becomes so easier to work with things.

@pizzapanni 3 года назад

"We'll make sam female " For some reason this made me crack up 😂

@olatunbosundare6073 3 года назад

Me too... sounded like "We'll make some female"...

@mangasprai 2 года назад

me: I know Vue and JS... he: trows async function with await... wait what??

@stellak.6095 2 года назад

You mean you didn't know async-await, or? I'm a bit confused by your comment :/

@BobbyBundlez 2 года назад

u dont know modern JS if u dont know async await. nuff said

@louvcx701 2 года назад

HAHAHHA same

@stellak.6095 2 года назад

@@BobbyBundlez Seriously.

@BobbyBundlez 2 года назад

@@stellak.6095 no disrespect to the person who commented that but ya... lol

@rocifier 2 года назад

Legend bro I just landed a vue.js contract since most others are focusing on react, and I have to get up to speed. So far loving this.

@lkagan2000 Год назад

The perfect refresher for someone who hasn't touched Vue in 6 months. Thanks!

@mohamedshuaau632 3 года назад

“I hope nobody gets offended by that” That right there sums up this generation and the current state we live in

@TraversyMedia 3 года назад

Haha, right?

@d1m216 3 года назад

@@TraversyMedia You wouldn't understand because probably everyone you know is very similar to you, but I don't want to watch my friends suffer. These kids are not offended by what you say, just hurt, and that hurt piles up everyday with the smallest of comments. There's just no need to laugh about something that's literally killing children/teens. For informational purposes, really great tutorial. I know you're creative enough to think of adding a different color for the picture that people can choose, but instead you said i hope nobody gets offended. you can even just say it out loud to be more inclusive, it really isnt hard. i think you just have a bit of internalized transphobia. Take it easy!

@ivoxii 2 года назад

@@d1m216 This reply sums up this generation and the current state we live in. Accusing someone of 'transphobia' because they put the colors that have represented the 2 genders that exist (not talking about the hundreds of others that people make up for attention) for many centuries! I think you're just hurt :)

@Partyboy420 Год назад

Everytime I think I understand it I don't understand it

@corbynaltman1020 Год назад

Over a year later and still one of the best vue videos

@JamesAutoDude 2 года назад

The fact that the website loaded your changes without refreshing the page was legit!!! I'm excited lol

@raywong4668 2 года назад

It's not often that we are lucky to watch a tutorial as good as you made! Thanks!

@anastasiosvanderpas7463 2 года назад

Amazing video. Thank you so much! Just in two hours you teach Vue!!!!! It took me two days to watch and code along while checking and reading details in documentation but I am now ready to create my first project using Vue. I knew React and that helped me in understanding the idea and concept of the vue framework and I found it much easier and structured. MOST RECOMMENDED VUE VIDEO for beginners!!!!! 👍👍👍

@mohammadshahalam9847 Год назад

This is the best Vue js crash course I've ever seen. Thank you for the wonderful course. ❤️

@pabitrakumarraut9840 2 года назад

This video is so perfect I just went along and learnt a lot of stuff right away. Thank you for making this so easy to understand. I recommend this for anyone who wants to start off with Vue.js as a beginner. Loved every bit of it. Thank you very much for sharing such good content.

@jjhphotography 2 года назад

Great tutorial. Thanks for all the groundwork you put down in this video. Needed to learn some VueJS for a contract job and I know this will be help me understand the code better.

@datapro007 2 года назад

Hi Brad. This video was exceptional helpful to me. Thank you! Your tutorials are the best. I like that you provide a repo with a real, working code. Amazing and comprehensive.

@noquarter1983 3 года назад

Thanks for this! So many of the vue tutorials out there are based on vue 2, this was well timed!

@ognacyyoutuification 2 года назад

great stuff, thank you very much. the tutorial strikes a great balance between being pragmatic, focused on what's important, and not wasting time on obvious stuff