Vue.jsやってみた

インストール

公式見ると色々インストール方法はありますが、とりあえず使ってみるだけならjsファイルを単体でダウンロードするのがお手軽です。

インストール – vue.js

CDNだったら

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>

ここではバージョン1.0.17を使用します。

テキストを表示する

最初は簡単にテキストを一文だけ表示してみましょう。

HTML

<style>
[v-cloak] {
    display: none;
}
</style>
<div id="app" v-cloak>
	{{ message }}
</div>
<script src="vue.js"></script>
<script>
new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue.js!'
	}
})
</script>

CSSのセレクタが奇妙ですが、こうすると読み込み時に一瞬だけ{{ message }}と表示されてしまうのを非表示にすることができます。

ボタンを押したらテキストが表示される

最初からテキストが表示されてましたが、ボタンを押したら表示されるようにしてみましょう。

HTML

<div id="app" v-cloak>
	<p>{{ message }}</p>
	<button v-on:click="showMessage">表示</button>
</div>

HTMLではボタンにv-on:clickを任意のメソッド名を指定します。

「v-on:」の部分は「@」に省略することもできます。

<button @click="showMessage">表示</button>

JavaScript

new Vue({
	el: '#app',
	data: {
		message: ''
	},
	methods: {
		showMessage: function () {
			this.message = 'Hello Vue.js!';
		}
	}
})

HTMLにshowMessageを指定したのでJSではmethodsにshowMessageを作成します。

リストを表示

複数のデータからリストを表示してみます。
同じ項目を繰り返すようなものは「v-for」を使用します。

HTML

<div id="app" v-cloak>
	<ul>
		<li v-for="item in items">
			{{ item.message }}
		</li>
	</ul>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		items: [
			{ message: 'リスト1' },
			{ message: 'リスト2' },
			{ message: 'リスト3' },
			{ message: 'リスト4' }
		]
	}
})

リストに項目を追加

次はボタンクリックでリストの項目を追加できるようにしてみます。

HTML

<div id="app" v-cloak>
	<ul>
		<li v-for="item in items">
			{{ item.message }}
		</li>
	</ul>
	<button @click="addItem">追加</button>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		items: []
	},
	methods: {
		addItem: function () {
			this.items.push({
				message: 'リスト'+ (this.items.length + 1)
			})
		}
	}
})

配列に追加すれば自動的に表示の方も追加してくれる。すごい。

タブで切り替えるやつ

表示するデータは外部から持ってくるのを想定してタブ切り替え的なやつ。

HTML

<div id="app" v-cloak>
	<ul>
		<li v-for="tab in tabNav" @click="changeTab($index)">
			{{ tab }}
		</li>
	</ul>
	<div>{{ tabBody }}</div>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		tabNav: [
			'JavaScript',
			'PHP',
			'HTML'
		],
		contents: [
			'JavaScriptのコンテンツ',
			'PHPのコンテンツ',
			'HTMLのコンテンツ'
		],
		tabBody: ""
	},
	methods: {
		changeTab: function (index) {
			this.tabBody = this.contents[index];
		}
	}
});

タブで切り替える(HTMLに書くタイプ)

v-ifとか使えば分岐もHTML側でできる。

HTML

<div id="app" v-cloak>
	<ul>
		<li v-for="tab in tabNav" @click="changeTab($index)">
			{{ tab }}
		</li>
	</ul>
	<div v-if="contents == 0">
		JavaScriptのコンテンツ
	</div>
	<div v-if="contents == 1">
		PHPのコンテンツ
	</div>
	<div v-if="contents == 2">
		HTMLのコンテンツ
	</div>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		tabNav: [
			'JavaScript',
			'PHP',
			'HTML'
		],
		contents: 0
	},
	methods: {
		changeTab: function (index) {
			this.contents = index;
		}
	}
});

いろいろ間違ってるかもしれませんが以上です。