vue3学習記録

アウトプット用

vue3

チュートリアル：https://ja.vuejs.org/tutorial/

v-bind

idなど、属性に動的な値を入れたいときに使用

v-on

clickイベント等、イベントリスナーを要素に追加したいときに使用

v-model

v-bindとv-onを同期する
フォームなどでよく使う
https://ja.vuejs.org/guide/essentials/forms.html

v-if

条件分岐レンダリング
v-if,v-elseを使ってレンダリングするDOMを分けることができる
https://ja.vuejs.org/guide/essentials/conditional.html

v-for

for文

コード

<script>
// give each todo a unique id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

computed

コード

<script>
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: {
    filteredTodos() {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

ライフサイクルとテンプレート参照

DOMを手動で操作する必要がある時に使う
mounted(){} を使うことで、コンポーネントがマウントされた後に処理を実行できる
※コンポーネントが画面にレンダリングされることをマウントという
※mounted以外のフック：https://ja.vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks

ウォッチャー

特定のプロパティが変更された時に処理を起こす

コード

<script>
export default {
  data() {
    return {
      todoId: 1,
      todoData: null
    }
  },
  methods: {
    async fetchData() {
      this.todoData = null
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
      )
      this.todoData = await res.json()
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    todoId() {
     this.fetchData()     
    }
  }
}
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

コンポーネント

子コンポーネントを使用する（ほかのコンポーネントをvueファイル内で使用する）方法
import文を記載
components:{}を追記、{}内に子コンポーネントの名前を記載

コード

<script>
import ChildComp from './ChildComp.vue'
export default {
  // register child component
  components: {
    ChildComp
  }
}
</script>

<template>
  <!-- render child component -->
  <ChildComp />
</template>

プロパティ

子コンポーネントは親コンポーネントからプロパティを介して値を得ることができる。
子コンポーネント内で受け取る値を定義する（props:{}で定義できる）

コード

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      greeting: 'Hello from parent'
    }
  }
}
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

イベントの発行

子コンポーネントはイベントも作成することができる

コード

<script>
export default {
  emits: ['response'],
  created() {
    this.$emit('response', 'hello from child')
  }
}
</script>

<template>
  <h2>Child component</h2>
</template>

スロット

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      msg: 'from parent'
    }
  }
}
</script>

<template>
  <ChildComp>スロット: {{ msg }}</ChildComp>
</template>