Making a component

There are three parts of a Vue Component/Page:

• Template - Holds Holds HTML that is reactive. In other words, Vue let’s you use syntatic sugar to add conditional rendering, variables, and other logic to your HTML.
• Script - Different hooks and ways to create JavaScript logic using methods, data (and state), and lifecycle methods to program logic for rendering your page.
• Style - Where you create CSS. If the word “scoped” is added to the styles tag the styles will only apply to the HTML in the template in the current component.

Vue takes this code and compiles it down into JavaScript code. Don't worry if you don't understand every part of this code, we will cover everything in this article and other Vue Fundamental sections:

//****** Template<template>    <h1>Title</h1>    //when the user clicks, this calls the method "logToConsole"    <p @click="logToConsole">Click Me</p>    //Input reference to the userInput variable    <input ref="userInput"></template>//****** Script<script setup>    import { ref, onMounted } from 'vue'    //The ref attribute is used to make the variable reactive    //and to get a reference to the variable    const userInput = ref("")    //The method called in the template via @click    const logToConsole = () => {        console.log(username.value)    }    //Lifecycle method called when mounted    onMounted(() => {        console.log('mounted!')    })</script>//****** Styles<style scoped>    /*Styles local to template on this file*/</style>

A Quick Review of Template

To add variables to your HTML, you can use text interpolation. This allows you to use mustache syntax to change text output.

<template>    <span> Hello {{ textVariable }} </span></template>

The word “textVariable” is now capable of printing whatever the value inside it is.

Binding Variables to Template

Binding allows you to add reactive variables to your HTML. Reactive variables, when changed, trigger a rerender of your component/page.

To accomplish this, use v-bind (or its shorthand):

//v-bind<div v-bind:id="dynamicId"> </div>//short hand for v-bind<div :id="dynamicId"> </div>

The id "dynamicId" is a variable that can be changed within the script area (which we will talk about soon). In this example, when dynamicID's value is changed, so will the value inside the template where dynamicId is called. This allows us to change the id to whatever id we have in our styles css.

This is pretty similar to the main documentation. Here are some extra examples to give you an idea of what you can do with template logic:

<div :style=”{ backgroundImage: ImageVariable }”> </div>

We can store a path to an image and then add it to a div's background.

Or you can use template literals:

<div :style="isChecking ? 'backgroundColor: red': 'backgroundColor: green'"> </div>

The Script Area

There are many important functions of the script area. To name a few:

• Give your component a name
• Store data
• Create methods
• Instantiate other components
• Pass or Receive Props
• And more!

That's alot to go over! You may not understand all of it, but just look it over to get a "feel" for how Vue works. All the details will be explained in other sections.

<template>    <h1>Title</h1>    <p @click="logToConsole" >Click Me</p>    //Instantiating components    <ComponentName1 />    //This component is passed a prop    <ComponentName2 :details="details" /></template><script setup>    //Import the ref attribute from Vue    import { ref } from 'vue'    //Import components that were already created    //Usually stored in "/components" folder    import componentName1 from "/folder/path"    import componentName2 from "/folder/path"    //Instantiate 2 reactive variables    const username = ref("John")    const details = ref("Great Worker")    //Creating a method    const logToConsole = () => {        //To access a "ref" variable, use .value        console.log(username.value)    }</script>

The Style Area

To target specific elements in your template you can add classes or even call the elements themselves. In both cases, the CSS only affects HTML tags in this template/file.

<style scoped>    /*If an h1 exists on another component currently rendered,*/    /*this style would stay local to this component*/    h1 {        font-size: 5em;    }    .paragraph {        background-color: green;    }</style>

That is all three areas of a component in Vue. The template, script, and styles area. The concepts for each part will be gone over in more detail in the further sections. At this point, you should have a basic understanding of how a simple application looks!