The tutorial is so noob friendly. By the way, do you have any plans to create a Vue + Django (rest api) or Laravel? (p.s. I'm not done yet watching the vid so I'm not sure if you discussed it in it)
Hi Gwen, not to toot my horn here, but to give you some context to this note: I'm a 40+ year dev, so I've done a bit of everything. Recently I've been using React + Redux and also Hapi ... thought I'd try my hand at Vue since github data shows it's catching on. Although I've watched only about 15 mins of your video so far, I'd like to post a note of gratitude for your efforts. I've watched a zillion instructional videos and have lectured many times on technical subjects. Your video is already one of the best I've come across - in *any* subject. I've already paused and rewound to take notes - the way you methodically build each item from the next is clearly the right way. One suggestion: Since there's a good 2+ hrs more to go for me, I don't know if you've already made your JS Fiddles publically available. Programmers love to conserve keystrokes (meaning we're generally lazy :) ... so being able to copy and paste, or take an existing code base and "fiddle" with it - even safely breaking it in an online sandbox, to see what doesn't work - is really expedient. Looking forward to the rest of the video - and any others you might do, such as Vuex, Nuxt, or even more sophisticated topics such as GraphQL or Apollo-Client (which I bet you can handle!) ... (And I hope you are being remunerated for your efforts in some way besides our notes of thanks!) - Howard in Florida
I can't appreciate enough when someone writes cleanly and knows some basic conventions and explains everything without skipping steps and saying "this could also be written like this, this is equivalent to that", thanks, it makes it so much better to understand.
I like the way you make "mistakes" to show what happens if you do stuff "wrong". It immediately answers a lot of "what if..." questions I might have had. Good job!
Amazing tutorial. npm upgrade(d) the git repository without a single error. 00 to 00:35: an introduction, 00:35 to 1:50 :the quiz app, 1:50 till end: the pet app. Last minutes: a conclusion and resources. Excellent job done.
This is the best video ever regarding Vue. I saw so many videos in English and Spanish, without a doubt and also by far this is the best. New subscriber, thumbs up, save the video, watch it again to take notes... the best 6 hours with Vue. Thank you so much to be so clear! I want more!!!!! Greetings from Uruguay
Hi Gwen, this is probably the best video I have watched on Vue. As a novice, the small things trip me up, like the newer Javascript shortcuts and Vue shortcuts, which fly past you in most tutorials. You may want to consider making a companion "Cheat Sheet" with all the little side "tidbits", that you nicely sprinkle throughout the talk. Thank you!
I'm a Java backend developer, and now for me it's time to learn frontend side of developing. I start learning vanilla JavaScript, and I know a little about jQuery. I don't know about Angular, Node or React, it's only buzzwords for me. I decide to start learning from Vue.js, and your video I choose as first on my Vue learning. After using JS and jQery, I feel that Vue make things much more simpler. Thanks for your video! Great explanation!
As someone who has experience with Angular, I found this really useful. I think the pace might be a bit fast for someone who is completely new to JS frameworks, but you covered A LOT in 3 hours. Very impressive.
This is my own take on the shuffling issue: i inserted the correct answer in a random position right from beginning when i was making the answers array like this : answers:function(){ let answers= [...this.question.incorrect_answers]; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } answers.splice(getRandomInt(answers.length),0,this.question.correct_answer) return answers } You dont need a library or anything like this.Have a good day!
I've made an Angular app to show in my portfolio and had the same problem, a variable was undefined until it got the value from a database, so it would always give me 3 errors because it couldn't render it on the dom before it would get the data from the database, and gave up on solving it. With your solution I fixed it and now I stopped getting the annoying 3 errors. Today is a great day.
God, I'm so glad to find a direct-to-the-point tutorial. Tutorials today are broken in so many pieces, which is hard to keep focused. And filled with too many "awesome", "your hello-word is so great" exercises... Subscribed!
I loved this video! I also like the style how you talk, it is more comprehensible than the rest of tutorials that just repeat "you get the drill" and "magic behind the scenes" without really explaining things first. So thank you!!
Traversey Media literally: watch me code and talk hastily aloud about the gist of what I am doing. Also him: "hopefully that made sense" If you have to "hope" that made sense every 2 minutes, then you're either not a good teacher or you're not a good developer.
I have finally finished your course, thanks a lot! I was waiting for a motivation to start learning Vue for months now and you juste gave me one with this video! I hope to see more of this :)
This video is the best I've seen about explaining Vue, and I've seen a lot. Great for both beginners and people that wants to review some topics. Thank you so much!
Thanks for this very nice video. One remark at 1:06:27 when clicking on the next button. The reason the next question does not show is not the fact that the currentQuestion is not available (that gives indeed an initial render error) but the fact that initially the button had a href="#" which masks the @click="next".
If anyone is having difficulty with 'correct_answer' at 1:32:04 it's because there's a missing piece on shuffleAnswers() function. Just add this to the end of your shuffleAnswers() { ... this.correctIndex = this.shuffledAnswers.indexOf(this.currentQuestion.correct_answer) }
40:40 A blue moon is when you have a second full moon in a calendar month, which happens infrequently, hence the use of the expression, "once in a blue moon." It does not mean it never happens or that it is a fairytale.
I am a server side developer with no Js libs, angular or react yet with some little Javascript experience. The course was kinda hard to understand at first, but after watching it 3 times I got it. Its hard to understand because things are far from being explicit. Too much is magical with things between quotation marks "" that could be expressions and functions as well. In languages I use such as Golang, C++ and Kotlin everything quoted are nothing else but strings. Thank you for a great lecture.
good video so far, but i'm pretty sure there's an editing error at 27:54, where you teach about filters which is a segment that was already in the video before
few of those editing errors. all in all its pretty good for veteran devs who'd rather watch a simple video than read page after page of docs. I like how she left the errors in. All in all pretty good intro into vue.
the truth .. I bought lots of Udemy (all of them at a certain point of time) courses as well and some of them where good but they where very long in length and therefore impractical for me .. and I really hope you can do any project that includes multi-level access roles, thanks for the awesome video and all the best
Thanks for the great video! I notice there's an editing error so not sure if anyone notices it too. There's a duplicate at 22:24 and 27:37 Both showing the same "filters" method =)
Thank you so much! Just finished the quiz app tutorial. Added a lastQuestion variable to disable the next button after the last question of the quiz. As for the difficulty of the tutorial (so far at least), if you already know React, you will understand many things very quickly (props, components, lifecycle methods, architecture)
Just wanted to thank you so much. This quick guide is very useful and really helped me to go through the Vue essentials within 3 hours of your theory and 2 hours on taking notes. Really helpful for those, who already knows, for instance, React and wants just to make some parallels between known technology and Vue. Thank you!
first time I see a girl giving online coding course and this is honestly Amazingg this is the best Vue course out theree I give you 5 start. keep going
There are a number of female coders at my company. They are really good in fact. I came here to also compliment the quality of the teaching, I immediately felt like it was hitting the points that i was interested in learning. A+.
I know this is quite an old video, but I just wanted to thank you so much for this excellent tutorial. Web development in general is completely new to me, and I came to this video because I was trying to figure out how to build a web application using Vue.js and associated tools. I'll be honest, the first couple times I watched this video I was pretty lost. However, I stuck with it, revisiting certain sections and playing in my browser at the same time. The things you were explaining just started making... sense? I definitely struggled in the beginning though. Anyway... you're awesome and thanks again
For anybody having issues with api at 59:00 not returning anything but error in console log. My problem was with mounted not being a function, so I had to mounted() { ...} instead of mounted: function () {...}
I believe this is a ES6 thing to make things easier. So, yeah anyways check your IDE or npm packages version and capabilities before following a tutorial. 👍
Very Good Tutorial Very Easy to learn Very easy to understand Nice tutorial Very good explanation Ma'am thanks for making these types of tutorial for learning Thank you so much
First of all, great video. Just noticed that you past functions as props to the child component, but I had read it at several places that people saying it is an anti-pattern. Vue recommends using events instead.
Loved the video. I am taking a udemy course too but it is so lengthy and even to explain simple things they take a long time. This is the best video to quickly start building apps with Vue.
I found this to be pretty good overall. Popped in here since I'd only touched Vue at my last job, but only via reverse engineering, never comprehension. There's a clip inserted explaining Filters that happens after Filters were initially explained.
For those who are getting incorrect answer even after selecting the correct one: Reason: While shuffling answers the index of the correct answer is also shuffled. So we need to get the index of correct answer before Shuffling. My code(it worked for me): shuffleAnswers() {
Thank you very much for this tutorial! You really explained many things in a simple way and you have a really calm voice! It's super cool that You mentioned other people who code. I noticed that not so many people do this, but you did and it's so nice. You gave us more possibilities to learn with this! :)
Great Video, helped me a lot since I am new to Vue js! Only thing that I noticed was, that at 1:32:09 we could not see you adding line 75 due to a cut :)
I notice at 1:29:00 that the answers are not shuffled. I think you need to change v-for="(answer, index) in suffleAnswers" in the template for list-group-item. If someone is blocked maybe this will be useful. :)
if anyone has the problem that after 1:37:00 ur app doesnt show the number of correct, then add the following code in ur shuffleAnswers function: this.correctIndex = this.shuffledAnswers.indexOf(this.currentQuestion.correct_answer)
you deserve 1000 thumbs! Very well abstracted and clearly great lecture for other framework users like me. (I used react before) Thanks again and hope you best.
Great video FYI to anyone having issues getting the links in the adopts-pets to work. Looks like boostrap-vue 2.15.0 broke something. I am not able to get under in Cats.vue and Dogs.vue to show links. I had to edit my package.json file and change from 2.15.0 to -> "bootstrap-vue": "2.0.0-rc.14". Then run a yarn install (or npm install). I'm not sure what is causing it to fail in bootstrap-vue 2.15.0, but the old 2.0.0-rc.14 lets me continue with the tutorial.
Thank you Gwen! Awesome tutorial and explanations. Learn by doing is a great way to get all the small details and to see how it works. I did both tutorials, Vue is a simple and really cool framework.
Fantastic tutorial on Vue! Loved it. Thank you for putting it together. Some small issues: As others have pointed out "Correct Index" needed at "1:31" is discussed out of sequence at "1:41". Also, shouldn't the v-for loop in the component QuestionBox be over this.shuffledAnswers rather than answers? Also, loved the fact that you make errors, show us code inspection methods using dev-tools/inspect. It allows us to learn how to debug the code at the same time! Overall, it's a fantastically done tutorial!
As a full-time senior React developer, I agree. VUE is cake but React is more powerful for larger more complex web applications and has gotten much easier/simpler since they added Hooks.
Who is the instructor for this tutorial? Amazing work, I really like how you explain each of the issues you dig into. And you let your mistakes fly without editing and publishing only what works. This helps me understand how to deal with issues that I will likely run into as I continue my journey. This is a really nice "real world" tutorial that I am utilizing as I try to understand this new (I know *some* old-school 1990's Javascript) paradigm of front-end development. Thank you again!
Very Good tutorial !! i watched once but was loste in the part two so i went watch more tutorials about the basics and vuex ...come bad and this tutorial was like putting all the pieces together !!!
People, do NOT use indented syntax (curly brace omitted) when you write styles, it's just asking for problems especially as you build larger more complex components or utilize BEM and media query nesting. Most engineers are terrible at writing CSS/SCSS properly.
2020 / 09 / 01 -> if you install vue-cli, then its version will be 4.x.x, And if create vue app, its vue version will be 3.x and the bootstrap-vue will occurs error because of the vue version. You should install vue-cli with command npm install -g @vue/cli@3.11.1 , same version of her. I spent 1 hour to fix this problem..
Thank you so much for the video I really enjoy the video, it precise, I was looking for vue.js to learn, luckily I found this, thank you so much, I really like it, I respect your effort for bringing this awesome video to us
![Vue.js Course for Beginners [2021 Tutorial]](http://i.ytimg.com/vi/FXpIoQ_rT_c/mqdefault.jpg)
![Vue.js Course for Beginners [2021 Tutorial]](/img/tr.png)
🎉 There is an UPDATED version of this course from Faraday Academy: ruclips.net/video/FXpIoQ_rT_c/видео.html
Thank you
Do we need to complete this before heading to the updated one?
Hi everyone! Thanks for watching my video. I hope you learned something. If you have feedback for me, please reply to this or get in touch.
Really awesome.Thanks for the tutorial
Thanks for the tutorial! By the way you put two times the filters part (second time at 27:40) ^^
The tutorial is so noob friendly. By the way, do you have any plans to create a Vue + Django (rest api) or Laravel? (p.s. I'm not done yet watching the vid so I'm not sure if you discussed it in it)
Hi Gwen, not to toot my horn here, but to give you some context to this note: I'm a 40+ year dev, so I've done a bit of everything. Recently I've been using React + Redux and also Hapi ... thought I'd try my hand at Vue since github data shows it's catching on. Although I've watched only about 15 mins of your video so far, I'd like to post a note of gratitude for your efforts. I've watched a zillion instructional videos and have lectured many times on technical subjects. Your video is already one of the best I've come across - in *any* subject. I've already paused and rewound to take notes - the way you methodically build each item from the next is clearly the right way. One suggestion: Since there's a good 2+ hrs more to go for me, I don't know if you've already made your JS Fiddles publically available. Programmers love to conserve keystrokes (meaning we're generally lazy :) ... so being able to copy and paste, or take an existing code base and "fiddle" with it - even safely breaking it in an online sandbox, to see what doesn't work - is really expedient. Looking forward to the rest of the video - and any others you might do, such as Vuex, Nuxt, or even more sophisticated topics such as GraphQL or Apollo-Client (which I bet you can handle!) ... (And I hope you are being remunerated for your efforts in some way besides our notes of thanks!) - Howard in Florida
These project based tutorials are best, and brought me some valuable tips so far
つ(●з●)つ
much much appreciated
I can't appreciate enough when someone writes cleanly and knows some basic conventions and explains everything without skipping steps and saying "this could also be written like this, this is equivalent to that", thanks, it makes it so much better to understand.
3ev3eeeee3bbfeee3bebev33eeeb
3v3
B
Bevef3e 3b
3fb3.e
Eev3v3hbe333be3evr3b3e333b
If at 31:37 it doenst work, make sure you put your template like this (note the ' ' around it ): template: ' cat '
Thx, worked for me now! curious why it then worked on her site?
thx , was getting stuck there for a sec !! :)
Thank you!
@@brucezhang9860 Thx a lot it worked for me now !
I like the way you make "mistakes" to show what happens if you do stuff "wrong". It immediately answers a lot of "what if..." questions I might have had. Good job!
I agree,,, it should be part of everyone lecture to have some bugs and explain about how things work while fixing them.
Thank you!
Ya same
For anyone stuck at 2:08 : Use instead of
3 months late I know, but thank you so much. I could not figure that out for the life of me.
Thanks for that! Did the parameter syntax just change with a new version or something?
OMG Thank you!!!!
@@mattm2582 slot-scope got deprecated. It's also better to read their official docs, they explained everything very well
can you change your timestamp to 02:08:00 so it's easier to find? thanks for the tip!
2:24:00 vuex pattern
2:24:15 call action to call mutation to update state
2:33:30 mapActions to methods and mapState to computed
I recommend this tutorial to everyone who asks me how to get started with Vue.
I’m still fairly new to programming and have done a few things in react, is there anything you would recommend I learn before doing this course?
@@waynec4098 If you have taken a look at react, then I believe you could jump right in. Whatever else you may need you'll figure it out on the way.
Amazing tutorial. npm upgrade(d) the git repository without a single error. 00 to 00:35: an introduction, 00:35 to 1:50 :the quiz app, 1:50 till end: the pet app. Last minutes: a conclusion and resources. Excellent job done.
This is the best video ever regarding Vue. I saw so many videos in English and Spanish, without a doubt and also by far this is the best. New subscriber, thumbs up, save the video, watch it again to take notes... the best 6 hours with Vue. Thank you so much to be so clear! I want more!!!!! Greetings from Uruguay
4 minutes into the course and I already know I'm going to have a good trip. Your teaching is excellent. Keep it up!
Hi Gwen, this is probably the best video I have watched on Vue. As a novice, the small things trip me up, like the newer Javascript shortcuts and Vue shortcuts, which fly past you in most tutorials. You may want to consider making a companion "Cheat Sheet" with all the little side "tidbits", that you nicely sprinkle throughout the talk. Thank you!
I'm a Java backend developer, and now for me it's time to learn frontend side of developing. I start learning vanilla JavaScript, and I know a little about jQuery. I don't know about Angular, Node or React, it's only buzzwords for me. I decide to start learning from Vue.js, and your video I choose as first on my Vue learning. After using JS and jQery, I feel that Vue make things much more simpler.
Thanks for your video! Great explanation!
As someone who has experience with Angular, I found this really useful. I think the pace might be a bit fast for someone who is completely new to JS frameworks, but you covered A LOT in 3 hours. Very impressive.
This is my own take on the shuffling issue: i inserted the correct answer in a random position right from beginning when i was making the answers array like this :
answers:function(){
let answers= [...this.question.incorrect_answers];
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
answers.splice(getRandomInt(answers.length),0,this.question.correct_answer)
return answers
}
You dont need a library or anything like this.Have a good day!
what about one line: this.answers.sort(() => 0.5 - Math.random())
I've made an Angular app to show in my portfolio and had the same problem, a variable was undefined until it got the value from a database, so it would always give me 3 errors because it couldn't render it on the dom before it would get the data from the database, and gave up on solving it. With your solution I fixed it and now I stopped getting the annoying 3 errors. Today is a great day.
Because of this video (after a few weeks of searching and reading topics) I started learning Vue. Thank you!
Same here. She is amazing. She explain all in a very simple way. My level of english is basic even so I can understand what she say so perfectly.
God, I'm so glad to find a direct-to-the-point tutorial. Tutorials today are broken in so many pieces, which is hard to keep focused. And filled with too many "awesome", "your hello-word is so great" exercises... Subscribed!
Gwen! thank you a lot! i did it!!! i got a new job!! THANK YOU A LOT!!!!
I loved this video! I also like the style how you talk, it is more comprehensible than the rest of tutorials that just repeat "you get the drill" and "magic behind the scenes" without really explaining things first. So thank you!!
Traversey Media literally: watch me code and talk hastily aloud about the gist of what I am doing.
Also him: "hopefully that made sense"
If you have to "hope" that made sense every 2 minutes, then you're either not a good teacher or you're not a good developer.
it's hard to believe this is free. but, the fact that it is. thank you so much :)
I have finally finished your course, thanks a lot! I was waiting for a motivation to start learning Vue for months now and you juste gave me one with this video! I hope to see more of this :)
She is the chilliest teacher ever. I'd listen to this as ASMR to sleep and even relax . 🙌😂
This video is the best I've seen about explaining Vue, and I've seen a lot. Great for both beginners and people that wants to review some topics. Thank you so much!
Great course so far! I had to listen to 2:27:55 a few times to make sure I get all the relationships.
One of the best tutorials of all time so far! No time wasted (except for when the filters segment was taught twice?). Pretty clear.
I wasn't be sure what framework to use for frontend of my web app. But I've decided to use vue because of this tutorial, thank you!
Thanks for this very nice video. One remark at 1:06:27 when clicking on the next button. The reason the next question does not show is not the fact that the currentQuestion is not available (that gives indeed an initial render error) but the fact that initially the button had a href="#" which masks the @click="next".
If anyone is having difficulty with 'correct_answer' at 1:32:04 it's because there's a missing piece on shuffleAnswers() function.
Just add this to the end of your shuffleAnswers() {
...
this.correctIndex = this.shuffledAnswers.indexOf(this.currentQuestion.correct_answer)
}
Also, you have to add "correctIndex: null" to your data function (inside the return) in your QuestionBox.vue file
40:40 A blue moon is when you have a second full moon in a calendar month, which happens infrequently, hence the use of the expression, "once in a blue moon." It does not mean it never happens or that it is a fairytale.
Day 1 - 35:43 Thanks. Wanted to try Vue, so helpful
It was an amazing tutorial and in just 3 hours all necessary concepts were covered. Really liked your work, Gwendolyn.
1:41:29 should have been a clip that appear earlier, overall a very informative and detailed tutorial for me as an complete vue noob.
so glad I found this comment,. I thought it's just me who noticed it..
The best tuto i have taken so far
ABSOLUTELY LOVE IT
I am a server side developer with no Js libs, angular or react yet with some little Javascript experience. The course was kinda hard to understand at first, but after watching it 3 times I got it. Its hard to understand because things are far from being explicit. Too much is magical with things between quotation marks "" that could be expressions and functions as well. In languages I use such as Golang, C++ and Kotlin everything quoted are nothing else but strings. Thank you for a great lecture.
good video so far, but i'm pretty sure there's an editing error at 27:54, where you teach about filters which is a segment that was already in the video before
I thought i was losing my mind lmao
@@Frederic_Chopin. same
thought i had just traveled back in time
few of those editing errors. all in all its pretty good for veteran devs who'd rather watch a simple video than read page after page of docs. I like how she left the errors in. All in all pretty good intro into vue.
Deja vu
insane effort was put to this course , thank you Faraday so much
the truth .. I bought lots of Udemy (all of them at a certain point of time) courses as well and some of them where good but they where very long in length and therefore impractical for me .. and I really hope you can do any project that includes multi-level access roles, thanks for the awesome video and all the best
I'm on one right now that really has a lot of unnecessary bs.
By FAR the best guide I've seen, and I went thru a lot of them last 2 days. Ty very much, really helpful!
Great tutorial!
to go to Vuex & Vue-router 1:50:00
Thanks for the great video! I notice there's an editing error so not sure if anyone notices it too. There's a duplicate at 22:24 and 27:37 Both showing the same "filters" method =)
Thank you so much! Just finished the quiz app tutorial. Added a lastQuestion variable to disable the next button after the last question of the quiz.
As for the difficulty of the tutorial (so far at least), if you already know React, you will understand many things very quickly (props, components, lifecycle methods, architecture)
Simple array shuffle
var array = ['hi', 'hello', 'hola'];
var newVal = 'new value';
array.splice(Math.floor(Math.random() * array.length), 0, newVal)
console.log(array);
"undefinedy" I cracked up. Amazing tutorial! Very useful, well-structured and explained. You're preparing me for my new job interview's challenge. 😎
The 'correctIndex' variable is added in the 1:41:20 . Hope to help!
THANK YOU!
Outstanding video. Way better than other vue intros on youtube.
Just wanted to thank you so much. This quick guide is very useful and really helped me to go through the Vue essentials within 3 hours of your theory and 2 hours on taking notes. Really helpful for those, who already knows, for instance, React and wants just to make some parallels between known technology and Vue. Thank you!
This is amazing. I was always so scared of these libraries but Vue seems so simple. Thank you so much :)
first time I see a girl giving online coding course and this is honestly Amazingg this is the best Vue course out theree I give you 5 start. keep going
ya this is great
There are a number of female coders at my company. They are really good in fact. I came here to also compliment the quality of the teaching, I immediately felt like it was hitting the points that i was interested in learning. A+.
I know this is quite an old video, but I just wanted to thank you so much for this excellent tutorial. Web development in general is completely new to me, and I came to this video because I was trying to figure out how to build a web application using Vue.js and associated tools.
I'll be honest, the first couple times I watched this video I was pretty lost. However, I stuck with it, revisiting certain sections and playing in my browser at the same time. The things you were explaining just started making... sense? I definitely struggled in the beginning though.
Anyway... you're awesome and thanks again
For anybody having issues with api at 59:00 not returning anything but error in console log. My problem was with mounted not being a function, so I had to mounted() { ...} instead of mounted: function () {...}
I believe this is a ES6 thing to make things easier.
So, yeah anyways check your IDE or npm packages version and capabilities before following a tutorial. 👍
Very Good Tutorial
Very Easy to learn
Very easy to understand
Nice tutorial
Very good explanation
Ma'am thanks for making these types of tutorial for learning
Thank you so much
First of all, great video. Just noticed that you past functions as props to the child component, but I had read it at several places that people saying it is an anti-pattern. Vue recommends using events instead.
Elegant and simple way of teaching in beautiful voice. easy to understand "Nice".
best tutorial I ever seen. I didn't fall a sleep and I see every typing error you accidently did.
Part 2 is exactly what I am looking for. Vue is a game changer, I built my app in it and am loving it. RIP jquery 😂
jquery: king of the web
@@blue_benjamin In the past
at 1:32:03 You skipped over the part where you define and initialize this.correctindex
Exactly, I'm going through the same situation. Found that initialization of this.correctindex was explained at 1:41:01
Loved the video. I am taking a udemy course too but it is so lengthy and even to explain simple things they take a long time. This is the best video to quickly start building apps with Vue.
great approach with the fiddling first to get a feel for the framework, thank you very much
I found this to be pretty good overall. Popped in here since I'd only touched Vue at my last job, but only via reverse engineering, never comprehension. There's a clip inserted explaining Filters that happens after Filters were initially explained.
For those who are getting incorrect answer even after selecting the correct one:
Reason: While shuffling answers the index of the correct answer is also shuffled. So we need to get the index of correct answer before Shuffling.
My code(it worked for me):
shuffleAnswers() {
let answers = [...this.currentQuestion.incorrect_answers, this.currentQuestion.correct_answer]
this.correctIndex = answers.indexOf(this.currentQuestion.correct_answer)
this.shuffledAnswers = _.shuffle(answers)
// this.correctIndex = this.shuffledAnswers.indexOf(this.currentQuestion.correct_answer)
}
And also, you must change your 'for loop' in the like so:
After watching this, I searched and applied for Vue Developer jobs. I got hired. So thank you for this. Really.
My fav channel for learning new technologies
Thank you very much for this tutorial! You really explained many things in a simple way and you have a really calm voice! It's super cool that You mentioned other people who code. I noticed that not so many people do this, but you did and it's so nice. You gave us more possibilities to learn with this! :)
Great Video, helped me a lot since I am new to Vue js! Only thing that I noticed was, that at 1:32:09 we could not see you adding line 75 due to a cut :)
I notice at 1:29:00 that the answers are not shuffled. I think you need to change v-for="(answer, index) in suffleAnswers" in the template for list-group-item.
If someone is blocked maybe this will be useful. :)
Finally Vue 🙌 Thanks 👌
You can also checkout about custom elements in javascript.
this is a diamond in youtube ... Thank you!!
What a thorough Vue tour! I really learn a lot from this tutorial!
if anyone has the problem that after 1:37:00 ur app doesnt show the number of correct, then add the following code in ur shuffleAnswers function:
this.correctIndex = this.shuffledAnswers.indexOf(this.currentQuestion.correct_answer)
or u can watch couple of minutes more and then its actually added ... just not on time ...
you deserve 1000 thumbs! Very well abstracted and clearly great lecture for other framework users like me. (I used react before) Thanks again and hope you best.
1000 thumbs? Did u mean thumbs up?
@@IQUBE LOL
If anyone else struggles with getting the right router link and index to the pets page around 2:14:55 , try changing to
actually "`/pets/dogs/${data.index}`" works, it is backtick ` (ES6 string interpolation), instead of single quote '.
@@JohnTheHumbleMan Great! Thanks, I could'nt see that from the video.
Awesome Video! One of the best tutoring videos I have ever seen. So much knowledge in a short period of time, definitely a must see video!
Her voice is so soothing and nice
I know right... it's the main reason why I like this tutorial xD
Excellent stuff!! Thanks a ton!! The way Vuex was explained for just phenomenal!! Thanks again! Loved it!
Its a an amazing video but please try minimising the typing sound its quite annoying on earphones
-ThankYou✌️
No I like it
Great video
FYI to anyone having issues getting the links in the adopts-pets to work. Looks like boostrap-vue 2.15.0 broke something. I am not able to get under in Cats.vue and Dogs.vue to show links. I had to edit my package.json file and change from 2.15.0 to -> "bootstrap-vue": "2.0.0-rc.14". Then run a yarn install (or npm install).
I'm not sure what is causing it to fail in bootstrap-vue 2.15.0, but the old 2.0.0-rc.14 lets me continue with the tutorial.
Awesome. You deeply covered most of vuejs features. This is probably for intermediate to advanced vuejs developer!!
Thank you, I enjoyed learning the basics of VueJs and VueX with this tutorial.
Thank you Gwen! Awesome tutorial and explanations. Learn by doing is a great way to get all the small details and to see how it works. I did both tutorials, Vue is a simple and really cool framework.
Fantastic tutorial on Vue! Loved it. Thank you for putting it together.
Some small issues: As others have pointed out "Correct Index" needed at "1:31" is discussed out of sequence at "1:41".
Also, shouldn't the v-for loop in the component QuestionBox be over this.shuffledAnswers rather than answers?
Also, loved the fact that you make errors, show us code inspection methods using dev-tools/inspect. It allows us to learn how to debug the code at the same time!
Overall, it's a fantastically done tutorial!
Thanks a ton! I'm an intermediate dev and the tutorial was very helpful for me.
Coming from React, this seems incredibly simple and easy to use. Good tutorial.
As a full-time senior React developer, I agree. VUE is cake but React is more powerful for larger more complex web applications and has gotten much easier/simpler since they added Hooks.
26:02 to hear sweet kitty cat sounds 😌
It happens several times during the tutorial, first I thought it was my cat :)
I like your voice, your teaching way but in this particular video the audio was very low. Thanks for everything :)
Who is the instructor for this tutorial? Amazing work, I really like how you explain each of the issues you dig into. And you let your mistakes fly without editing and publishing only what works. This helps me understand how to deal with issues that I will likely run into as I continue my journey. This is a really nice "real world" tutorial that I am utilizing as I try to understand this new (I know *some* old-school 1990's Javascript) paradigm of front-end development. Thank you again!
Very Good tutorial !! i watched once but was loste in the part two so i went watch more tutorials about the basics and vuex ...come bad and this tutorial was like putting all the pieces together !!!
beautiful and simple explanation. loved the tutorial
Awesome tutorial, helped me in a project that requires Vue skills (worked with react before, so that helped). Great Video, thanks for sharing!
Along with the content, I enjoy the sound of the Razer keyboard in the video
Very neat explanation for the beginners. Good approach.
Very Beautiful and wonderful explanation - Thanks to the instructor
Double muchtase syntax is my favorite syntax
People, do NOT use indented syntax (curly brace omitted) when you write styles, it's just asking for problems especially as you build larger more complex components or utilize BEM and media query nesting. Most engineers are terrible at writing CSS/SCSS properly.
2020 / 09 / 01 -> if you install vue-cli, then its version will be 4.x.x, And if create vue app, its vue version will be 3.x and the bootstrap-vue will occurs error because of the vue version. You should install vue-cli with command npm install -g @vue/cli@3.11.1 , same version of her. I spent 1 hour to fix this problem..
thanks for this, just a little correction: this is the right command to run npm install -g @vue/cli@3.1.1
This is an awesome straight to the point Video.
This really helped me to get started with Vue. Thank you!
Thabk you for using the right words at the right time, thanks for the intellectual rigorness, thats refreshing !
Thank you so much for the video I really enjoy the video, it precise, I was looking for vue.js to learn, luckily I found this, thank you so much, I really like it, I respect your effort for bringing this awesome video to us