Section 2 Vue components

--> Vue components
What are Vue Components?

One important feature of Vue is the ability to use components. Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.


--> Vue components
Create Vue Component

1.Inside  src/components directory, create a new file named Home .vue. Open the file in your editor.
2.Create a component template tab by adding <template> </template> at the top of the file.
  1. <template> Your template can contain any valid HTML tag, as well as some specific Vue syntax.
3.Create a <script> </script> tab below the template tab. Inside the <script> tags, add the exported default {}, which is your component.
  1. The <script> section contains all the logic of your component. Most importantly, your <script> tag must have at least one exported JS object by default. This object is the place where you can locate components locally, define component inputs (props), process a state locally, define methods.


--> Vue components
Template and Script

Define tag  <template> </template> and add the following tag <h2>This is my Home page </h2>.
Next, lest add name for our component inside of <script></script>:

1. exported default {
2.    name: 'Home'
3. }


--> Vue components
Import and Use Component

To be able to use this component we need to import it.
Open App.vue file and add this line of code inside of <script></script> tag:
import Home from ‘./components/Home.vue’;
Inside export default {} we need to add component name.

1. export default {
2.    name: 'App',
3.    components: {
4.       HelloWorld,
5.    Home
6.    }
7. }


--> Vue components
Add Style
To add style (css) to our component we need to use the tag <style></style>.

Lets change the color of our h2 tag that we add previously.

Inside of our tag <style></style> add the following lines:

1. <style>
2.     h2 {
3.         color:  yellow;
4.     }
5. </style>