Vue.jsの基本 #1

今回はJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

HTML側の基本構文

Vueでは、HTML内に「ディレクティブ」と呼ばれる特別な属性を使って、動的な動作を実現します。

v-if：条件によって要素を表示・非表示にする

<p v-if="isShow">このメッセージは表示フラグがtrueのときだけ見えます。</p>

v-if は 条件式 が true のときだけ、その要素をDOMに描画します。
v-else や v-else-if も組み合わせて使えます。

v-for：リストを繰り返し表示する

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}: {{ item }}
  </li>
</ul>

v-for は配列やオブジェクトをループ表示します。

v-model：双方向データバインディング

<input v-model="message" placeholder="メッセージを入力">
<p>入力中の内容：{{ message }}</p>

v-model は 入力フォームの値とデータをリアルタイムで同期 します。
テキストボックス、チェックボックス、セレクトボックスなどに使えます。

@input：入力イベントを検知する

<input @input="onInputChange" placeholder="文字を入力">

@input はフォーム入力のたびにイベントを実行します。

@click：クリックイベントを実行する

<button @click="count++">クリック回数：{{ count }}</button>

@click はクリック時の処理を定義します。
上の例では、ボタンを押すたびに count の値が1ずつ増えます。

次回はJavaScriptの基本構造について説明します。

木曜日担当：nishida

このエントリーをはてなブックマークに追加


nishida at 2025年11月06日 10:00:00


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓