Vue.js 2.0 In 60 Minutes

[@ericmann8976]

Hi Brad, My name is Eric Mann. I wanted to thank you for taking your time to do your tutorials. I was confused on how Vue.js worked together. But, after watching your Vue.js crash course I was able to comprehend how Vue works and also how everything fits together into a very useful user experience. Your teaching style is one of the best that I have seen on KZbin. You take the time to make sure that what you are teaching is simple enough for everyone to understand, but also in-depth enough so someone could venture out farther from the shore. I am an o;d programmer trying to learn a new web technology and you have a real blessing in what you do. Please, don't stop teaching. Thanks so much Brad!

[@muhammadyasser9201]

How old are you, sir?

[@roosah6749]

I never hesitate to recommend Brad Traversy as the go-to guy for learning any sort of stuff related to programming!!! Hats off to you dude, because of you I can now claim that I know Vuejs. Your" in 60 minute" series is mind-blowingly amazing!!! Great work, keep it up.

[@NoahNobody]

If you are using Visual Studio Code, having the Vetur addon is a really big help. *Features:* Syntax-highlighting Snippet Emmet Linting / Error Checking Formatting Auto Completion Debugging

[@DANJUMA9]

Starting a new job tomorrow where vue js is used. This video is a treat! Thanks

[@ahmedmusawir]

Bro, THANK YOU!! ... for another gem of a course ... you actually taught me Angular2 ... forever grateful!! Here are a few sincere requests: 1. Angular2 + Firebase 2. Angular2 + Ionic + Firebase 3. Vue JS 2 + AJAX Thanx in advance.

[@Thecrznd]

I got a new job as a viewjs developer ! was working as an angular developer. Thank you brad your tutorial helped a lot.

[@lancerino765]

Hi. I was interested to become a vue js developer. can u explain hows the environment working with vue in your company. I would be grateful. thank youuu.

[@secret-alias]

Viewjs. 😂

[@bluebird0511]

the fact that you can't even write down the name of the framework you're using ...

[@Potenti4lz]

lol, actually made me lol twice! 😂👌

[@hashaamzahid3319]

@@lancerino765 hahahaha

[@TheSETJ]

I've worked with AngularJS before and already learned React a bit and I'm really surprised how simple Vue is. I first told myself I never use it, it's very easy and simple, but later I thought that's an advantage already and it does not make sense to throw Vue away because of that. Thank you for this intro, Brad.

[@caeronseabourne7567]

I have managed to land myself my first web dev job and a big part of it was thanks to you and your courses Brad. Just sent you a donation too, absolute legend! Cheers!

[@olivercordingley1201]

Tip: instead of using "npm install --save " or "npm install -g " just use "npm i -S "/"npm i -g "

[@seanlangley7467]

Need to get a job to buy "FULL VUE.JS COURSE" because I like the way how you teaching. It's amazing! Thank you so much Brad!

[@MopeyFand]

The distinction between the conditional directives "if" and "show" is actually quite important. If Vue.js is anything like Angular; - "if" will either render an element to the DOM only if the expression evaluates to true, otherwise it isn't rendered (or is removed). - "show" will render it to the DOM regardless of whether the expression evaluates to true or not, then only the elements visibility is affected by the expression outcome value. This can be a headache when validating forms or running UI tests, so it helps to keep it in mind.

[@naveenagarwal287]

Your tutorials are super simple to follow. Thanks for the effort you put in to provide this video.

[@serodev]

Great tutorial! Quick tip: If your already in your project directory in Terminal, you can use the command "atom ." to open the directory inside Atom. Great for those keyboard power users.

[@danieliuskreivenas5539]

That is the best introduction I've seen on the web. Thanks for your effort and for sharing premium level content for free! I'm a big fan!

[@bongoritus]

Thanks man, I donated some money to support you!

[@klokibril]

Very nice. One of the few tutorials I actually watched until the end.

[@MatthewScerriM]

Thanks. For someone who is used to other frameworks, this hour gives an excellent overview. Great work!

[@navenprasad25]

You are seriously the best teacher I have ever had. Thank You!

[@leozeng6696]

I had done use Vue.js 2.0 a period of time, Although the video is basic, but it's very helpful, thanks for making this video and sharing with everyone

[@rafgarofalo]

I am coming from Angular and Polymer and I just needed this. Quick and dirty but you drive through all features of Vue.js Nice job, if you do the same also for Typescript it would be awesome. Thanks for the time spent on this, appreciated!

[@Geekstocks]

Super helpful video. Was so complete that it took several days to really parse through it all while coding along. Thanks for easing the transition to Vue!

[@keremkambur2421]

Very straightforward tutorial. That one is a really crash course.

[@SkylarkMotion]

Really nice video... and by the way, although is an off topic comment, with the soft sound of that keyboard it seems like an asmr video, so I was learning in a relaxed fashion

[@JonasKuske]

45:47 You can simply put .prevent after the @submit handler instead of doing e.preventDefault! :) _( so )_

[@aseemlalfakawma5084]

Thank you so much man, these tutorials are priceless, I really needed to understand how vue.js works as I'm working on a project in laravel and we're trying to stay off jQuery and this video has taught me a lot. Keep up the good work mate.

[@JacquesvanWyk]

Good intro and yes would like few projects with Vue.I was listening on my headphones and heard this banging and kept looking around what the hell it was lol then you said its your son.Thanks Brad you are making me great programmer.

[@minucocat]

one of the best tutorial for vue.js for beginner. Thank you so much.

[@jpzod1536]

Dude! that was awesome and really helpful, i will buy the full course to support! greetings from Dominican Republic. :)

[@Amivit]

Instead of v-on:click you can do @click. Instead of v-bind:src you can do :src so : and @ for nice shortcuts :)

[@edmilinski1295]

beautiful. best one hour tutorial so far.

[@betts12220]

Excellent tutorial as usual. Was hoping you would go into "master-detail" functionality (click on the user to see their details for example) using the router though. Currently there aren't many clean, simple examples of this online that I can find.

[@bettadevindonesia9246]

Hi Brad, am from Indonesia! In every tutorial you created am so excited to upgrade my skill in programming. Jah Love You and Jah Bless!

[@JessePH]

Very useful and effective web tutorials. Thank you traversy! I was inspired by you to make more Filipino/tagalog tutorials for my country

[@GmoneyMozart]

I'm late to the party but I'm slowly knocking these out. Thanks so much!

[@frosty2912]

Firstly, I must say your tutorials are great and I appreciate all the time you put into teaching the community. My thoughts on frameworks (in general). I think frameworks teach or rather don't teach people know how things really work. (ex. Needing jquery to access the dom instead of just using pure js). There is nothing wrong with using a framework but if the author HAS to use one (ie. is unable to write it in pure JS) then I think they need to learn the fundamentals first. If people are just starting out I feel they should understand how to write such an app without a framework before using one for speedy development.

[@MJVNijhoff]

Good, useful for getting started or used to Vue. Please consider using color syntax in ur videos. Even if you don't prefer it, a lot of people do and it would make the code easier to read.

[@MJVNijhoff]

LOL spoke too soon @23:30

[@SANDEEPAGRAWAL003]

Very nice quick tutorial to cover almost all basic topics and very well explained. Keep us the good work.

[@maxoys45]

Really great video - easy to follow and well spoken. Would be really keen to see a video that works with a database. Does your full course include this? thanks!

[@stewiegriffin6503]

at the time, software development is just fkd up, and it's only getting worse. Every basement is developing new frameworks and bringing new complexity into the game

[@hatemsaad3421]

I couldn't agree more

[@buskinglankans]

It keeps bullshitter away from the SE industry.

[@Sc0rpic0m]

Just on the FE front. Back end is alot better. But I long for the days we had just bootstrap, css and jQuery. For now I focus more on the BE. Yes I am not as cool as the latest kool kids club FE script kiddies, I accept that.

[@viscafcb9911]

omg, it's exactly i think about

[@LeathanL]

@@hatemsaad3421 Seems like it's all calculated to make any experience older than six months useless.

[@juancarlosfigueroa617]

Hey great crash course on VueJS i think i will be buying the full course i will be sure to check it out on udemy btw i also liked your course on bootstrap 3 great material very helpful and right to the point, keep going your work it's really appreciatted!!

[@schemagroup1]

Definitely enjoying this tutorial, you remind me of Lee Brimelow, back when I was a Flash Developer. But since I liked it so much, I'm going to purchase the full tutorial, keep at it!.

[@wingushk]

Thanks. it is really good Vue.js intro for a beginner. It helped me a lots in picking it up.

[@eitaboba1035]

Hey man. Thank you very much. I used to program in Angular. But vuejs is very simple when compared to. You helped me a lot to migrated. \../

[@panagiotisgrigoreas2419]

Great, fluent, right to the point.

[@markifornia]

Great videos. Just the right pace and flow.

[@bartg8311]

One general suggestion: naming boolean variables with _is_ prefix makes the code so much more readable. For example: _v-if="isNameShown"_

[@TraversyMedia]

Good tip, thanks

[@pdvega6350]

Thank you for the video. This video helping me as a newbie in knowing deep about front-end framework using vue.

[@Blagel97]

Awesome video man! I've done a lot of Angular work and am going to start working on a Vue project so you're tutorial was perfect!

[@joeynovak07]

Dude, LOVE your crash courses. Thanks!

[@MuffinologyTrainer]

Just as always, gold quality.

[@antoinedevldn]

Someone needs to give Brad a Nobel.

[@maxkehayov]

Good job! Nice walkthrough for beginners (like myself), before diving into the documentation. Thanks for the introduction! :)

[@8Kexperience]

I have vue components but data is coming different server in one big JSON for all components. What should i have in my component data method?

[@nunoalmeida1970]

This was a great introduction to Vue.js! Thank you so much!

[@陈咕咕-h6o]

A vedio let you know how to use vue , vue-resource , vue-router. Greater！ 建议先看了vue的文档再看。

[@akinhwan]

wow that was a blur, learned a bunch!

[@robertsibek]

Thanks Brad, it was nice introduction.

[@GurjitSingh-yq8hi]

Really you are too Good. Thanks Traversy Media

[@ahmedslink]

Thanks a lot dude, It's awsome to cover all of this on 60 mins :)

[@edgardocastillo1661]

Excellent Thanks. Awesome tutorial, alwayz. Plz do any tutorial with Vue in front + Laravel in back !

[@christopherderrell8470]

Hey Brad. Great video, love the quality control. I noticed an error with the computed properties when I tried using ES6 arrow syntax for the function declaration; it wasn't picking up the ```this``` keyword, which I'm guessing has to do something with binding? Would love some clarity if possible. All the other areas so far work perfectly with the ES6 arrows.

[@Jennifer-fk5xi]

Couldn't perform the Add feature, I don't think you called methods "addUser" in html. So in html button, instead of using , I used Submit, then it works

[@JenniferJames-gj4ol]

LOVE N RESPECT YOUR EFFORTS

[@juanmamani2110]

Thanks! it really helps a lot! Now I'm dealing with Vue Admin Panel Framework based on Vue js!!

[@X1Zeth2X]

Awesome tutorial! Learned alot from this channel.

[@alexwhb122]

Awesome video! thank you very much. I feel like I learned all I need to know to get up and running, which is just what I need. It also seems like Vue and React share a lot of similar API characteristics, though I really love how Vue mixes css into the component files.

[@009MAMAX]

i'm just curious, why we can't type an es6 function syntax inside the methods property? please give us some info, thanks in advance for ur superclear video!

[@Gashdal]

because it changes the scope of the 'this' keyword.

[@christherlenander539]

Nice tutorial. Only question I have is when you use vue router you put the in the javascript file instead of in the index file?

[@SamehFakoua]

Great tutorial, step by step, can't be better, thumbs up. Great voice BTW, you should be on radio! Thank you.

[@mayur2k81]

Great video for beginners.Thank you

[@vikaschoudhary9149]

Excellent tutorial! Just wanted to ask that if I want to display a new component under the router div which is independent of the router and is to be just used for displaying another content, then how to do that? This is my first time with Vue. With your tutorial I implemented everything very smoothly. Thanks a lot!

[@ricardocotillo2199]

I love your videos man, I learn so much

[@hudan23channel]

nice tutorial , and this video give me a spirit to learn about vue js again hehe

[@Osama-xs8cl]

no vs than other ,it's all about developer and what he can do or what he can build

[@willfang3229]

Hey Brad, are you coming out with a project based course for Vue.js anytime soon?

[@MikeyMiner]

Great video. I've seen some other videos of yours in the past - always good quality content and flows well. Though I'm wondering, how come you didn't install the 'language-vue' package for Atom for the automatic syntax highlighting and such?

[@TraversyMedia]

I didn't realize there was a plugin at the time. I use it now all the time.

[@MikeyMiner]

Ah, okay! Thanks for the quick reply.

[@manuelsuarezabascal75]

Thank you so much for this crash course! It was really useful to me!

[@chintum]

Could you please create Crash Course on Polymer JS

[@MrBan001]

I have never used one of these Frameworks before! But now i'm required to use one for my next assignment! What should i use? Should i try diffrent ones or just one and stick with it?

[@cleverminds19]

Great Video for Vue. I need clarification for as you said the v-show is similar with v-if on 10:45sec in your video it is not true, v-show only hide element like its style CSS will display none, but in v-if it will remove the element completely.

[@memsey]

Really great crash course video, thanks for this!

[@jordanm2386]

Thank you mate, nice crash course. Gonna take a closer look now :).

[@dhatripriyanka1725]

Hi Brad, Aswome explation no words to tell about you pretty helpful vedio to new to Vue people also thanks a lot 🎉👏👏👏👏👏👏👏👏👏👏

[@haciendadad]

What was the Atom command that you used to have Atom treat your .vue file like a HTML file?

[@silviateona4388]

the set syntax package :) use it by bringing up the command palette and typing "ssh" for instance, to set syntax for html

[@tristangruener9571]

you will need to install the package first. Preferances -> +Install -> search Vue I selected the first package with the most downloads 'language-vue'. Install the package, then in your code file if it doesn't auto apply to new .vue files, you can set it manually

[@adriansiewiera]

In fact you don't need to use any packages. In the bottom right corner of Atom editor you have few settings and one of them is syntax (by default: plain text). Second method is a shortcut: ctrl+shift+L

[@kervensjasmin1508]

control+shift+L

[@dcscott100]

THANKS to all who answered!

[@sebbes333]

I wish KZbin had a faster playback speed than 2x :/ Great tutorial!

[@ekabelly]

hey! thanks for this amazing video! is it possible to use typescript with vue? is it reccomanded?

[@StrexGamer]

thanks for a wonderful tutorial ... just a slight problem, my styles dont seem to be imported (they dont apply at all) while using the router

[@sangwonluxlee3567]

A great guide for beginners! deeply thx for this video. :)

[@Razvanh29]

Is there a reason why you have the *Projects* directory in the *C drive* where the installed programs are? Does no that make the computer slower?

[@advanceduser3713]

Very easy to follow and cool tutorial! Thank you a lot

[@fanxxai]

Learned VueResource from you! 👌

[@themathdude]

How you present is excellent, easy to learn and pick up details quickly, thx. Do you have a mini course (eduonix or elsewhere) that takes this video one better by combining vuejs 2 with featherjs 2 (using socket transport) with say nedb. Lots of stone turning videos but very little view of the forest (stack) say building a simple but completely illustrative extensible app. (but not yet another todo or chat!). Throwing in quasar would be a plus (everyone always leaves the decent layout and styling out and that's a big time suck). I'm a one man shop. I design/build/set up real-time hardware (iot stuff too) and I need to not only be a hardware guy but come up with the end user software interface. To have a truly extensible example of this stack would allow me to concentrate on hardware.

[@ginil]

Great tutorial mate. Is the source available?

[@sunnyRVrocks]

Awesome. Just confused about one thing that how the files index.html, main.js , app.js glued together. Any help highly appreciated.

[@JuanitaHales]

Thanks for the tutorial helped me understand Vue for sure!

[@jessopbreth1080]

Ctrl+Shift+L sets text highlighting grammar as in ~23:20

[@Joystickmx]

Awesome Brad, can you help me out?, i want to implement vue.js on a existing php project I'm working on, just for making some stuff modular, so I don't want a complete vue.js app, just some modules, is it possible?

[@rebeldefmusik]

Very good tutorial, cheers mate!

[@speasley]

On your donation screen (1'08") the logo you use beside your Twitter link is actually the Tumblr logo.

[@TraversyMedia]

Haha good call. Maybe Ill change it

[@ApoorvaSinghal]

You are amazing man!! Helped me understand so much. Can you provide the sample code that you use in the video as well as that would be a great help. Thanks.