Vue.jsのリアクティブを実感してみます

Vue.jsはnpmからインストールしなくてもCDNですぐに勉強することができます。

idとel（多分エレメントの略）を紐づけます。{{～}}はmustache（マスタッシュ）と呼びます。dataには、app.priceというようにしてアクセスすることができます。以下をコーディングしてChromeで開きます。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	{{price}}円
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	price:0
	}
	});
	app.price=1000;
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

app.priceをChromeの開発者ツールから代入してみます。（ここでいうappはvar appのappです）

Vue.jsのリアクティブを実感してみます

こんな感じで、すぐにリアクティブに画面が変わります！

dataの中身は複数記述できます。

view raw

gistfile1.txt

hosted with ❤ by GitHub

この値をHTMLでレンダリングする際にmustache（マスタッシュ）を使用します。

「{{name}}は{{age}}歳です」みたいにコーディングします。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	{{name}}は{{age}}歳です
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	name:'tsukiyama',
	age: 22
	}
	});
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

v-ifとv-elseというキーワードを使用してif～elseのようなレンダリングをすることができます。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	<div v-if='age==0'>{{name}}は生まれたてです</div>
	<div v-else>{{name}}は{{age}}歳です</div>
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	name:'tsukiyama',
	age: 0
	}
	});
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

ageを変更するとレンダリングも変わります。

Vue.jsのリアクティブを実感してみます

v-forなんていう構文もあります。if~elseができるからfor文みたいなレンダリングが可能なようです。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	<ul>
	<li v-for='employee in employees'>{{employee.name}}:{{employee.age}}歳</li>
	</ul>
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	employees: [
	{name: 'tsukiyama', age: 22},
	{name: 'murashima', age: 41},
	{name: 'endo', age: 49}
	]
	}
	});
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

JSONの中に配列を用意してあげます。上記だとemployeesというキーで配列を用意しています。値はJSON形式をカンマ区切りしているだけですね。

以下のように表示されます。

Vue.jsのリアクティブを実感してみます

el,dataなどはVueコンポーネントが持っているプロパティと呼ばれるものです。

その他にもmethods,filters,computed,watchライフサイクルハックがあります。

次回methodsプロパティについて勉強しようと思います！

和歌山大学工学部卒業。フリーターのち正社員として勤務しています！

vue.js勉強中です。

コメント