＊学習初日の個人的なアウトプット用です。
Vue.jsとは、UIを構築するためのプログレッシブフレームワークであり、モダンなツールやサポートライブラリと組み合わせることで、洗練されたSPAを開発することもできる。
大きな特徴の一つとして、双方向データバインディングができるという点が挙げられる。
データバインディングとは data と UI を結び付けるという意味で、双方向というのは data を更新すれば UI が更新されて、 UI を更新すれば data が更新されるという意味である。
入門のためここでは名前と簡単なリストを表示させる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue practice</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
<!--二重波括弧 {{}} で表現し UI を反映させる。そのままJavaScriptの式を書くこともできる。 -->
<p>Hello {{ name.toUpperCase() }}!</p>
<!-- v-model を使うことで input タグに入力された文字を上の表示にリアルタイムで反映できる。-->
<p><input type="text" v-model="name"></p>
<h1>My Lists</h1>
<ul>
<li>{{ lists[0] }}</li>
<li>{{ lists[1] }}</li>
<li>{{ lists[2] }}</li>
<!-- 上のリストは v-for を使って配列の中身を取り出すことが可能 -->
<li v-for="list in lists">{{ list }}</li>
</ul>
</div>
<!-- Vue.jsを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
- v-for や v-model など v- から始まる特殊な属性をディレクティブと呼ぶ。
js/main.js
(function() {
'use strict';
// vm は view model の略
var vm = new Vue({
el: '#app', // el は elements の略
data: {
name: 'tanaka',
lists: [
'list 1',
'list 2',
'list 3'
]
}
});
})();
ブラウザで確認すると結果以下のような表示になる。
以上です。