Vue.jsのテンプレートと基本文法 | Vue.js入門

値を表示する

テンプレートの{{ }}は、JavaScriptの値を文字列として表示します。単純な計算や三項演算子も書けますが、複雑な処理はcomputedへ分けます。

補間VUE

<script setup>
const title = 'Vue.js入門'
const price = 980
</script>

<template>
  <h1>{{ title }}</h1>
  <p>税込み目安: {{ Math.floor(price * 1.1) }}円</p>
</template>

実行結果OUTPUT

Vue.js入門
税込み目安: 1078円

ディレクティブ

v-で始まる属性は、Vueがテンプレートを処理するためのディレクティブです。v-bindは属性、v-ifは条件、v-showは表示状態を扱います。

条件表示とクラスVUE

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
</script>

<template>
  <button :class="{ active: isActive }" @click="isActive = !isActive">
    {{ isActive ? '有効' : '無効' }}
  </button>
  <p v-if="isActive">ボタンは有効です</p>
</template>

テンプレートではrefの値が自動展開されるため、イベント内ではisActive = !isActiveと書けます。JavaScript側の関数ならisActive.valueです。

イベントを処理する

@click、@input、@submit.preventなどでブラウザーのイベントを受け取ります。フォーム送信ではページ再読み込みを防ぐため.preventを使います。

イベント修飾子VUE

<script setup>
import { ref } from 'vue'
const message = ref('')
function save() { message.value = '保存しました' }
</script>

<template>
  <form @submit.prevent="save">
    <button>保存</button>
  </form>
  <p>{{ message }}</p>
</template>

実行結果OUTPUT

保存を押す: 保存しました
URLの末尾にフォームデータが付く: 付かない

リストとkey

v-forで配列を表示します。配列の番号ではなく、データ自身が持つ一意なIDを:keyに使うのが基本です。

Todo一覧VUE

<script setup>
import { ref } from 'vue'
const todos = ref([
  { id: 101, text: 'Vueを読む', done: false },
  { id: 102, text: '練習問題を解く', done: true }
])
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input v-model="todo.done" type="checkbox">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
  </ul>
</template>

表示とデータの変更が同じ状態に結び付くため、チェックボックスを操作するとdoneも変化します。実際のアプリでは削除、空配列、読み込み中、エラーの表示も用意します。

Vue.js入門の講座一覧

値を表示する

ディレクティブ

イベントを処理する

リストとkey