Vueオブジェクト　【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

jsstudy.hatenablog.com

4-2-1　HTMLファイルを用意する
4-2-2　スクリプトを作成する
- JavaScript
4-2-3　Vueオブジェクト
まとめ

4-2-1　HTMLファイルを用意する

(p.121)

Vue.jsは、HTMLに基本的なタグを用意しておき、JavaScript側でそれらのタグの表示を操作します。

したがって、HTMLファイルとスクリプトファイルを用意する必要があります。

HTMLファイル

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <p id="msg">{{ message }}</p>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。
main.jsは、あとで自分で作る。

スタイルシート

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

Mustacheタグ

HTMLファイルで

<p id="msg">{{ message }}</p>

<p>タグのコンテンツに「{{」と「}}」という記号で囲まれた部分があります。

これは、「Mustache（マスタッシュ）タグ」と呼ばれる記号で、「Mustache」というテンプレートエンジンで使われている特殊なタグです。

Mustacheタグは、{{○○}}というように、前後を {{　}} という二重のブレース記号を使って記述されます。

f:id:jsstudy:20170713205211p:plain

（参考）

https://github.com/janl/mustache.js

JS：mustache.js 入門 - Web系開発メモ

この「{{ message }}」という部分を、JavaScriptで実際のメッセージに置き換えるんですね。

https://jp.vuejs.org/v2/guide/syntax.html#テキスト

データバインディングのもっとも基本的な形は、”Mustache” 構文(二重中括弧)を利用したテキスト展開です:
<span>Message: {{ msg }}</span>
mustache タグは、対応するオブジェクトの msg プロパティの値に置き換えられます。

4-2-2　スクリプトを作成する

(p.122)

Vue.jsを利用するスクリプトを書きましょう。

HTMLファイルと同じ場所に「main.js」という名前でファイルを作成します。

JavaScript

main.js

function initial(){
  new Vue({
    el: '#msg',
    data: {
      message: 'this is Vue.js sampte!'
    }
  })
}

これは、HTMLが読み込まれたときに、最初に呼び出される関数ですね。

<body onload="initial();">

（↑HTMLファイルの、この部分から呼び出される。）

Vue.jsの知識ゼロでコードを読むと、

Vueコンストラクタ関数で、Vueインスタンスを作成（new）する。
Vueコンストラクタ関数に、初期値となるオブジェクト（連想配列）を渡す。
ここでの初期値は、「el」と「data」の2つのプロパティがある。
「data」プロパティの中身は、「message」というプロパティを持ったオブジェクトにしている。

Vueオブジェクトを作ったり、「el」や「data」というプロパティの値を用意することが約束事みたいですね？

main.jsを用意したら、HTMLファイルをChromeで開いてみます。

f:id:jsstudy:20170713211105p:plain

「this is Vue.js sample!」というテキストが表示されました。
マスタッシュタグで囲まれた「{{ message }}」という部分の文字が置き換わっています。

このサンプルコードで、Vue.jsの最も基本的なデータバインディング（データ結合）の仕組みについて確認できました！

4-2-3　Vueオブジェクト

(p.123)

Vue.jsでもっとも重要なのは「Vue」というオブジェクトです。

これは、Vue.jsに用意されているViewModelオブジェクトです。

このVueオブジェクトを作成し、この中でデータと画面の表示を関連付け、処理していきます。

このVueオブジェクトは、以下のように作成します。

var 変数 = new Vue({ /* オプション情報 */ });

Vueコンストラクタ関数の引数は、Vueで必要となる設定などの情報をまとめたオブジェクト。
Webページ側に表示するには最低限、「el」と「data」の値を用意する必要がある。

el	値を表示する対象となるタグ（Element）を指定するものです。ここにタグのIDなどの情報を用意しておきます。ここでは、el: '#msg'として、ID="msg"のタグを指定しています。
data	渡す値を用意します。この値はオブジェクトとして用意し、その中に値をまとめておきます。ここでは、message: 'this is Vue.js sample!'として、messageという名前でテキストを保管しています。

「el」と「data」の2つさえ用意しておけば、とりあえずVue.jsを使えます。
elで指定したタグに、dataで指定した値を割り当てて表示します。

（参考）

jp.vuejs.org

全ての Vue vm は、Vue コンストラクタ関数でルート Vue インスタンス(root Vue instance)を作成することによって起動されます:
var vm = new Vue({
  // オプション
})
慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。

Vue インスタンスを生成するには、オプションオブジェクトを渡す必要があります。

これには、データ、テンプレート、マウントさせる要素、メソッド、ライフサイクルコールバックなどをオプションとして指定することができます。

全てのオプションの一覧はAPI リファレンスで参照できます。