VUE3 JS Basic Concepts For Beginners:Part 1

In this very basic tutorial, I will be taking you through all the concepts of vue3 js.

1. Basic Layout of a Vue3 Component

<template>

</template>

<script>

</script>

<style>

</style>

Code Explanations

From the above code, you will notice we have three sections:

• Inside Template Tags, that is where you put all your HTML.
• Within the script tags, you add all your javascript related to your application.
• Inside style tag is where all your CSS goes.

2. Basic Layout of Script

const app=Vue.createApp({
data() {
return {
product:"Vue 3 carousel",
imageUrl:"https://image.com/image/computer",
imageDescription:"An image with a Desktop"

}
}
}).mount('#app')

Code Explanations

Looking at the code above, you will notice that will have introduced a data function that returns an object.

• It is in that data function that you will put all the data you need for your application.

3. Basic Layout of Style

<style scoped>

<style>

For styles, we use scoped to tell javascript to limit all these styles to tags related to that particular component in which style is part.

4. Interpolation

What do we mean by interpolation? Well, this is basically how you tell Vue to inject or insert your data into your Vue HTML.

<template>
<h4>{{title}}</h4>
</template>

If you have a property or prop called title, Vue will automatically replace the interpolation with the corresponding prop or item in your data.

5. Data Binding

<image v-bind:src="picture" v-bind:alt="firstname"

or Better still

<img :src="picture" :alt="firstname" />

This is how your data function will look like in this case

data() {
return {
picture:'http://image/pictr/12/12',
firstName:"Boratechlife"
}
}

6. Basic Example of Vue Component

<template>
<header>
<h1>{{title}}</h1>
<h2>{{text}}</h2>
<img :src="logo" :alt="firstname" />
</header>
</template>

<script>
export default {
props: {
title:String
},
data() {
return {
text:"This example text",
logo:"https://example.com/image"
}
}
}
</script>

<style scoped>
header {
width:100%,
bakcground:#000;
}
<style>

The above example covers everything we have learned so far from

• interpolation.
• Props.
• Data.
• Style.
• binding.

That way, you can relate and understand where to correctly place each of them. It demonstrates how a typical component looks like.

7. Importing Vue Component

At the very top of the file, use import statement to import your components. Assuming you created it inside the Components Folder, we can take a look at this example

import Header from './Components/Header'

Notice we have given a name Header, It does not really matter what you call it but notes that the name must appropriately describe the file. In this case, Header makes more sense to me.

8. Registering Vue Component

Before we finally make use of our component we will need to register. How do we do that? Watch this!

<script>
export default {
import Header  from './Components/Header.vue'
data() {
//put the data here
},
components: {
Header,
}
}
</script>

As you might have guessed, the components object inside the export object does the registration I was telling you about. It's that simple.

9. Using Vue Component

Using Vue Component is like, Writing any HTML tag.

<Header></Header>

10. Passing Props to Vue Component

<Header title="This is prop title"></Header>

11. Class Binding as Attribute

To bind classes as attributes, you first declare your classes in a data function and use the v-bind directive. It normally comes in handy when you want to render styles dynamically.

<div :class="gender"></div>

This is how your data look like:

data() {
return {
gender: "text-red-500 text-white"
}

}

12. Listening to Events

<button v-on:click="getUser">Click</button>

The example above tells Vue to execute getUser when clicked. I know you are wondering where the hell is that function written. Don't sweat it. I will show you in a moment.

13. Methods

Now, the methods object is where you put all the functions in a Vue component.

export default {
data: {
//put data here
},
components: {
//register components here
},
methods: {
getUser(){
//do some stuff here
}
}
}

14. Two ways of Receiving Props

When receiving PROPS, there are two ways to do it

• First

  props:['title', 'text']
  

• Second

  props:{
  title:String,
  text:String
  }
  

  As you might have noticed already, the difference between the two ways is that while the second explicitly defines the type of prop it expects to receive, the first just does not care at all.

15. Binding Styles

<button v-bind:style="{ background:color }"></button>

Binding styles in Vue involves passing an object to a style tag while using the v-bind directive

16. Using v-for directive

<div v-for="task in tasks" v-bind:key="task.id">
<h3>{{task.text}}</h3>
</div>

There are two things you will need to know here:

• task in tasks. This is similar to telling Vue that for each item in the tasks array, assign it to the task variable. From there you can access the contents of each array items via task
• key- This is important for Vue to uniquely track each element within that loop.

17. CDN Files

If you have external CDN files, you can always put them in the index.html file inside the public folder.

18. Conditional Class Rendering

If you intend to render classes based on the state of some data, then conditional rendering is what you would go for. Take a look at this!

<div :class="[open? 'bg-green-500 text-white' : ' ', 'other classes you might want to add']">

</div>

Here we are binding a class attribute to an array. The array takes two arguments. The first one is the expression telling Vue to add bg-green-500 text-white only when open is true otherwise add nothing. The second argument involves the rest of the classes you want the element to have. These are not conditionally rendered.

19. Emitting an Event

To emit an event, you will make use of $emit() function. This is how you will do it.

<button v-on:click="$emit('event-emited', id)" >Click me</button>

or

this->emit('event-emitted',id)

The second argument is normally the data you want to pass along with the event it can be object, array, or pretty much anything. For this particular example I used id but that is just for demonstration don't worry.

Remember, passing parameters is optional. Nobody will beat you if you don't use it.

20. Listening to an Event

Just like listening to native events such as click, you can equally listen to custom events in Vue in the same manner.

<Task v-on:event-emitted="whatDidItSay()" />

In the example above whatDidItSay() function executes every time event-emitted event is fired.

21. emits Option

Now, sometimes you will be passing events up from one component all the way to the root component. In such as scenario, One component will be listening to an event and passing it up by firing the same event. That component must therefore declare emits option. This is basically an array of events that are being re-fired from the current component up to the parent Component.

export default {
name:"Header",
data:()  {
return {
//data goes here
}

},
methods: {
//all the methods goes here
},
emits:['event-emitted', 'other-event', 'another-one']
}