DEV Community

loading...

Hands-on Vue.js for Beginners (Part 7)

Marina Mosti on March 05, 2019

We are nearing the end of journey, and you are almost ready to graduate from Vue Padawan level. But first watchers, you must learn. We're going to...
Collapse
nickwireless profile image
Nick Hanigan

You were great on ViewsOnVue podcast and so I thought to pop over to read your lessons. Thanks all round! 🏅🏅

One vote for your next topic is $emit and how that fits with parent, child and props etc. . I'd like your take on it because was shakey on it first time around.🤗

Collapse
marinamosti profile image
Marina Mosti Author

Hey Nick! Thanks a ton for your feedback :) An article about $emit is a great idea, I will definitely take it into account :D

Collapse
nickwireless profile image
Nick Hanigan

😀 thanks. 👍

Collapse
jamiemccarville profile image
Jamie McCarville 🇨🇦

Great work on this series of articles! I have also been playing around with Vue for a little bit now and this is the best set of beginner articles that I have come across. Looking forward to more Vue content from you.

Collapse
csabdulwahab profile image
Abdul Wahab

Thankyou so much for the wonderfull article
I like your top down approach of explaining things
Its not only informative yet fun to read
I enjoyed it thoroughly

I would love to see more articles from you
On nested components and slots

Collapse
marinamosti profile image
Marina Mosti Author

Hey Abdul, thanks a ton for reading and your nice words. Nested components and slots seems like a great idea to write about, thanks for the tip!

Collapse
yodist profile image
Yodi Satriani

Thanks Marina for such free tutorials you gave to us. It did really helps me a lot of figuring out what Vue framework actually is for a beginner like me. Hope you can keep share a lot of helpful tutorial for another technology too.

regards, Yodi

Collapse
marinamosti profile image
Marina Mosti Author

Hey Yodi, thanks for your kind words. Its a pleasure to help out people and it was super fun to write! Follow me on twitter for other articles and what not :) @marinamosti

Collapse
jaymoh profile image
James Shisiah

Thank you Marina for your tutorial. As a beginner, it has helped me get the grasp on Vue.js.
Also, I tried out this bit and it worked just fine with v-model, without using the function return syntax:
data: {
favoriteGame: null,
response: ''
},

Thanks for the good work.

Collapse
marinamosti profile image
Marina Mosti Author

Hi James, thanks for your words. In components, you MUST use the function return syntax, else the state is going to get SHARED by all your components. If this is your MAIN component, App.vue, you can get away with using this syntax because you can guarantee there will only be one.

Collapse
jaymoh profile image
James Shisiah

You're very much welcome Marina, and thank you for clarifying this.

Collapse
rsmoke profile image
rsmokeUM

I have been dabbling with Vue.js for a few months now and this is the first tutorial series that really hit home with how all the basic bits dance with each other. I have recommended this series to my coworkers as a way to get started with putting "it all together"! Thanks a gazillion avocados for the time you took to put this together 🥑🥑🥑

Collapse
marinamosti profile image
Marina Mosti Author

Thanks a ton for your comment :) I had a lot of fun doing it and def this type of reply is a huge motivation!

Collapse
horrorofpartybeach profile image
Emma

Thanks for this series, Marina!

I've been away from Vue for a few months and am still relatively new to being a developer generally so this tutorial has been really helpful for me this week.

I'll look forward to other posts from you :)

Collapse
marinamosti profile image
Marina Mosti Author

Hey Emma :) Glad you found it helpful! Def keep an eye out, I usually post on twitter when something is out. Thanks for reading :D

Collapse
thobashangase profile image
Thoba Shangase

Many thanks for this series Marina. My laziness to learn Vue came to a stop when I came across your series. Your content is super-easy to understand and follow.

Collapse
marinamosti profile image
Marina Mosti Author

Thank you Thoba! Comments like these light up my day :)

Collapse
gabcee profile image
gabcee

Hey there! Amazing content. I'm just starting with Vue and being able to read this helped the process of understand more about Vue.

One question tho. I noticed that there was a Vue warn saying 'Error in callback for watcher "favoriteGame: TypeError: Cannot read property 'toLowerCase' of null', what does this mean?

Collapse
marinamosti profile image
Marina Mosti Author

It means that the variable that you are using toLowerCase on does not exist. Can't really tell without seeing the code though.
Glad you liked it!

Collapse
namstel profile image
Namstel

I feel like I have a good understanding of the fundamentals now. I liked how you split it all up in 7 parts with clear beginnings and endings, that somehow makes it easy for me to pick it up compared to when everything is wrapped in one article (somehow I then feel the need to finish it all in one go).

Looking forward to more of your teachings.

Collapse
marinamosti profile image
Marina Mosti Author

Thanks Namstel!!!

Collapse
lauragift21 profile image
Gift Egwuenu

Great job with this series Marina 🙌

Collapse
marinamosti profile image
Marina Mosti Author

Thank YOU for being an inspiration to teach!

Collapse
lauragift21 profile image
Gift Egwuenu

No Thank you :) ❤️❤️

Collapse
classicfruitsalad profile image
ClassicFruitSalad

Thanks a lot for this great intro to Vue.js – it really helped me get a grip on the basics. Not that keen on avocados mind – hopefully avocado appreciation isn’t a prerequisite for great Vue development. Cheers!

Collapse
jacjames24 profile image
jacjames24

Great series!

I have been trying to delve into vue and this series has really explained it really well. Funny thing is when there are times when I have been thinking such as why sometimes data (or any other concept) is declared as a function and then as an object, right there in in the next sentence, you actually have stated the difference and the reason! :D

All-in-all, good job!

Collapse
marinamosti profile image
Marina Mosti Author

Hello James, I'm glad you like it! Stay posted to my twitter for more articles coming soon, and check out my others on Progress' blog telerik.com/blogs/author/marina-mosti

Collapse
ipas profile image
iPAS • Edited

Thank you for the great series that make me has a happy beginning on Vue.js.

Just note in case you are waiting for a curious student.
I found warnning in the console while typing first letter in the input box.
It warned me because of oldValue.toLowerCase() so that oldValue=null.
Trus, for the first time, 'Sure, why not?' will not be shown by only one input character.

Collapse
marinamosti profile image
Marina Mosti Author

Hey iPAS! Thanks for your feedback and for reading!

Collapse
truptisatardekar profile image
Trupti Satardekar

Well, I'm a .Net Developer and wanted to learn Vue.js framework in my free time. I approached many video playlists, blogs however everything appeared vague and vast to dive in for this newbie swimmer.
Your blog then was a perfect pathway towards Vue js.
I really like the way you have put up simple explanations and given a rightful approach in learning the framework.
After following all the 7 parts of this tutorial I feel confident enough to dive deep in Vue.JS now.

Thankyou :)

Collapse
rodz profile image
Rodrigo Gomez

I get an exception the very first time this code runs since oldValue is null.

This is what I did to get it to not throw the exception:

if ((!oldValue || oldValue.toLowerCase().indexOf("metroid")!==-1) &&
newValue.toLowerCase().indexOf("metroid") ===-1
) {
this.response = "GET TO DA CHOPPA NAO";
return;
}

Collapse
lichadc profile image
Lisandro Dalla Costa

Extremely grateful for your fantastic explanations!!!

Collapse
marinamosti profile image
Marina Mosti Author

Extremely grateful for your comments :) Check out my other articles too in telerik.com/blogs/author/marina-mosti
Especially this one to answer your other comment regarding npm and the cli telerik.com/blogs/a-first-look-at-...

Collapse
johnmichaeljimenez profile image
John Jimenez

Thank you Marina for this awesome tutorial! It really helped me with learning Vue as an absolute beginner.

Collapse
gnovho profile image
gnovho

Tks a lot, this is a good article for beginer of vue :)))

Collapse
peaceman profile image
peaceman

Thanks for all the effort you made into writing this.. It was really clear and beginner friendly.

Collapse
marinamosti profile image
Marina Mosti Author

Hey Peaceman, thanks for reading! Glad you liked it

Collapse
lichadc profile image
Lisandro Dalla Costa

Maybe I feel that still need to know more of npm, and this things to use it in a real proyect!

Collapse
glpzzz profile image
Gabriel Alejandro López López

Thanks for the whole serie!

Collapse
johndavemanuel profile image
John Dave Manuel

Error in callback for watcher "favoriteGame": "TypeError: Cannot read property 'toLowerCase' of null"

I got this error while running

Collapse
cryptocatokioki profile image
CryptoCatOkiOki

Thanks Marina!
i really enjoyed going through you vuejs tutorial. +10

Collapse
rgehrsitz profile image
robertg

Thanks for a great introduction to Vue! It was at a pace and level that was perfect for me to use and understand.
Keep up the great work!

Collapse
marinamosti profile image
Marina Mosti Author

Thank you so much for your feedback Robert, im glad you enjoyed it :)

Collapse
rodz profile image
Rodrigo Gomez

Very nice explanation of v-model, two-way relation!

input<->model

Collapse
nbsamurai profile image
Subramani Simhachalam

I've read the complete Vuejs documentation about 4 months back but didn't get time to work on the concepts. Your tutorial series served as a prefect refresher. Thanks for writing this series.

Collapse
marinamosti profile image
Marina Mosti Author

Subramani thank you for your words, i'm glad you enjoyed it!

Collapse
robertleroy profile image
Rob

Error: Cannot read property 'toLowerCase' of null

it works with the error or changing favoriteGame: '',

Thanks for the series. Good stuff