Vue.jsを使ってみる

双方向データバインディングができるシンプルなフレームワーク「Vue.js」を使ってみます。

インストール

Vue.jsのサイトにアクセスしてインストールボタンをクリック。

インストール方法はいくつかありますが、今回はダウンロードして使用したいので、スタンドアロン > プロダクションバージョン をクリックしてダウンロードしました。

Hello Worldの表示

公式サイトのガイドに掲載されているサンプルを試してみます。
まずはHello Worldという文字列を表示してみます。

HTML

<div id="app">
	{{ message }}
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		message: 'Hello World!!'
	}
})

elでHTML要素を指定して、バインド対象範囲を決めます。
dataはバインドする値を指定します。
今回の場合、data内のmessageとHTML側の{{ message }}を紐づけています。
Hello Worldのデモページ
　

双方向バインディング

inputに入力する内容をリアルタイムで表示させてみます。

HTML

<div id="demo">
	<p>{{message}}</p>
	<input v-model="message">
</div>

JavaScript

var demo = new Vue({
	el: '#demo',
	data: {
		message: '入力してください'
	}
})

inputにv-model=”message”とすることで、data内のmessageと紐づけしています。
双方向バインディングのデモページ
　

リストのレンダリング

配列の内容を繰り返し表示してみます。

HTML

<div id="app">
	<ul>
		<li v-for="story in stories">
			{{ story.subtitle }}
		</li>
	</ul>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		stories: [
			{ subtitle: 'パンの耳ですわ' },
			{ subtitle: 'カラダにいいのはおいしくないものだよ' },
			{ subtitle: 'メイドの味がした' },
			{ subtitle: 'むしろ生きがいです' },
			{ subtitle: 'もうこはんはもうないんですね' },
			{ subtitle: '野菜肉肉肉肉肉肉魚' },
			{ subtitle: '十円足りない' },
			{ subtitle: 'たくさん釣れてる' },
			{ subtitle: 'カレーは二日目' },
			{ subtitle: '鶏肉とケーキを食べまくる日' },
			{ subtitle: 'チョコを食べまくる日' },
			{ subtitle: 'もうパンの耳は卒業しますわ' }
		]
	}
})

v-forは配列のデータをループ処理します。
リストのレンダリングのデモページ
　

ユーザー入力のハンドリング

ユーザーのアクションによって値を変更させてみます。

HTML

<div id="app">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">Reverse Message</button>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		message: '三者三葉'
	},
	methods: {
		reverseMessage: function () {
			this.message = this.message.split('').reverse().join('')
		}
	}
})

methodsはイベントなどから呼び出す処理を設定します。
今回の場合、v-on:click=”reverseMessage”でクリック時にmethods内で設定しているreverseMessageを呼び出しています。
ユーザー入力のハンドリングのデモページ
　

Todoアプリ

リロードすると消えますが、データの追加と削除を行えるTodoアプリを作ってみます。

HTML

<div id="app">
	<input v-model="newStory" v-on:keyup.enter="addStory">
	<ul>
		<li v-for="story in stories">
			<span>{{ story.subtitle }}</span>
			<button v-on:click="removeStory($index)">X</button>
		</li>
	</ul>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		newStory: 'もうパンの耳は卒業しますわ',
		stories: [
			{ subtitle: 'パンの耳ですわ' },
			{ subtitle: 'カラダにいいのはおいしくないものだよ' },
			{ subtitle: 'メイドの味がした' },
			{ subtitle: 'むしろ生きがいです' },
			{ subtitle: 'もうこはんはもうないんですね' },
			{ subtitle: '野菜肉肉肉肉肉肉魚' },
			{ subtitle: '十円足りない' },
			{ subtitle: 'たくさん釣れてる' },
			{ subtitle: 'カレーは二日目' },
			{ subtitle: '鶏肉とケーキを食べまくる日' },
			{ subtitle: 'チョコを食べまくる日' }
		]
	},
	methods: {
		addStory: function () {
			var text = this.newStory.trim()
			if (text) {
				this.stories.push({ subtitle: text })
				this.newStory = ''
			}
		},
		removeStory: function (index) {
			this.stories.splice(index, 1)
		}
	}
})

Todoアプリのデモページ
　

【参考サイト】

• vue.js