Yep. I hope Vue includes it and plays it when creating a project.
@dopamine_Seeker3 жыл бұрын
😂😂😂
@speckyferns67802 жыл бұрын
yes, my favorite too. Kind of miss it when my @vue/cli does nothing :)
@FADHsquared3 жыл бұрын
38:25 - FYI people, the syntax is now stable, basically anything you write in is equivalent to writing anything in the setup() hook. And any top-level bindings (imports, variables, function declarations) are "automatically returned" so you don't have to worry about returning yourself anymore!
@oxk4r013 жыл бұрын
But has errors :( I got one saying there is no export default method...
@iUmerFarooq2 жыл бұрын
Hmm... Thank you for this amzing tip ;)
@sophiaonyoutube Жыл бұрын
thanks!
@amckee250 Жыл бұрын
Not sure what I love most about these tutorial videos, the concise, in depth explanations or the old timey song played when creating a Vue project :)
@maulik16443 жыл бұрын
The way you explain composition API is amazing 🔥🔥
@NetNinja3 жыл бұрын
Thanks a lot 😊
@pewolo3 жыл бұрын
You know what Shaun, you are the best web development teacher ever, all your words sink in like magic and you took me from zero to hero in Vue JS. There is no word that better describes how amazing you are. May God returns this kindness to you in thousand folds!
@NetNinja3 жыл бұрын
Thank you so much for the kind words 🙏
@avidonovan32223 жыл бұрын
I guess Im kinda off topic but does anyone know of a good place to stream new series online ?
@pangogeeks Жыл бұрын
This is such a CRUCIAL video to watch which will remove doubts about the concept of reactivity in Vue. Before watching it I couldn't get my head around why we use ref for something not related with DOM refs, why not reactive, why computed, etc. You answered all my doubts in one shot! Attashaun and thank you so much!!!
@94sl3 жыл бұрын
This is by far the best video and the most accessible way for me so far to move over from the options API to the new composition API. Thank you a million!
@NetNinja3 жыл бұрын
Thank you :). Glad you liked it!
@jackiechan57983 жыл бұрын
Great tutorials, i finished watching all your ads as a thank you
@aaravbatra49917 ай бұрын
Dear Shaun, In my carrer of 18 years I have never came accross a YT tutorial as good as yours. You have made learing Vue a cake walk. You are so much clear on what to demo and how to demo. Your contents are very very much structured and totally inline with what a begginer would like to know. I am going to watch all of your tutorials now. Kudos
@NetNinja7 ай бұрын
Glad it helped! :) thanks for watching and for your kind words!
@aaravbatra49917 ай бұрын
@@NetNinja lot of respect and love 😊. You are the best teacher
@shaikadnan21863 жыл бұрын
Your videos are great sir!! Quality learning stuff for free!! If I become a web developer in future, it would be totally because of you sir that too for free. Proud to be a NET NINJA
@LKBean3 жыл бұрын
Thank you soo much for these tutorials! They're clear, concise, easy to follow, and very informative. You, sir, are a wonderful person for making this
@Fryknowledge Жыл бұрын
your explainations are very understandable shaun. It helped me in cracking my first vue interview. Thanks shawn.
@NetNinja Жыл бұрын
That's awesome to hear :)
@Acuce7ibd468j Жыл бұрын
I watch the Ads till the end cuz ur content deserves to be supported ❤👍. I really appreciate doing more projects in SSR with vue
@NetNinja Жыл бұрын
Awesome, thank you for your support Mahmoud! :)
@defidelity2 жыл бұрын
You're really amazing, I recommend your channel to all newbies that I know. I've so far learnt Tailwind, CSS Grid and Vue JS from you. I'll just say you carried my whole frontend experience.
@흐음-u2n3 жыл бұрын
The best lecture i've ever seen. thank you
@lucapassani11292 жыл бұрын
Very nice. Thank you. I was not aware of the composition API and was stuck trying to make sense of a code example that used it. Now everything is clear.
@SohoCode Жыл бұрын
5:11 favorite part 😁
@hadisergan13 жыл бұрын
Muslim student of you, from Bangladesh sir [Thank you for your lessons].
@tompearson65403 жыл бұрын
Thanks for such a clear and detailed video Shaun, great help! Is there a VSCode extension you use to do the auto-import of 'ref' at around 13:30?
@akaandre35628 ай бұрын
Does anyone else find the loading music when he creates a vue app satisfying? hehe
@hipstersavage Жыл бұрын
One of the best teachers on the youtube
@kushranadaioi6853 жыл бұрын
nobody: net ninja: create couple of variables, let name = 'Mario' Gets me every time lol
@jeffgoes41162 жыл бұрын
Shaun, thank you for the video and as usual, great content quality! I was wondering what would happen under the hood if we used names.value.filter() directly instead of calling it as a callback of computed()
@sakalbhile2 жыл бұрын
Very detailed explanation 👍
@markusboden612710 ай бұрын
Me when the download music kicks in at 3 a.m 👯 - Thanks for these tutorials!!!
@NetNinja10 ай бұрын
Aha, You're very welcome! :)
@BullWinkleBull3 жыл бұрын
Best tutorial!!! Thank you!
@alielzahaby331510 ай бұрын
thanks man you're the one helped me after Allah preparing for my new project that I need to make in work 🙂❤
@NetNinja10 ай бұрын
Glad I could help :)
@dil-jay3 жыл бұрын
Thanks for this great tutorial
@pangogeeks Жыл бұрын
I just wanna add that WHY we use computed is to strip out from templates of some logic which could encumber them. It's better, in fact, to keep the logic and the modifications of our refs in the script rather than in the template
@izzatullokanoatov3703 жыл бұрын
Awesome explanation. Thank you, brother. Love the way you explain things.
@itsn723 жыл бұрын
amazing one Shaun ;)
@ibrahimhalilozhun33063 жыл бұрын
Hey Shaun, İ think you should have a MERN Stack course
@kbaker043 жыл бұрын
I don't get why in the template we can access and render the search value as just {{ search }} but in the computed filter we specifically have to access as search.value?
@hadisergan13 жыл бұрын
thank you sir
@Rivederchee2 жыл бұрын
BOOOT - I love your tutorials
@turalrzaxanov4373 Жыл бұрын
Thanks a lot of such awesome tutorials. God bless you!
@NetNinja Жыл бұрын
You're very welcome Tural!
@finishitoff10 ай бұрын
You got a new subscriber❤
@colinm31303 жыл бұрын
I am still having a hard time understanding what the advantage of using the setup() is over the older way with everything in its own function (computed(), methods(), etc. So far they seem like two different ways to handle things, but I have missed what the reason is to use one over the other. Could someone catch me up?
@esutana3 жыл бұрын
1. the new way can make the coding more organized (similar features groupped together) 2. low-level apis like watch, watchEffect can be used to make more advanced features
@yoduh992 жыл бұрын
"the older way with everything in its own function". except "everything" is usually split between those functions, e.g. created() hook initializes a data() object which is referenced by a computed() property which calls a function in methods()... meaning when you try to follow the logic of something you're constantly jumping around. compare to the composition API where all the logic for accomplishing something is all within the setup() method
@harryscarheadsam2 жыл бұрын
@@esutana The setup way is confusing for me. Besides, now there are two ways to use it! Also, watch can be used in options api as well!
@adante4073 жыл бұрын
I'm still a little undecided about Vue. Obviously there are less opportunities employment wise which is a determining factor in choosing between React, and Vue. But it also seems learning Vue makes you good at Vue. Whereas learning React makes you good at JavaScript?
@eyriusbacterius2 жыл бұрын
Yes i m undecided as well right now :D What did you choose?
@kennethcruz12342 жыл бұрын
I love you so much, sir the net ninja ♥
@runehansen31053 жыл бұрын
What number branch does the dojo-blog project start in the github repository? I can't find it? What Lesson number is it?
@ME-dg5np Жыл бұрын
Super lessons !! 👍☀️🌲 The best ! 👍☀️
@Dipenparmar122 жыл бұрын
Great tutorial as always. ( FYI: I couldn't find correct source code in mentioned github repo)
@fredpourlesintimes2 жыл бұрын
A lot of new features... Pfew! I'm questionning myself about using or not using the Composition API ; even if it seems interesting to use.
@usmanmughal59163 жыл бұрын
Waiting for next video
@ugurtigu3 жыл бұрын
Hey I've a question: can't you use the index of an element in an array as the key when iterating over them instead of the elements value itself? Because normally an array has not always unique values but the index should be unique?
@junchengdong3 жыл бұрын
Then how can you get the index of an element in a for-each loop? Unless you specify it in the data. For example, the "id" of the job does a similar thing since id = index + 1.
@ugurtigu3 жыл бұрын
@@junchengdong you can get the index from for-each arr.forEach(function callback(currentValue [, index [, array]]) { // Iterator }[, thisArg]);
@junchengdong3 жыл бұрын
@@ugurtigu I guess you cannot do such a thing in v-for, right? Because you are not really passing in an array to the tag every time.
@ugurtigu3 жыл бұрын
@@junchengdong technically you can do {{ parentMessage }} - {{ index }} - {{ item.message }} but in this example it's a ref dunnow how you can do it then. M question though was general because I saw that often in the series that the person who made the video used not an index but the element
@junchengdong3 жыл бұрын
@@ugurtigu okay, I see. Maybe for simplicity cuz it's just a tutorial video?
@jithind-feverx28183 жыл бұрын
Ur awesome ❤️❤️🔥🔥
@marcscherzer Жыл бұрын
37:19 If you have a mix of capital letters and small letters in names, you can convert names and search keyword to lowercase, like : const names = ref(['Mario', 'Yoshi', 'Luigi', 'Toad', 'Bowser', 'Koopa', 'Peach']); const matchingNames = computed(() => { return names.value.filter(name => name.toLowerCase().includes(search.value.toLowerCase())); }); I believe there are more effective ways to do this, but this is one of the simplest way to accomplish it imo. Feel free to share yours :)
@Defense892 жыл бұрын
wow nice course was pretty clear liked it... only one thing id like to ask i did'nt understand how come calling the function stop watching does stop watching since in the function it is watching?
@almostrandomnickname Жыл бұрын
great explanation.
@NetNinja Жыл бұрын
Thanks Agustin!
@handsomeman50982 жыл бұрын
I like your style. how you teach.
@martinfinch5011 Жыл бұрын
Great video as always
@NetNinja Жыл бұрын
Thanks Martin!
@derekbressler91543 жыл бұрын
vue is the best!
@hassaniqbal61993 жыл бұрын
agree
@derekbressler91543 жыл бұрын
agree
@mod7ex_fx3 жыл бұрын
thank you so much i loved your explaination , the best course out there
@NetNinja3 жыл бұрын
Thanks so much :)
@ridl273 жыл бұрын
w/ knowledge of React - vue is EZ :D
@raj.blazers Жыл бұрын
Hey Shaun, Is Vue class component with Vue property decorator is different from composition api? Which approach is best?
@TigranKuchatyan2 жыл бұрын
Great tutorial. I just wonder why initial matchingNames array should include any name, when search is empty. Anybody can help me with that? Thanks!
@aristideirie95742 жыл бұрын
You are amazing, thank you so much
@NetNinja2 жыл бұрын
Thanks Aristide!
@afrazahmadkhokhar2 жыл бұрын
Million likes 👍
@raziyehjed3622 жыл бұрын
hi, I have a question, about whatEffect function when we create a function to stop the watchEfect actually it does not work because watchEffect runs when the component loads and when we push the button in order to stop it, after refreshing the page watchEfect still works, so we can not stop that unless saving in localhost, am I wrong?
@shubhang28773 жыл бұрын
Can you make an updated Redux tutorial? Or do you think its dead and no-one is gonna use it?
@NetNinja3 жыл бұрын
I don't think it's dead, but I don't think it's crying out for another tutorial. I will be doing an up-to-date React series very soon though. And will probably cover alternatives soon too.
@shubhang28773 жыл бұрын
Omg yessss. I watched both your react serieses(is that a word) and I cant wait for more :D
@noushedakib16582 жыл бұрын
just awesome
@ccindy9513579 ай бұрын
謝謝!
@NetNinja9 ай бұрын
Thanks for your support :) it means a lot!!
@frizzipazzi36006 ай бұрын
44:30 can't i just update the reactive() nameTwo using "this.nameTwo = "Luigi" ?
@frizzipazzi36006 ай бұрын
because it seems to work to me but im not sure if there are negative sides i can't see
@thecscontent51103 жыл бұрын
I also do videos about programming!😁
@paalaleksander2 жыл бұрын
There's no nonsense with you.. There is a few web dev teachers on youtube that knows what they talk about, but I get soooo distracted by the jokes, haircuts and stuff they come up with.
@heshanwijerathna3 жыл бұрын
First commet
@_isaac_muniz_2 жыл бұрын
Wtf we can't use primitive values with reactive... what a flaw in the framework :(
@user-kk4es3li1p2 жыл бұрын
That's why we use ref 🤷
@AlexTheGreatish3 жыл бұрын
I only watch these videos for the classical music 🎵
@parazol1232 жыл бұрын
I am using Vue for about 3 years but the Composition API is a joke. Good old Options API.
@reinoutko Жыл бұрын
I dont really see the advantages this has over options, it seems to me its innovating for the sake of innovating
@Ronny-iv6kn2 жыл бұрын
Sorry, but i want a whole playlist about 1 project
@pyplacca3 жыл бұрын
React devs learning/transitioning to Vue would really appreciate the Composition API over the Options API
@thelolladorfking24163 жыл бұрын
Once I get my job, I'm sure I'll donate you. Thank you so much sir.
@sayemarg3 жыл бұрын
With watch(variable, (newValue, oldValue) => { }) We Can Use Variables Old And New Value On Changing In watch Function And I Think It Is More Useful Than watchEffect In Some Uses 🤔
@anandathawale6093 жыл бұрын
Hey net ninga can I buy your merchandise form india
@lukasluftlaufer10933 жыл бұрын
mind = blown!
@nguyenhuunguyeny61153 жыл бұрын
learn any framework that you don't teach, I won't 👍👍👍
@SkipThorp3 жыл бұрын
when I was 16 back in 1985, I had a car that had license plates with NINJA-1 on them.
@svilen0013 жыл бұрын
too bad its not possible to find the code for exactly this lesson but the content is amazing and probably worth buying the full course on udemy
@tomu_sange Жыл бұрын
Why is the course price keep going high. Yesterday it was 13 but today it is 16 what is happening
@Coronerlex Жыл бұрын
I am struggling to understand the section from 16:09 to 18:18. We can't access p.value because it hasn't yet been returned? Why wasn't p returned? The setup() returns name, age, handleClick, and p. It must have returned name, age, and handleClick on page load otherwise the element wouldn't have the values for name and age initially...So then why hasn't "p" been returned at that point? Why is it not returned until handleClick is clicked?
@derekbressler91543 жыл бұрын
vue is the best
@owadefelix64763 жыл бұрын
You have a nice and easy way of explaining things , kudos
@bunyaminmercan50772 жыл бұрын
Can you teach us how to make videos, your desktop setup etc.
@Youssefchibi6 ай бұрын
I don't understand why we use Computed , why not just function .
@lalaland1234-s5iАй бұрын
I think because normal functions are not reactive. You can think "computed" as "ref" function.
@ridl273 жыл бұрын
ty.
@bekchanovbotir24743 жыл бұрын
subtitles?
@jsnmad2 жыл бұрын
After this video, I still don't understand the case for the Composition API. I rather stick with Options API. Sometimes, we are learning new things to make no progress. So, the learning gives a net value of zero.
@reinoutko Жыл бұрын
I agree
@adjiKurniaPutra2 жыл бұрын
thankssss
@WorldRankMoba2 жыл бұрын
Thanks
@DanielKaye0 Жыл бұрын
For future reference, I believe Mario is older than Luigi 🍄😁
@NetNinja Жыл бұрын
I’ll take your word for it 😁
@beaugareldimi8150 Жыл бұрын
Can you do a formation vuejs but with Graphql API ? Please 🥺🥺🥺
@maskman48213 жыл бұрын
This video is extracted from Shaun's Udemy course ~ www.udemy.com/course/build-web-apps-with-vuejs-firebase/ whick currently I am taking, it is a fabulous course, I have learned a lot, Master Ninja rocks !!!
@runehansen31053 жыл бұрын
What number branch does the dojo-blog project start in the github repository? I can't find it? What Lesson number is it?
@okpain8324 Жыл бұрын
You are such a Goood Teacher Thanks words its not enought for thanking u . much love
@RyazantsevNikolay2 жыл бұрын
Wonderful tutorial. Very clear and concise, way better then original Vue ones. Thanks!!!
@ricklove83582 жыл бұрын
u just made composition api sound like a sweet thing to me. 😊
@69leostereo2 жыл бұрын
awesme material ... please keepme in the loop.
@regolyth2 жыл бұрын
Thank you, very useful
@davidadewumi81162 жыл бұрын
Thanks for this wonderful tutorial.. you're a lifesaver.. Quick question: Instead of writing: Const foo = ref('mario') And then updating the value with "foo.value" Why not just declare it as: Const foo = ref('mario').value And then you can just update it like you would a normal dynamic value