Starting Vuejs as a beginner; Top concepts you need to know

Introduction

Vuejs has been a top choice for developers for reasons that it’s simple, lightweight , and easy to learn when compared to other libraries . Its files are organized as Single File Components (SFCs) that include template, scrip…


This content originally appeared on DEV Community and was authored by Pluri45

Introduction

Vuejs has been a top choice for developers for reasons that it's simple, lightweight , and easy to learn when compared to other libraries . Its files are organized as Single File Components (SFCs) that include template, script, and style sections. Vuejs is built to be flexible and capable of helping you build and scale your projects. In this article, you will learn some of the concepts you will come across while building with Vue.js.

Concepts

  1. Options and Composition Api

  2. APP

  3. On Mounted

  4. View Models

1 Options and Composition API

The Options and Composition API are different approaches to how you structure the logic of your Vue code. As the name implies, Options API organizes the logic of your code options. When you want to define new methods, you simply add it to the structure of the code, providing a new method (option) to be used in your code. The sample code below provides an example:

export default {

data() {

return {

name: 'john',

status: "pending",

tasks: ['Task one', 'Task Two', 'Task Three'],

link: 'https://google.com'

};

},

methods: {

toggleStatus() {

if (this.status === 'active') {

this.status = 'pending';

} else if (this.status === 'pending') {

this.status = 'inactive';

} else {

this.status = 'active';

}

}

}

};

In the options API, the reactive state is defined by data(You can name it whatever you want but keep it consistent ). The method returns an object, all these are within the export default component. By Exporting a component, you can make use of the method anywhere it is imported in your coding environment. If you wanted to write this same code as a composition api, you will do the following:


Compare the code to that of the composition API.



<script lang="ts" setup>

import { ref } from "vue";

import { RouterLink } from "vue-router";

import BounceLoader from 'vue-spinner/src/BounceLoader.vue';

import SingleNowPlaying from './singleNowPlaying.vue';



// Reactive state variables

const name = ref('john');

const status = ref('pending');

const tasks = ref(['Task one', 'Task Two', 'Task Three']);

const link = ref('https://google.com');



// Method for toggling status

const toggleStatus = () => {

if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {

status.value = 'inactive';
} else {

status.value = 'active';
}
};

</script>

The Composition API was written to appeal to React developers who want to use Vue. You will observe that the setup was defined along with the script.When you import the methods/ components you want to use, you can directly define your functions in your code without exporting them.

2. App.

The app loads all the files in your app, you can state the Navbar component and use to load up the rest of the files in your application.

<script setup lang="ts">
import {RouterView} from 'vue-router';
import Navbar from './components/navbar.vue';

</script>

<template>
    <div>
        <Navbar/>
        <RouterView/>
    </div>
</template>

3. On Mounted.

onMounted is a lifecycle hook that monitors when a component is ready for use(mounted). You will typically make use of the onMounted hook for Fetching data from an API.

onMounted(async () => {
try {
const response = await axiosClient.get('/movie/now_playing');
movies.value = response.data.results;
console.log(movies.value);
} catch (error) {
console.error('Error fetching movies:', error);
} finally {

isLoading.value = false;

}

});

4. View Models

V-model creates a two-way binding between a form input element like , and a data property in your component. This means that when the user changes the value of the input, the data property is updated instantly, and when the data property changes, the input's value is updated as well. Just like the code below:




<div class="mb-4">

<label class="block text-gray-700 font-bold mb-2"> Location </label>

<input

type="text"

id="location"

v-model="location"

name="location"

class="border rounded w-full py-2 px-3 mb-2"

placeholder="Company Location"

required

/>

</div>



<script>

import { ref } from 'vue';

export default {

setup() {

const location= ref('');

return {

location

};

}

}

</script>

Conclusion.

In this article, you learned about the fundamental principles of building with Vue.js, the Options and composition APIs being one of the most important amongst them. For more information about the vuejs framework, you can check out the official documentation here: documentation .


This content originally appeared on DEV Community and was authored by Pluri45


Print Share Comment Cite Upload Translate Updates
APA

Pluri45 | Sciencx (2024-08-21T21:42:36+00:00) Starting Vuejs as a beginner; Top concepts you need to know. Retrieved from https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/

MLA
" » Starting Vuejs as a beginner; Top concepts you need to know." Pluri45 | Sciencx - Wednesday August 21, 2024, https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/
HARVARD
Pluri45 | Sciencx Wednesday August 21, 2024 » Starting Vuejs as a beginner; Top concepts you need to know., viewed ,<https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/>
VANCOUVER
Pluri45 | Sciencx - » Starting Vuejs as a beginner; Top concepts you need to know. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/
CHICAGO
" » Starting Vuejs as a beginner; Top concepts you need to know." Pluri45 | Sciencx - Accessed . https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/
IEEE
" » Starting Vuejs as a beginner; Top concepts you need to know." Pluri45 | Sciencx [Online]. Available: https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/. [Accessed: ]
rf:citation
» Starting Vuejs as a beginner; Top concepts you need to know | Pluri45 | Sciencx | https://www.scien.cx/2024/08/21/starting-vuejs-as-a-beginner-top-concepts-you-need-to-know/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.