Vue.jsでJavaScript式を使う　【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

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

jsstudy.hatenablog.com

4-2-7　JavaScript式を使う
- HTML
- CSS
- JavaScript
- 実行結果
- createdフック
まとめ

4-2-7　JavaScript式を使う

(p.129)

Mustacheタグには、dataの値を指定するだけでなく、もっと複雑な内容を記述することもできます。

それは「JavaScriptの式」です。

式といっても、四則演算のような式だけではありません。

要するに「結果を値として返すことのできる文」と考えておけばよいでしょう。

値として得られないようなものは設定できません。

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>
  <div id="msg">
    <p>{{ message.toString() }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

CSS

style.css

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

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      msgArray: [],
      message: '',
      text1: ''
    },
    created: function () {
      this.msgArray.push('sample message.');
      this.message = this.msgArray;
    },
    methods: {
      doAction: function () {
        this.msgArray.push(this.text1);
        this.message = this.msgArray;
      }
    }
  })
}

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

f:id:jsstudy:20170716091314p:plain

入力フィールドに「ABC」と入力して「click」ボタンをクリックしたら、デフォルトの文字列「sample message.」に加えて、今入力した「ABC」も表示部分に反映されました。

<p>{{ message.toString() }}</p>

マスタッシュタグでバインド（結合）するmessageに、JavaScriptの「toString()」メソッドで、配列を文字列に変換する処理を付けています。

本書はVue.jsバージョン1でサンプルコードが説明されており、toString()の後に式の文末を示す「;」（セミコロン）が付いていました。

<p>{{ message.toString(); }}</p>

これだと、Vue.jsバージョン2で動作しなかったので、文末のセミコロンを外しました。

Vueオブジェクトの「data」プロパティで、入力したデータを次々保存する「msgArray」という配列を用意しています。

msgArrayを表示に使うとき、配列から文字列に変換するためにtoString()を適用しています。

createdフック

main.jsに「created｣というプロパティが追加されています。

最初に「sample message.」という文字列を表示させるための処理を用意しています。

これは、Vueオブジェクトが生成された直後に実行される処理を指定するものです。

ここに初期化のためのメソッドを定義しておけば、それが最初に実行されます。

ここでは例として配列にダミーのテキストを追加し、表示させています。

こんな具合に、Vueの初期化処理を用意するのに役立ちます。

jp.vuejs.org

Vue インスタンスは、生成時に一連の初期化を行います。

例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。

その初期化の過程で、カスタムロジックの実行を可能にする、いくつかのライフサイクルフック(lifecycle hooks) を呼び出します。

例えば、created フックはインスタンスが生成された後に呼ばれます。

f:id:jsstudy:20170716094136p:plain