techa1008

ROCKET NOTE

2018.05.26

Vue.jsを使ってみる

Vue.jsはJavaScriptフレームワークです。

主にフロントエンドまわりで使われるフレームワークですが、CDNで気軽に始められるので使ってみます。

理解しやすいように、完成形のHTMLから逆に考えていきます。

SELECT ALL

<p id="hoge">
	<h1>Vue.jsとは?</h1>
	<p>JavaScriptのフレームワークのひとつで、MVVMで設計されています。</p>
	<ul>
		<li>M ⇒ モデル</li>
		<li>V ⇒ ビュー</li>
		<li>VM ⇒ ビューモデル</li>
	</ul>
</p>

内容を抽象化します。

SELECT ALL

<p id="hoge">
	<h1>タイトル</h1>
	<p>説明</p>
	<ul>
		<li>リスト</li>
		<li>リスト</li>
		<li>リスト</li>
	</ul>
</p>

リストの箇所はループになっているので要素を1個だけにし、情報を最小限にします。

SELECT ALL

<p id="hoge">
	<h1>タイトル</h1>
	<p>説明</p>
	<ul>
		<li>リスト</li>
	</ul>
</p>

抽象化した内容をVue.jsで扱えるように、二重中括弧を使ってMustache(くちひげの意、マスタッシュと読む)タグにします。

SELECT ALL

<p id="hoge">
	<h1>{{ title }}</h1>
	<p>{{ description }}</p>
	<ul>
		<li>{{ list.text }}</li>
	</ul>
</p>

これがテンプレートのHTMLで、この状態からVue.jsを使って先述の完成形を再現します。

Mustacheタグの中身は、基本任意の文字列でOKです。リスト箇所のドットについては後述するのでここでは無視。

では、CDNでVue.jsを読み込みます。

SELECT ALL

<p id="hoge">
	<h1>{{ title }}</h1>
	<p>{{ description }}</p>
	<ul>
		<li>{{ list.text }}</li>
	</ul>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
// JavaScript記述箇所
</script>

JavaScript記述箇所にコードを書いて、Mustacheタグと具体的な内容を置換します。

SELECT ALL

// Vue インスタンスを作成
new Vue({

	// ラッパー
	el: '#hoge',

	// データ
	data: {
		title: 'Vue.jsとは?',
		description: 'JavaScriptフレームワークです。',
		texts: [
			{ text: 'M ⇒ モデル' },
			{ text: 'V ⇒ ビュー' },
			{ text: 'VM ⇒ ビューモデル' }
		]
	}

})

この時点ですでに、「タイトル」と「説明」は置換されます。

「リスト」のようなループ表示させるものは、ループさせたい要素のラッパーに、v-接頭辞を使ってVue.js専用の属性(ディレクティブと呼ばれます)を付与します。

SELECT ALL

	<ul v-for="list in texts">
		<li>{{ list.text }}</li>
	</ul>

v-forディレクティブでは、「任意の文字列 in 任意の配列名」という値を指定し、Mustacheタグの中身を「任意の文字列.任意の配列キー」とすることで、ループ表示ができます。

ディレクティブにはたくさん種類があり、様々な制御が可能です。

* * *

Vue.jsを使ってみる(デモ)