Vue JS 2 Tutorial #22 - Props

Подписаться 1,5 млн

Просмотров 152 тыс.

50% 1

Hey all, in this Vue JS 2 tutorial I'll introduce you to props - a ways to pass data from one component to another (parent to child).
----- COURSE LINKS:
+ Repo - github.com/iamshaunjp/vuejs-p...
+ Atom editor - atom.io/a
+ Download GIT - git-scm.com/
+ Vue docs - vuejs.org/v2/guide/
---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress, Node.js & more on the channel homepage...
SUBSCRIBE TO CHANNEL - / @netninja
========== PSD to WordPress Playlist ==========
• PSD to WordPress Tutorial
============ Node.js for Beginners Playlist =============
• Node JS Tutorial for B...
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
================== Social Links ==================
Twitter - @TheNetNinja - / thenetninjauk

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@bob93219 Год назад

Thanks for taking the time to explain the "why" and not just the "what" it really helps :)

@elanosilveira2131 7 лет назад

Thanks my friend! Please, don't stop uploading new videos. You're the best teach on earth. Keep up the good work!

@truth656 7 лет назад

This is by far the best tutorial I have come across for the explanation of props.

@pseudop6037 6 лет назад

after watching some premium tuts, i have to say you explain it better. props to you ninja.

@arminb6896 5 лет назад

2:30 best example explanation I encountered on the web

@NetNinja 5 лет назад

Thanks :)

@LorenzoBeltrame 6 лет назад

I loved to imagine parent component passing down a broom to child to scoop up smashed props not properly received, great tutorial series, down to earth and a pleasure to follow, you got one more happy subscriber!

@tarekmustafa2525 6 лет назад

Watching this video helped me to a lot in cutting out a lot of repeated code I put in the child elements. Now I have all methods in the parents and access what I need in the child components with props. Great Video!

@sebinsong5236 7 лет назад

I think you are the best tutor for web development on RU-vid. Thanks dude! :)

@_m1mosa 6 лет назад

I appreciate your style of teaching. I gained a lot more confidence in vue watching your videos! thanks!

@samerfk 4 года назад

Wow! It has been a while since I watched such a great quality video like that. Amazing job!!

@haurlim1804 3 года назад

I've subscribed to your channel. Every of your tutorial is easy to understand and it only takes me a few minutes to learn. Keep up the good work 😄

@sidneysousa3520 6 лет назад

Hey Ninja..Loving each video and it seems like I will spend the night on my desk until I finish all the videos.

@renatobesson 4 года назад

A pretty straight forward explanation. I finally understood props. Thanks!

@jaleelsayal1175 4 года назад

Thank you so much I was struggling with the concept of the props and I was stuck on something for about 14 hours and I just fixed it. Keep on sharing amazing stuff, you added one more ninja in your army today @The Net Ninja

@aaronalvarez2895 5 лет назад

Legit followed all from Lec 1 to 22 and LMAO. This saved my Final Grade. i was able to turn it in with ez. Thanks BRO! Dont stop doing vids. This is really helpful!!!!!

@NetNinja 5 лет назад

Awesome!!

@MahmoudAhmed-nd1hv 6 лет назад

What a tutorial, this is the first time I subscribe to a channel, really I can't thank you enough for your efforts, keep it up

@NetNinja 6 лет назад

Thanks so much. Glad you liked 😀

@graceli5515 5 лет назад

The best Vue tutorial so far. Thank you so much!

@Lelouchh100 6 лет назад

this is the best explanation for props.. thanks alot man.

@franzkaiser6705 6 месяцев назад

Wish I had watched that video earlier. Well explained in just under 8 minutes. Thanks mate!

@NetNinja 6 месяцев назад

No probs. Glad it helped! :)

@murat6018 2 года назад

Always the best explanation ! Thanks Shaun! Thanks!

@ZhengCheng 6 лет назад

Thank you! great vue tutorial!

@user-mu8xm5hf8h 3 года назад

Man, this is really great video. Even an alien can understand how to use Vue. Thx for your video! It helps me a lot :)

@MinhLe-xk5rm 5 лет назад

Thanks so much for the tutorial!

@MarcoChavez1940 5 лет назад

Many thanks for your explication, its was so easy understood with that example :)

@utkarshsinghthakur5554 5 лет назад

Thank you so much for the tutorial!

@adam192021 5 лет назад

The BEST as always!

@bichkhebk 5 лет назад

amazing tutorial, very brilliant

@brunosousa3057 4 года назад

Thanks once again Net Ninja!

@uzzal74 4 года назад

best tutorials thanks really helpful

@SmokinMesa 6 лет назад

Wicked thanks man 👍

@infinitivegamer6899 4 года назад

And hey! That keyboard sound feels amazing!!! I'm following up greatly with your tutorials but I'm missing that keyboard man!!!!!

@shanakagamage2327 5 лет назад

Thank you bro

@onecarwood 7 лет назад

In my app I see a screen that shows an error. I do not see the rendering of the app at all so I can inspect it in chrome dev tools. I believe I am running live reload like you have. What did I do different I am using Visual Studio Code.

@delphinelisabeth 5 лет назад

so helpful !

@randaelkhashen1631 5 лет назад

Guess what! I like your videos before I start to watch it :) I like your way in teaching, Thank you so much keep going

@NetNinja 5 лет назад

Thanks so much :) means a lot!

@wahhajs 7 лет назад

Nice video

@aimiliosdiakakis2932 6 лет назад

amazing!

@danielgabe8501 6 лет назад

Thankyou so much.

@MicMastaBlasta 6 лет назад

Thank you!

@JohnSmith-zl8rz 4 года назад

Too FASSSST!!!! take it easy!

@parashuramhosmani1581 3 года назад

Amazing tutorial 👍👍

@NetNinja 3 года назад

Thank you 👍

@kevinlee4412 4 года назад

Thanks a lot.

@rahulpanda2464 3 года назад

Great!

@diethermarcelo3467 3 года назад

May I ask why is there still a panel for each ninja if the ninja data is not being passed down to the ninja component?

@Dan_Web_Dev 4 года назад

Thank you ninja master

@dominicfernandes3806 5 лет назад

One of the best explanation ever. However i am watching these tutorials in 2019, i just wanted to know if there have been any major changes in the framework that i should probably cover up.

@ShubhamSharma-nn3ly 5 лет назад

Yes there have been some changes in the latest version of vuejs you should refer the docs also along with taking reference from these videos

@DrNabeel20 4 года назад

You are amazing 🔥🔥🔥 Could you please do Electron tutorial ♥️

@PPadz 7 лет назад

When using props, does the data need to be located in the root vue file? Noticed you moved the ninja array to the app.vue file.

@alenngk 7 лет назад

I think that passing the other way - child to child, you need vuex.

@sarathbaiju6040 2 года назад

I passed an object as a props to child component and i assigned the prop value to a data property in child component. Now the behaviour is when any change happen to that props in parent it will not updating the child component data property. But if any change happen to child component data property it is updating the parent component props value. I am confused now, in vue official documentation says data flow is one way that is from parent to child.. but it is ok for the initial time.. but after any change on the parent component props it is not updating the child.. could you help me..to understand the exact behaviour?

@RandomAlexus 2 года назад

Thanks!

@NetNinja 2 года назад

Thanks for the support Alexus! :)

@dgtlmoon 6 лет назад

When the data changes, (perhaps by AJAX etc), since the child-component is only rendered at created():, what's the correct way to trigger an event (for example, display change of the data) in the child component, when the 'propped' data from the parent changes?

@NetNinja 6 лет назад

Hey, you could use either the 'beforeUpdate' or 'updated' lifecycle hook to run any code when a component data (e.g. props) changes. Take a look at this diagram of the component lifecycle for more info: vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

@joshjingo 2 года назад

l like your props

@peristiloperis7789 5 лет назад

Vue's documentation states that all I need to learn Vue is some knowledge of javascript, html and css. However, in almost every tutorial I watch I see things like 'export / import', 'cli', 'npm', 'node.js' and a bunch of new things I have no idea how they work! It seems it's impossible to learn a new technology without learning all those things at the same time! Man, I miss the time when all we need to do was to go to thenewboston chanell and watch a simple and straight to the point video containing nothing but the subject you are interested in.

@pavindulakshan9655 5 лет назад

nice tutorial..When you are passing an array/object as props, place : before prop name, Eg:

@bettermakeanote 5 лет назад

does this work with shinobis?

@TheCodebookInc 6 лет назад

Sir we want tutorials on nuxt and vuetify

@flifluflofli 4 года назад

I got lost with the story of testing if it is an array and requiered .. cause not used to dev situation ;) but for the rest i got it all fine :) thanks

@samchen7703 6 лет назад

We want vux tutorial

@seanlangley7467 6 лет назад

How do I store data for share it between other components from the store.js (from my axios response), if I do wrong, how do I need to do it correctly? for example, I have this code in store.js, how do I get data from response? What do I need to do? here is my piece of code: repl.it/repls/FrizzyStarryCassowary

@AryaInk 6 лет назад

How the life was boring before youtube.

@michiokaku101 6 лет назад

oh man too many ninjas apps, objects, properties and arguments. use more words, cos i am dizzy with all those names that are the same....nevertheless the tutorial is wicked! prefer an english speaking person than an indian etc