今回はVue.jsの基礎、テンプレート構文について触れていきたいと思います。
最近vueを教える機会が増えてきた際にテンプレート構文ってなんですか？と聞かれ咄嗟に説明できなかったので改めて復習として記事を書いてまとめてみました。
テンプレート構文とは
Vue.js のテンプレート構文は、HTML に JavaScript のデータやロジックを埋め込むための仕組みです。これにより、静的な HTML を動的に変化させることができ、ユーザーインタラクションやデータの可視化を容易にします。
これだけ言われてもいまいちピンとこないと思います。
その中でも特に重要な3つの構文、mustache記法 {{ }}、v-bind、v-model について見ていきたいと思います。
Composition API の setup 構文を用いた具体的な例を通じて理解を深めていきたいと思います。
1. データを表示する: mustache記法 {{ }}
mustache記法は、最も基本的なテンプレート構文で、Vue.js のデータプロパティを HTMLテンプレートに表示する役割を持っています。
例:
<script sutup>
const name = ref('太郎');
</script>
<template>
<div>
<h1>こんにちは、{{ name }}!</h1>
</div>
</template>
この例では、name という変数に ref を使ってリアクティブなデータとして 太郎 を格納しています。{{ name }} を使うことで、テンプレートに 太郎 が表示されます。
2. 属性を動的に操作する: v-bind
v-bind は、HTML 要素の属性にデータプロパティをバインドします。属性値を動的に変更したい場合に便利です。
例:
<script sutup>
const imageUrl = ref('https://example.com/sample.jpg');
</script>
<template>
<img :src="imageUrl" alt="風景写真">
</template>
この例では、imageUrl という変数に ref を使って画像のURLをリアクティブなデータとして格納しています。v-bind:src="imageUrl" を使うことで、画像のsrc属性に imageUrl の値がバインドされます。
v-bind は : を省略して :src の代わりに src と書くこともできます。
3. フォーム入力とデータを同期する: v-model
v-model は、フォーム要素の値をデータプロパティと双方向にバインドします。ユーザーの入力とデータの同期を簡単に行うことができます。
例:
<script sutup>
const message = ref('');
</script>
<template>
<input type="text" v-model="message">
<p>入力されたメッセージ: {{ message }}</p>
</template>
この例では、message という変数に ref を使ってテキスト入力の内容をリアクティブなデータとして格納しています。ユーザーがテキスト入力に何かを入力すると、message の値が更新されます。同時に、message の値が {{ message }} によって表示されるため、リアルタイムで入力内容が反映されます。
まとめ
このようにテンプレート構文を扱えるようになれば動的なウェブサイトを構築することができるようになります。また、Composition API の setup 構文を使えば、より整理されたコードで、テンプレート構文を活用することができるためこちらも同時に復習していきたいと思います。