VueJs for Beginner VueJs Part Create, Import, and Use Component

Creating your first component

---

What is a Component?
Components are the building blocks of a Vue application. Each component has its own functionality and view, Components can be reused throughout the application. One example of a component is a navbar that can be accessed on different pages.

Creating a Basic Component

• Create a new component file called HelloWorld.vue (you can change the file name if you want) in the components folder (create a new components folder if it doesn't already exist).

• HelloWorld component:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

• import and use HelloWord component in App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

Now you should be able to see the HelloWorld component rendered in the App.vue component.

The above is the detailed content of VueJs for Beginner VueJs Part Create, Import, and Use Component. For more information, please follow other related articles on the PHP Chinese website!