DEV Community

nabbisen
nabbisen

Posted on • Originally published at scqr.net

Vue ディレクティブ 基本要素

#vue #typescript #spa #webdev

Vue テンプレートで頻繁に使うディレクティブを学びましょう。これらは HTML 要素に特別な機能を追加します。

Vue ディレクティブ 基本要素 一覧

ディレクティブ 略記 説明 例
v-bind : HTML 属性にデータをバインドする <img :src="imageUrl">
v-model なし フォーム要素とデータを双方向バインド <input v-model="userName">
v-on @ イベントを監視し、処理を実行 <button @click="handleClick">
v-if なし 条件で要素の表示/非表示を切り替え (DOM 削除) <p v-if="showMessage">
v-show なし 条件で要素の表示/非表示を切り替え (CSS display: none) <p v-show="showMessage">
v-for なし リストの要素を繰り返し描画 <li v-for="item in items" :key="item.id">

Vue ディレクティブ 基本要素 解説

v-bind

  • HTML 属性にリアクティブなデータをバインドします。
  • 略記: :
  • 例: src 属性に画像の URL を、class 属性に動的に変更したい CSS クラスをバインド。 
<template>
  <img :src="imageUrl" :alt="imageAlt" :class="{ 'active': isActive }">
</template>

<script setup>
import { ref } from 'vue'

const imageUrl = 'https://example.com/image.jpg'
const imageAlt = 'サンプル画像'
const isActive = ref(true)
</script>
Enter fullscreen mode Exit fullscreen mode

v-model

  • フォーム要素 (<input>, <textarea>, <select> 等) と JavaScript のデータを双方向にバインドします。入力内容が自動でデータに反映され、データが変更されると入力欄にも反映されます。 
<template>
  <input type="text" v-model="userName">
  <p>入力された名前: {{ userName }}</p>
</template>

<script setup>
import { ref } from 'vue'

const userName = ref('')
</script>
Enter fullscreen mode Exit fullscreen mode

v-on

  • DOM イベント (クリック、入力など) を監視し、イベントが発生したときに JavaScript のメソッドを実行します。
  • 略記: @ 
<template>
  <button @click="handleClick">クリックしてください</button>
</template>

<script setup>
const handleClick = () => {
  alert('ボタンがクリックされました !')
}
</script>
Enter fullscreen mode Exit fullscreen mode

v-if / v-else-if / v-else

  • 条件に基づいて要素の 表示 / 非表示 を切り替えます。false の場合、要素は DOM から完全に削除されます。 
<template>
  <button @click="toggleMessage">メッセージ表示 / 非表示</button>
  <p v-if="showMessage">こんにちは ! メッセージが表示されています。</p>
  <p v-else>メッセージは非表示です。</p>
</template>

<script setup>
import { ref } from 'vue'

const showMessage = ref(true)
const toggleMessage = () => {
  showMessage.value = !showMessage.value
}
</script>
Enter fullscreen mode Exit fullscreen mode

v-show

  • v-if と同様に要素の表示/非表示を切り替えますが、false の場合でも要素は DOM に残ったまま、 CSS の display: none;が適用されます。頻繁に切り替える場合は v-if より効率的ですが、実際には v-if よりも用途が少ないかもしれません。 
<template>
  <p v-show="showMessage">これは v-show で表示されています。</p>
</template>
Enter fullscreen mode Exit fullscreen mode

v-for

  • 配列のデータに基づいて、要素を繰り返し描画します。 
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }}: {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const items = ref(['りんご', 'バナナ', 'みかん'])
</script>
Enter fullscreen mode Exit fullscreen mode
  • key 属性の重要性: v-for を使う際は、要素に :key 属性を付ける ことが 非常に重要 です。key は各要素を一意に識別するためのもので、要素の追加・削除・並び替えを効率的に行うために Vue が使用します。通常は、データの ID など、一意で安定した値を指定します。

これらのディレクティブを使いこなすことで、 Vue の強力なデータバインディングとリアクティブな UI 構築の恩恵を最大限に受けることができます。

Top comments (3)

Collapse
 
nevodavid profile image
Nevo David •

this is super clear and actually makes me wanna build out a test app now - you ever find yourself learning more from docs or just messing around in code?

Collapse
 
nabbisen profile image
nabbisen •

Encouraging phrases !! Hmmm... maybe in my case, "learning more from docs" : "messing around in code" = 3:7, 2:8, 1:9 ... 🤣 By the way, Vue official docs are really great to learn: vuejs.org/guide/quick-start.html

Some comments may only be visible to logged-in visitors. Sign in to view all comments.