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のリアクティブを実感してみます

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

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

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

data: {
name: 'tsukiyama',
age: '22'
}

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-ifv-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のリアクティブを実感してみます

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のリアクティブを実感してみます

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

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

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

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

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA