Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theartifulprogrammer/vue-journey
Vue Journey
https://github.com/theartifulprogrammer/vue-journey
Last synced: about 1 month ago
JSON representation
Vue Journey
- Host: GitHub
- URL: https://github.com/theartifulprogrammer/vue-journey
- Owner: TheArtifulProgrammer
- Created: 2024-12-03T16:51:49.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-15T20:23:41.000Z (about 1 month ago)
- Last Synced: 2024-12-15T20:32:22.654Z (about 1 month ago)
- Language: CSS
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue.js Learning Reference
This document provides an overview of concepts and practical examples for the Vue.js Options API and Composition API. Use this as a reference for your learning progress.
---
## Options API Example
### JavaScript Section
```vue
export default {
data() {
return {
name: "John Smith",
status: "pending",
age: 30,
job: "Software Engineer",
link: "http://www.google.com",
tasks: [
{ id: 1, name: "Mbudzi" },
{ id: 2, name: "Cow" },
{ id: 3, name: "Dog" },
{ id: 4, name: "Cat" },
],
};
},
methods: {
toggle() {
this.status = this.status === "active" ? "pending" : "active";
},
},
};
```
### Template Section
```vue
{{ name }}
User is active
User is pending
User is inactive
Age: {{ age }}
Tasks
- {{ task.name }}
Click for Google
Change status
```
---
## Composition API Example
### JavaScript Section
```vue
import { ref, reactive, computed, watch, onMounted } from "vue";
const name = ref("John Smith");
const status = ref("active");
const age = ref(24);
const tasks = ref([
{ id: 1, name: "Mbudzi" },
{ id: 2, name: "Cow" },
{ id: 3, name: "Dog" },
{ id: 4, name: "Cat" },
]);
const newTask = ref("");
const toggle = () => {
status.value = status.value === "active" ? "pending" : "active";
};
const addTask = () => {
if (newTask.value.trim() !== "") {
tasks.value.push({
id: tasks.value.length + 1,
name: newTask.value.trim(),
});
newTask.value = "";
}
};
const deleteTask = (index) => {
tasks.value.splice(index, 1);
};
const totalTasks = computed(() => tasks.value.length);
watch(status, (newValue, oldValue) => {
console.log(`Status changed from ${oldValue} to ${newValue}`);
});
onMounted(async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos");
const data = await response.json();
tasks.value = data.map((task) => ({ id: task.id, name: task.title }));
} catch (error) {
console.log(error);
}
});
```
### Template Section
```vue
{{ name }}
User is active
User is pending
User is inactive
Age: {{ age }}
Total Tasks: {{ totalTasks }}
Add a task:
Tasks
-
{{ task.name }}
Delete
Change status
```
---
## Concepts Covered
### Options API
- **`data`**: Defines reactive state.
- **`methods`**: Holds functions that interact with the component's state or DOM.
- **Directives**: Includes `v-if`, `v-else-if`, `v-for`, `v-bind`, and `v-on`.
### Composition API
- **`ref`**: Creates a reactive reference.
- **`reactive`**: Provides a way to create a reactive object.
- **`computed`**: Derives computed values based on reactive state.
- **`watch`**: Reacts to changes in specific data properties.
- **`onMounted`**: Lifecycle hook for when the component is mounted.
### Reactive Methods
- Adding a new task with `addTask()`.
- Deleting a task with `deleteTask()`.
- Toggling the status with `toggle()`.
### Fetching Data
- Uses `fetch` API within `onMounted` to populate tasks dynamically.
### Additional Notes
- Use **`v-model`** for two-way data binding in forms.
- **Event Binding**: Simplified event binding syntax with `@` (e.g., `@click`, `@submit.prevent`).
### Advanced Features
- **Computed Properties**: Dynamically calculate values (e.g., `totalTasks`).
- **Watchers**: Monitor reactive data and perform side effects (e.g., logging changes to `status`).