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
Options and Composition Api
APP
On Mounted
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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.