Komponenten

Aufbau einer Komponente

Output <template></template>
Funktionalität <script></script>
Style <style></style>

Single File Component

Base-Komponenten

letzte Stufe mit <HTML>

Komponente einbinden (3 Ebenen)

app.vue

<template>

<TodoList />

<script>

import TodoList from "./components/TodoList";

export default {
  data: () => ({
  )},
  components: {
    TodoList,
  },
};

./components/TodoList.vue

<template>

<template>
  <ul>
    <TodoListItem v-for="todo in todos" :key="todo.id" :item="todo" />
  </ul>
</template>

<script>

import TodoListItem from "./TodoListItem";

export default {
  name: "TodoList",
  data: () => ({
    todos: [
      { id: 1, finished: false, name: "Vue.js lernen" },
      { id: 2, finished: false, name: "Code Beispiel üben" },
      { id: 3, finished: false, name: "Git commit" },
      { id: 4, finished: true, name: "weiteres Todo" },
    ],
  }),


  components: {
    TodoListItem,
  },
};

./components/TodoListItem.vue

<template>

<template>
  <li :class="{ finishedTask: item.finished }">
    <input type="checkbox" v-bind:checked="item.finished" />
    <a v-bind:href="'?id=' + item.id">zeigen</a>
    {{ item.name }}
  </li>
</template>

<script>

<script>
export default {
  name: "TodoListItem",
  data: () => ({
    todos: [
      { id: 1, finished: false, name: "Vue.js lernen" },
      { id: 2, finished: false, name: "Code Beispiel üben" },
      { id: 3, finished: false, name: "Git commit" },
      { id: 4, finished: true, name: "weiteres Todo" },
    ],
  }),
  props: ["item"],
};
</script>