Vue.js
Vue.jsとは、Webアプリケーションにおけるフロントエンド（インターフェイス部分）の構築を容易にする JavaScriptフレームワークです。高機能な SPA（Single-page Application）を、シンプルなコードで記述できることから、近年注目を集めています。
Vue.js は MVVM（Model-View-ViewModel）型のフレームワークで、Vue内に用意したデータ（Model）とHTMLで表示する要素（View）をどのように関係づけるのか（ViewModel）を記述するものです。
一言でいうと
データを作り、表示要素を用意し、それらの関係づけを設定する
というのが、Vue.js による開発作業の基本形です。
Vue.js の 主な機能
- {{ data }}：データを表示
- v-bind：要素の属性をデータで指定
- v-model：入力フォームとデータをつなぐ
- v-on：イベントに対応
- v-if：条件分岐
- v-for：繰り返し処理
- computed：計算を実行
- watch：データの変化を監視
- transition：表示・非表示の際にアニメーション
- component：部品にまとめる
どうやって使うの？
HTML の <head> 以下の記述（CDNで接続）をするだけで使えます。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
事例１：文字列の表示
<!DOCTYPE html>
<html>
<head>
<title>Sample Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<h1>Vue.js First Sample</h1>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- 基本的なHTML文書の構造に、Vue の 入門コードを記述しています。
- ページ読み込み後に Vue のスクリプトを動かすため、<script>は</body>の直前に書いています。
- el（element）: ページ内に ID定義された要素 #app を指します。
- data: モデル内に定義されたデータを指します。
- 要するに 要素 #app に JavaScript が動的に message を書き込んでいます。
事例２：マウスホバーで日時を表示
以下、変更部分のコードのみ記載します
- HTML
<div id="app"> <span v-bind:title="message"> ここに数秒マウスを乗せると、日時が表示されます。 </span> </div>
- Script
var app = new Vue({ el: '#app', data: { message: '日時 ' + new Date().toLocaleString() } })
詳細は、以下の公式サイトをご覧下さい。