Vue JS 2 Tutorial #15 - Intro to Components

Hey ninjas, in this Vue JS tutorial I'll introduce you to the concept of components. Components allow us to create re-usable templates and functionality snippets within different sections of our website. This video serves just as a primer to components - because later in the series we'll be diving much deeper into them.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[kamaboko]

Did you hear that explosion? It was my mind. Great explanation.

[davideeko]

Dude... I'm new to Vue and ur lexture is literally amazing! I'm so happy that it's free for all of us :)

[doozle]

Lucid as ever. I'm building an app for microfinance, and another to help the homeless. You helped a lot. Cheers.

[claymachinemusic]

thank you, keep making good tutorial. i can't pay you any bucks but i don't skip any ads. thanks!!!!

[soyphea]

It was a great explanation. After watch this video I won’t confuse anymore of components. Subscribed

[lootster]

You explained way better than Google search!!! Who else agrees?

[androidz]

great explanation

can't wait next tutorial (single component)

[janbosenberg]

I like the clicking sound of your keyboard. Do you know what kind of switches it uses?

[georgesmith]

I don't understand why if a component returned a data object, this object would be shared by reference between all instances of the component. Shouldn't each instance of the component has its own instance of data object?

[justingolden]

So the data function is really more like an init function that gives you the initial data?

[LrCloud]

Wouldn't it be better to name your component 'greeting_vc' (vue component) so that it can't be mistaken for a tag (Makes your code easier to read)?

[caseyvandyke]

hmmm it didn't work. I'm getting the error property or method "changeName" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

[fokos]

You just got a new subscriber. Very good content and explanation, thank you!

[maxosall]

The component wouldn't be rendered, and I keep getting this error-msg in the console :["did you register the component correctly? for recursive components, make sure you provide the 'name' option "]
What do I missing

[michaelpaxman]

This code won't work now!
To make it work,
You need to change the ' ' around the <p></p> to ` ` (backticks) instead. This backtick is found above the tab button.


Should look like this:
Vue.component('greeting', { template:`<p>Hey there, I am a reusable component</p>`
});

[Otto]

I hope you go in details about single file components later on. Also would you add some videos about WebPack?

[ucbuiminh]

hello sir, may i ask that can the methods in Vue component being called outside in html file?

[hyperupcall]

Great video! May I ask which font you use?

[neerajyadav]

I used es6 arrow function in methods to create a custom function but am unable to access data variables e.g. this.name. Any suggestions on why this behaviour?

[MM-umsq]

can i use this tutorial for second version of vue?