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 UA-cam. 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!
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.
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!
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.
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.
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.
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.
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!
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.
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
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!
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
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!
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.
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.
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.
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.
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!.
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!!
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!
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.
In 8:46 var should be simple case right? JS is case-sensitive right? Anyway, your videos are very helpful. Please don't give up and keep the good work.
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.
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!
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.
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.
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?
Coming from Angular, this is surprisingly similiar, however, within the the last 3 or so minutes of the video. Brad uses .$mount('#app') at the end of the new Vue. Why is this? I see we are using within the template, but why is the mounting necessary?
Nice crash course. Can't wait to see your website! Was wondering if you knew any of the C languages or java? If so what IDE do you think is best for Linux?
Hi, great tutorial and very useful. I have two questions, if I may: 1. Since you pull the users from that jsonplaceholder site, how do I then set the contacted field? 2. What if at the beginning I want to hide the two screens and shows only the two links, how can I accomplish that? Thanks for the good work.
Hi Jonecir, I hope you have already solved your issue. If not try this: In "Users.vue" replace the code of "created" with: created: function(){ this.$http.get('jsonplaceholder.typicode.com/users') .then(function(response) { let data = response.data, item; for(item in data) { data[item].contacted = false; } this.users = response.data; }); } You will notice that I add the contact value to the result inside the promise. Good luck!
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.
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
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
I've been watching all these videos to see which Framework I should learn! I've gone through Angular and Ember ... I like Ember a little more. Angular just seems like a clusterfuck! I've heard good things about Vue and React .... Do you have any recommendation on Frameworks I should master?
I'm using the most current version of node, vue, etc. but there are some extra options now with the version of vue-cli such as asking for installing vue-router. Also, the dev-server.js is missing
When it created my app it created a index.js file containing a new Router() with a route to the HelloWorld Component. That was different from the video. Later version of vue?
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?
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
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.
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?
Computed properties are meant for doing modifications of data inside your app locally. An example of this is reversing a string that is stored inside your vuejs app. Methods are simply functions which are used for more complex tasks that aren't simply modifying data. for example: add this item to a list and make a http call using vue resource.
Computed will never process untill the dependency data gets updated. If your dependency data has heavy manipulation its better to stick with computed. I think internally they use concept of Memoization. Method will be processed every time its called.
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 UA-cam. 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!
How old are you, sir?
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.
Starting a new job tomorrow where vue js is used. This video is a treat! Thanks
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!
Your tutorials are super simple to follow. Thanks for the effort you put in to provide this video.
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.
I got a new job as a viewjs developer ! was working as an angular developer. Thank you brad your tutorial helped a lot.
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.
Viewjs. 😂
the fact that you can't even write down the name of the framework you're using ...
lol, actually made me lol twice! 😂👌
@@lancerino765 hahahaha
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.
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!
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!
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.
Thanks. For someone who is used to other frameworks, this hour gives an excellent overview. Great work!
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!
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.
Very nice. One of the few tutorials I actually watched until the end.
Thanks man, I donated some money to support you!
You are seriously the best teacher I have ever had. Thank You!
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
Tip: instead of using "npm install --save " or "npm install -g " just use "npm i -S "/"npm i -g "
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
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!
Dude! that was awesome and really helpful, i will buy the full course to support! greetings from Dominican Republic. :)
Very straightforward tutorial. That one is a really crash course.
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
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!
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!
Very nice quick tutorial to cover almost all basic topics and very well explained. Keep us the good work.
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.
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.
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.
I'm late to the party but I'm slowly knocking these out. Thanks so much!
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.
one of the best tutorial for vue.js for beginner. Thank you so much.
Very useful and effective web tutorials. Thank you traversy! I was inspired by you to make more Filipino/tagalog tutorials for my country
beautiful. best one hour tutorial so far.
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!.
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!
Thank you for the video. This video helping me as a newbie in knowing deep about front-end framework using vue.
45:47 You can simply put .prevent after the @submit handler instead of doing e.preventDefault! :)
_( so )_
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!!
Thanks. it is really good Vue.js intro for a beginner. It helped me a lots in picking it up.
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!
because it changes the scope of the 'this' keyword.
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.
Good job! Nice walkthrough for beginners (like myself), before diving into the documentation. Thanks for the introduction! :)
In 8:46 var should be simple case right? JS is case-sensitive right? Anyway, your videos are very helpful. Please don't give up and keep the good work.
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.
Great, fluent, right to the point.
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. \../
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?
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!
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.
LOL spoke too soon @23:30
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.
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?
Just as always, gold quality.
Great videos. Just the right pace and flow.
Dude, LOVE your crash courses. Thanks!
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?
This was a great introduction to Vue.js! Thank you so much!
Thanks a lot dude, It's awsome to cover all of this on 60 mins :)
Coming from Angular, this is surprisingly similiar, however, within the the last 3 or so minutes of the video. Brad uses .$mount('#app') at the end of the new Vue. Why is this? I see we are using within the template, but why is the mounting necessary?
Nice crash course. Can't wait to see your website!
Was wondering if you knew any of the C languages or java? If so what IDE do you think is best for Linux?
In my opinion IDE's from JetBrains are the best.
ihor1337 I'll have to check it out. Thank you for your input.
Eclipse is a must have for Java.
But for other languages I agree with ihor1337 that the JetBrains IDE's are the best
JetBrains' IntelliJ wipes its ass with Eclipse.
Thanks! it really helps a lot! Now I'm dealing with Vue Admin Panel Framework based on Vue js!!
Could you please create Crash Course on Polymer JS
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
Really you are too Good. Thanks Traversy Media
Great video for beginners.Thank you
Instead of v-on:click you can do @click. Instead of v-bind:src you can do :src
so : and @ for nice shortcuts :)
Hey Brad, are you coming out with a project based course for Vue.js anytime soon?
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?
Hi, great tutorial and very useful. I have two questions, if I may:
1. Since you pull the users from that jsonplaceholder site, how do I then set the contacted field?
2. What if at the beginning I want to hide the two screens and shows only the two links, how can I accomplish that?
Thanks for the good work.
Hi Jonecir,
I hope you have already solved your issue. If not try this:
In "Users.vue" replace the code of "created" with:
created: function(){
this.$http.get('jsonplaceholder.typicode.com/users')
.then(function(response) {
let data = response.data,
item;
for(item in data) {
data[item].contacted = false;
}
this.users = response.data;
});
}
You will notice that I add the contact value to the result inside the promise.
Good luck!
For your second question, just create an empty component and put it into the index route.
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.
What was the Atom command that you used to have Atom treat your .vue file like a HTML file?
the set syntax package :) use it by bringing up the command palette and typing "ssh" for instance, to set syntax for html
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
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
control+shift+L
THANKS to all who answered!
LOVE N RESPECT YOUR EFFORTS
I've been watching all these videos to see which Framework I should learn! I've gone through Angular and Ember ... I like Ember a little more. Angular just seems like a clusterfuck! I've heard good things about Vue and React .... Do you have any recommendation on Frameworks I should master?
Awesome. Just confused about one thing that how the files index.html, main.js , app.js glued together. Any help highly appreciated.
Hi Brad,
Aswome explation no words to tell about you pretty helpful vedio to new to Vue people also thanks a lot 🎉👏👏👏👏👏👏👏👏👏👏
I'm using the most current version of node, vue, etc. but there are some extra options now with the version of vue-cli such as asking for installing vue-router. Also, the dev-server.js is missing
whats the advantage of defining functions on the methods object as properties, rather than just as functions on the methods object?
When it created my app it created a index.js file containing a new Router() with a route to the HelloWorld Component. That was different from the video. Later version of vue?
Having the same issue here
just choose not to create router during 'vue init'
Any way to add to the full stack developer course you just released
Thank you so much for this crash course! It was really useful to me!
Great video :) I'm actually getting the hang of it. Very well explained, thanks!
i know right
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?
Great tutorial mate. Is the source available?
Why at 23:28 is this a secret how to view as html?
Thanks Brad, it was nice introduction.
A great guide for beginners! deeply thx for this video. :)
Helpful video, thanks!
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
I couldn't agree more
It keeps bullshitter away from the SE industry.
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.
omg, it's exactly i think about
@@hatemsaad3421 Seems like it's all calculated to make any experience older than six months useless.
I wish UA-cam had a faster playback speed than 2x :/
Great tutorial!
I love your videos man, I learn so much
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?
I didn't realize there was a plugin at the time. I use it now all the time.
Ah, okay! Thanks for the quick reply.
hey! thanks for this amazing video!
is it possible to use typescript with vue? is it reccomanded?
wow that was a blur, learned a bunch!
What is the difference between using vue-resource and using axios to get content?
Thank you mate, nice crash course. Gonna take a closer look now :).
Really great crash course video, thanks for this!
Great tutorial, step by step, can't be better, thumbs up.
Great voice BTW, you should be on radio!
Thank you.
What is the difference between computed and methods this It distracts me
Computed properties are meant for doing modifications of data inside your app locally. An example of this is reversing a string that is stored inside your vuejs app. Methods are simply functions which are used for more complex tasks that aren't simply modifying data. for example: add this item to a list and make a http call using vue resource.
Computed is cached
Computed will never process untill the dependency data gets updated. If your dependency data has heavy manipulation its better to stick with computed. I think internally they use concept of Memoization.
Method will be processed every time its called.
method is a function {{ method() }} which does a call for each request
computed caches the data no () required {{ computed }}
When you working with large set of data, computed better for caching
Awesome tutorial! Learned alot from this channel.