Vue.js の使い方

script タグで CDN から直接 Vue.js を読み込んで使用することができます。 下記の例では、unpkg を使用していますが、 他にも jsDelivr や cdnjs など、 npm パッケージを提供する CDN なら何でも使用することができます。 もちろん、このファイルをダウンロードして、自分で配信することもできます。

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Vue.js の初期化及びレンダリングを行います。 初期化処理は setUp() の中に記述していきます。 mount() で Vue.js がレンダリングの対象とする HTML の要素を指定しています。

JavaScript の値と HTML の表示を紐づけ（バインディング）したい場合は、ref() を使用する必要があります。 ref() を使用した値を、setUp() の return で返すと、その値を HTML で使用できるようになります。

ref() を使用した値を参照したり変更したい場合は、.value を付けるとアクセスすることができます。 ref() を使用した値を変更すると、自動的に HTML にもその内容が反映されます。

const message = ref('Hello vue!');
console.log(message.value);

HTML で v-text 属性を使用すると、JavaScript で指定された内容をテキストとして表示することができます。 テキスト内の HTML タグは自動でエスケープされます。

v-text="表示したい内容"

setup() {
	const message = ref('Hello vue!');
	return {
		message
	};
}

<div v-text="message"></div>

<div>Hello, vue!</div>

v-html 属性を使用すると、指定された内容を HTML として表示することができます。 テキスト内の HTML タグは自動でエスケープされません。

v-text 属性と v-html 属性の違いは、HTML タグが自動でエスケープされるかどうかです。 v-html 属性を使用した場合は、HTML タグは自動でエスケープされませんので、 XSS（クロスサイトスクリプティング）の脆弱性が発生する可能性があります。 注意して使用するようにしてください。

v-html="表示したい内容"

setup() {
	const message = ref('<h1>Hello, vue!</h1>');
	return {
		message
	};
}

<div v-html="message"></div>

<div><h1>Hello, vue!</h1></div>

マスタッシュ（mustache）とは、二重中括弧 {{ }} のことです。 このマスタッシュの中に記載された内容が、その場所にテキストとして展開されます。 テキスト内の HTML タグは自動でエスケープされます。

v-text 属性でもテキストを表示することはできますが、その場合はテキスト全体が入れ替わってしまいます。 マスタッシュ構文を使用した場合は、テキストの一部分だけを変更することができます。

setup() {
	const message = ref('Hello vue!');
	return {
		message
	};
}

<div>こんにちは {{ message }}</div>

<div>こんにちは Hello, vue!</div>

v-pre 属性を使用すると、その中のテキストはそのまま表示されます。 テキストの中でマスタッシュ構文を使用している場合でも展開されず、そのままのテキストで表示されます。 マスタッシュ構文による展開を無効化したい場合に利用します。

<div v-pre>こんにちは {{ message }}</div>

<div>こんにちは {{ message }}</div>

v-if 属性を使用すると、指定した条件式が真（true）の場合のみ、その要素が表示されるようになります。

v-if="条件式"

setup() {
	const type = ref('A');
	return {
		type
	};
}

<span v-if="type == 'A'">type is A</span>

<span>type is A</span>

v-else-if 属性を使用すると、v-if 属性で指定した条件式が偽（false）の場合に、その条件式の判定を連鎖させることができます。 指定した条件式が真（true）の場合のみ、その要素が表示されます。 直前の兄弟要素には v-if 属性もしくは v-else-if 属性が必要です。

v-else-if="条件式"

setup() {
	const type = ref('C');
	return {
		type
	};
}

<span v-if="type == 'A'">type is A</span>
<span v-else-if="type == 'B'">type is B</span>
<span v-else-if="type == 'C'">type is C</span>

<span>type is C</span>

v-else 属性を使用すると、v-if 属性もしくは v-else-if 属性で指定した条件式が全て偽（false）の場合に、その要素が表示されます。 直前の兄弟要素には v-if 属性もしくは v-else-if 属性が必要です。

setup() {
	const type = ref('X');
	return {
		type
	};
}

<span v-if="type == 'A'">type is A</span>
<span v-else-if="type == 'B'">type is B</span>
<span v-else-if="type == 'C'">type is C</span>
<span v-else>type is not A/B/C</span>

<span>type is not A/B/C</span>

表示と非表示を切り替えたい場合、v-if 属性を使用しても同様のことを行うことができますが、 v-if 属性と v-show 属性では、動作に少し違いがあります。 表示を頻繁に切り替えたい場合は、v-if 属性より v-show 属性の方が向いています。

v-if 属性と v-show 属性の違いは、要素が常に描画されるか（HTML の DOM 上に要素が追加されるか）どうかです。 v-if 属性の場合は、表示を切り替える際に要素の追加や削除を毎回行う必要があり、処理速度が少し遅くなってしまうのですが、 v-show 属性の場合は、CSS の display:none を切り替えてるだけなので、要素の追加や削除を行う必要が無く、処理速度が少し早くなります。

<span v-if="true">example</span>

<span v-show="true">example</span>

<span>example</span>

<span>example</span>

<!---->

<span style="display: none;">example</span>

初期表示時は少し注意が必要で、表示状態なのか非表示状態なのかで状況が変わります。 表示状態であれば、v-if 属性と v-show 属性の処理速度は、ほぼ変わらないでしょう。 なぜならどちらも要素の追加処理が必要だからです。 非表示状態であれば、v-if 属性は何も処理をしないので、v-show 属性よりも処理速度が速くなります。 v-show 属性は、非表示状態でも要素を追加する必要があるためです。

v-for 属性の書式のエイリアスの部分で ( ) を使用すると、 配列のインデックス（オブジェクトの場合はキー）が使用できるようになります。

setup() {
	const obj = ref({title: 'A', body: 'B', memo:'C'});
	return {
		obj
	};
}

<ul>
	<li v-for="(value, key) in obj">{{ key }} is {{ value }}</li>
</ul>

<ul>
	<li>title is A</li>
	<li>body is B</li>
	<li>memo is C</li>
</ul>

v-bind 属性は頻繁に使用されるため、: で省略することができます。

:属性名="値"

<img :src="imageSrc">example</span>

HTML の属性の中には、class 属性や style 属性などのように、複数の値を指定できるものが存在します。 それらの値を設定する際、配列やオブジェクトを使用して、まとめて指定することもできます。

<span :class="['large', className1, className2]">example</span>

class 属性を指定する際に、配列ではなくオブジェクトを使用した場合は、 そのオブジェクトのキーがクラス名になり、オブジェクトの値がそのクラス名の表示条件になります。

<span :class="{'large': true, className: isClassName}">example</span>

style 属性を指定する際にオブジェクトを使用した場合は、 そのオブジェクトのキーがスタイルの項目名になり、オブジェクトの値はスタイルの値になります。

<span :style="{ background: 'silver', color: textColor }">example</span>

v-on 属性は頻繁に使用されるため、@ で省略することができます。

@イベント名="イベントリスナー"

<button type="button" @click="buttonClick">example</button>

v-text 属性でテキストを表示する場合など、 JavaScript で指定された値を HTML として表示するだけなら、 「JavaScript から HTML」への紐づけ（バインディング）だけで済むのですが、 HTML のフォームに入力された内容（input タグや textarea タグなどの値）を JavaScript に反映するには、 先程とは逆の「HTML から JavaScript」への紐づけ（バインディング）が必要になります。 このような2つ方向（two-way）の紐づけ（バインディング）のことを「双方向バインディング（two-way binding）」と言います。

この双方向バインディングを使用すると、 JavaScript と HTML の間で、同じ値をくるくると回すことできるようになり、 JavaScript の値と HTML の表示が常に同期されている状態にすることができます。

下記の例を見てください。 これは v-bind 属性で JavaScript の値を HTML のテキストボックスに表示し（出力のバインディング）、 v-on 属性で HTML のテキストボックスの値を JavaScript の値に反映（入力のバインディング）している例になります。 冗長な書き方ではありますが、2つの方向のバインディング（双方向バインディング）が行われていることが確認できるかと思います。

<input :value="searchText" @input="searchText = $event.target.value">

双方向バインディングは、v-model 属性を使用すると短く簡潔に記述することができます。 例えば、上記の冗長な書き方の例と同じことを v-model 属性を使用して記述し直すと、下記のように短く記述することができます。

<input v-model="searchText">