Vue.js 2.0 In 60 Minutes
Вставка
- Опубліковано 29 вер 2024
- UPDATED VERSION - • Vue JS Crash Course (2...
In this crash course we will cover all of the fundamentals of the Vue.js 2.0 JavaScript framework.
Vue-cli
Declarative Rendering
Directives
Conditionals & Loops
Events & Input
Templates
Components
Properties
vue-router
vue-resource
FULL VUE.JS COURSE:
www.eduonix.co...
For more on this video and others, visit www.traversymed...
SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
Your tutorials are super simple to follow. Thanks for the effort you put in to provide this video.
Thanks. For someone who is used to other frameworks, this hour gives an excellent overview. Great work!
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!
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.
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.
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?
Thanks a lot dude, It's awsome to cover all of this on 60 mins :)
Really you are too Good. Thanks Traversy Media
Helpful video, thanks!
Thanks Brad, it was nice introduction.
Very easy to follow and cool tutorial! Thank you a lot
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?
LOVE N RESPECT YOUR EFFORTS
Thanks you very much! This is a good tutorial for beginners. Much useful for me.
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?
now it changes, you should install @vue/cli-init, if you want follow this tutorial
Great work! Thanks.
This is awesome!
17:20 I don't know Vue.js, but it feels like you just circumvented the intended API to put your desired port in there. Looks like it was offering you 2 good ways to set that port already. First being an environment variable. stackoverflow.com/a/13333312/117471 Second being a `config` object with a `dev` specific property. I'm just looking at Vue.js for the first time, but I bet there is a JSON file in that config directory (under the build directory you went into) that you could have edited. When you face these kinds of things, you should try searching the codebase for 8080.
"foo-BAH"
Eastern Mass.
lol, I really try and pronounce my R's in these videos. That's the sad paht :)
No worries bruh. Being in Western Mass myself, I've heard it all.
Thanks for your videos
Very very thanks. 👍👍👍👍
Thanks man, I donated some money to support you!
Starting a new job tomorrow where vue js is used. This video is a treat! Thanks
Tip: instead of using "npm install --save " or "npm install -g " just use "npm i -S "/"npm i -g "
Damn you Windows programmer, spent 5 minutes searching for the error, you've typed the ./components/test in lowercase but created the file as Test.vue with the T uppercase (yes, I've followed along every detail :P and got screwed)
Bruno de Oliveira lol windows cmd forgives case sensitivities
that makes two of us
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
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
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?
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.
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
Sorry Brad I forgat a request ...
If You'll plan a VUE2 video as I explained , could You insert the MongoDB managerment for different items per DOC , I would try to implments it but I do not understand how to manage it
Thanks again ...
55min, right near the end you break the contacted paradigm.
You need something like this:
```
this.users = response.data;
for (var user in this.users) {
this.$set(this.users[user], 'contacted', false)
}
```
You wrote:
import Test from './components/*t*est' Where test us with small t.
Didn't work for me. It gave me error. I hade to write capital T. Like this:
import Test from './components/*T*est'
It took me a while to try the capital T. LOL
Great video :) I'm actually getting the hang of it. Very well explained, thanks!
i know right
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'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 Brad,
Aswome explation no words to tell about you pretty helpful vedio to new to Vue people also thanks a lot 🎉👏👏👏👏👏👏👏👏👏👏
Awesome. Just confused about one thing that how the files index.html, main.js , app.js glued together. Any help highly appreciated.
How much Javascript do I need to know before learning Vue.js? Or Shall I need to create basic project in Javascript?
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.
All explained great until that router part, I think you should do a seperate video for it, it's too advanced and complex stuff, I guess you wanted to fit everything into one video but that router is just too much.
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.
interesting but i dont like the old school $ signs. also i get the idea of having 1 file for 1 component for small apps but doesn't that get ugly with bigger components?
For who get stuck in class contact, now it's v-bind:class="{contacted: user.contacted}
I got a point, every time that I try to create a v-model variable I also have to declare it inside return, I'd like to use model without have to declare variable every single time, is there some way that I can do this?
Reference my comment on your Vue Crash course. This video is better suited to Vue Virgins! Thanks !
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?
Hey Brad, are you coming out with a project based course for Vue.js anytime soon?
until this point ua-cam.com/video/z6hQqgvGI4Y/v-deo.html
i like how you created a cluster fuck component ... my god....
I wish UA-cam had a faster playback speed than 2x :/
Great tutorial!
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.
I am still baffled about this: Am I supposed to use Vue.js exclusively for SPAs built only on Vue and using external API? Since it's always said "Vue.js application"? Or is it OK to keep using Laravel or so for my application and just use Vue.js components in the views where needed?
Hello Brad ,
first , thanks a lot for Your , well explained videos about php , JS and so on ...
Your UA-cam channel is GREAT .
I'm not a pro developer , is it quiet an hobby , so , I appreciate very much this Vue2 Js in 60 mins video , but I would try implements a stack like MEAN but with Vue2Js instead Angular .
Vue2 seems more simply VS Angular2 , Angular is to hard ... for me .
I check on the web and found a module "express-vue" .
Do You can plan a Crash Course about it ?
Many thanks in adavance .
Your welcome, thanks for watching! I have used that module but I have not used it in a tutorial. I do have more Vue.js stuff planned so it is a possibility
Actual course starts at ua-cam.com/video/z6hQqgvGI4Y/v-deo.html. Prior to it is an intro on author's upcoming website and invitation to sub.
I'm late to the party but I'm slowly knocking these out. Thanks so much!
The way you type the pair of quotes or braces then press back is infuriating...
Any ideas on why is that function with lambda not working? Replacing it with function does the job...
fullNameLambda: () => this.user.name + ' ' + this.user.surname
so the only major thing different from angular is that you can bind html right...
If you could use a better mic for your next recording that would be great.
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 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
Hello Brad, thanks for this good tutorial so keep going ;)
I have a question , I have built my Vue-cli app and when usin "npm run dev" for production I get this error and I searched over and over but there is no solution for the error; Do you have any idea about that error? and How can I upload the app to a server to publish?
Thanks for help..
Error => ERROR in static/js/app.325e3147ea5664539e33.js from UglifyJs
Unexpected token: punc ()) [static/js/app.325e3147ea5664539e33.js:93,21]
Then a message => Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
One general suggestion: naming boolean variables with _is_ prefix makes the code so much more readable. For example: _v-if="isNameShown"_
Good tip, thanks
A great guide for beginners! deeply thx for this video. :)
How to get into Programming as a designer, can we just have design system?
Is it possible to pay in euros?
Edit: just noticed this vid is 1 year old sorry
What is the difference between using vue-resource and using axios to get content?
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?
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!
Our lint will show errors on v-for, unless a key is supplied To give Vue a hint so that it can track each node’s identity.
The code still works as intended but red squiggly lines... blaaa
works good :)
Hi Brad - Thanks for the video! Can you also create a tutorial with VueJS + Django (or Django Rest Framework)? I can't find any good tutorial on the internet regarding this VueJS and Django integration. I would like to become a Full Stack Web Developer and your videos inspire me.
A vedio let you know how to use vue , vue-resource , vue-router. Greater！
建议先看了vue的文档再看。
Very straightforward tutorial. That one is a really crash course.
How does one combine Vue.js with sails.js?
I would like to use Vue with my existing sails app. But I don't understand how these libraries/frameworks integrate.
no vs than other ,it's all about developer and what he can do or what he can build
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?
in angular there is HostListner service where i can bind any event to listen, so for example.. i have a button called "Add as favorite" when user clicks on it.. it show login popup only if not logged in.. and if logged in just console.log("favorited"), but not then just popup will appear, user have to either login or register and after successful action, popup will close and without clicking again "add as favorite" button it will trigger that action/method.. that i have in angular working but how to implement in Vue.js please help
Hi Brad, thank you for your tutorial! I've just finished your first project in laravel course 10 projects made by you. I am about to try vuejs, but I have problem... I am installing through npm and everything is fine until I open the VC and try to make some changes in the code and then I get error: Failed to save: insufficient permissions, try as administrator. I searched online and still I don't know what it is... Do you have any ideas? It happens only when I try vuejs framework. Thank you!
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!!
Vue isn't bad but I think that something built in React looks neater and more organised, in terms of source code. I don't like Vue very much, as far as I can tell from this video, which is great anyway, thank you!
Great tutorial, step by step, can't be better, thumbs up.
Great voice BTW, you should be on radio!
Thank you.
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.
Any way to add to the full stack developer course you just released
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.
Because data is used as a function and not as an object, does it make a difference?
please help me sir, i am an angular developer and have a project on Angular 2 but now just started learning vue and i think i am gonna love it... so finally want to convert it on Vue.. now i am stuck on one logic.. it will be great help if you help me or just create a codepen, plunkr whatever or just explain the logic in comments :)
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.
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.
how i can make pagination with vuejs2 ? can anyone help me ?
Very useful and effective web tutorials. Thank you traversy! I was inspired by you to make more Filipino/tagalog tutorials for my country
45:47 You can simply put .prevent after the @submit handler instead of doing e.preventDefault! :)
_( so )_
can you make a video on ruby on rails and webpack-vuejs
if you like VueJS you should use KnockOutJS. the code design is the same but K is much easier and clean. you work with html straight away.
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. \../
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
Dude! that was awesome and really helpful, i will buy the full course to support! greetings from Dominican Republic. :)
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.
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!
Hey Brad, have you tried to use vue-cli behind a corporate proxy? Because the command "vue init webpack " chokes behind a proxy server.