【Vue.js】主要なオプションオブジェクトのまとめ

Vueを使う中で、頻繁に使用するオプションオブジェクトなのに良く理解せず記述しているものがあったので、これを機にまとめます。

参考文献
Vue.js 開発入門
Vue.js入門

＊javascriptでVue.jsのファイルを読み込んでいることを前提に書きます。
紹介するオプション
・el
・data
・methods
・computed

el　【Vueインスタンスの適用】

書式：el: '#id名など'

Vueの処理は、Vueインスタンスを生成し、どのHTML要素と繋げるか（マウントする）というところから始まります。
el（elementの略）で指定したDOM要素がマウントの対象になります。elにはDOM要素のオブジェクトか、CSSセルクタの文字列を指定できます。
下記の形が良く使われます。

let vm = new Vue({
  el: '#app',
  //...
})

Vueインスタンスは変数に代入しなくても使用可能です。
変数に代入する理由は、複数のVueインスタンスを使いデータの変更の検知や状態の更新を行う必要が出てきたとき、その変数を通して行われる為です。

＄mountメソッドを使うとelプロパティを定義せずにマウントできます。インスタンス生成後の任意のタイミングでマウントできますので、マウント対象のDOM要素がUI操作や通信などで遅れて追加される場合に使用されます。

let vm = new Vue({
  //...
})
vm.$mount(el)

Vue.js 2.0からはbodyへのマウントはできなくなりましたので注意。

data　 【UIのデータ定義】

書式：data: {プロパティ名: 値}

インスタンスの中にどんなデータがあるのかを指定します。
dataには、数値、文字列、ブーリアン、配列、オブジェクトなど、javascriptで使用できるデータは全て使えます。
インスタンス生成前に使っていた他のデータも中に取り込んで使うこともできます。

表示方法は基本的にマスタッシュタグを使い{{ プロパティ名 }}と記述します。
javascript式もサポートしています。（式は１つしか書けないので、少しだけデータを修正して表示させたい時に使えます。複雑化して見通しや保守性が下がらないよう注意。）

HTML

    <div id="app">
        <p>{{ number }}</p> <!-- 123 -->
        <p>{{ text }}</p> <!-- Hello -->
        <p>{{ bool }}</p> <!-- true -->
        <p>{{ arr }}</p> <!-- [ "a", "b", "c" ] -->
        <p>{{ arr[0] }}</p> <!-- a -->
        <p>{{ obj }}</p> <!-- { "name": "オレンジ", "price": 100 } -->
        <p>{{ obj.name }}</p> <!-- オレンジ -->
        <p>{{ obj.price * 1.08 }}</p> <!-- 108 -->     
        <p>{{ myFruits }}</p> <!-- [ { "name": "オレンジ", "price": 100 }, { "name": "レモン", "price": 200 }] -->
    </div>

javascript

     let fruitsList = [
          {name: 'オレンジ', price: 100},
          {name: 'レモン', price: 200},
          {name: 'バナナ', price: 300},
     ]

     let vm = new Vue({
          el: '#app',
          data: {
               number: 123,
               text: 'Hello',
               bool: true,
               arr: ['a', 'b', 'c'],
               obj: {name: 'オレンジ', price: 100},
               myFruits: fruitsList
          }
      })

console.log(vm)と記述すると、consoleにvmの内容が表示されます。
また、例えばconsole.log(vm.arr)と記述すればarrの内容が表示されます。

methods　【メソッド】

書式：methods: {メソッド名: function() {処理内容}}

インスタンスの中にどんなメソッドがあるのかを指定します。定義されたメソッドはVueインスタンスの中で呼び出せます。
よく使われるのはv-onディレクティブで、ユーザーがボタンをクリックしたり、キーボードから入力するような「イベント」が発生した時に呼び出される形です。
v-onの書式は<タグ名 v-on:イベント="メソッド名">となります。（v-on:は@に省略可能です。）

また、{{ メソッド名() }}のようにテキスト展開の式でも呼び出すことができます。
もちろん引数を渡すこともできます。
HTML

    <div id="app">
            <p>{{ text }}</p>
            <p>{{ showMsg() }}</p>　<!-- ボタンを押してねと表示 -->
            <p>{{ count }}</p>
            <!-- buttonのクリックイベント -->
            <button v-on:click="sayHello">挨拶</button> <!-- Helloと表示 -->
            <button @click="countUp(10)">10増やす</button> <!-- countが１０ずつ増加 -->
    </div>

javascript

     let vm = new Vue({
          el: '#app',
          data: {
               text: '',
               count: 0
          },
          methods: {
               // メソッド名: function() {
               //      処理
               // },
               sayHello: function() {
                    this.text = 'Hello';
               },
               showMsg: function() {
                    return 'ボタンを押してね';
               },
               countUp: function(value) {
                    this.count += value;
               }
          }
     })

computed　【算出プロパティ】

書式：computed: {算出プロパティ名: function(){return...}}

算出プロパティとは、あるデータから派生するデータを、プロパティとして公開するオプションオブジェクトです。
データそのものに何らかの処理を与えたものをプロパティにしたい（インスタンスに持たせて参照したい）時に使います。
マスタッシュタグに書いても一応動作はしますが、複雑な処理だと行そのものが長くなってしまい、何を表したいのか読み解くのが非常に困難になります。

下記はマスタッシュタグで無理に合計金額を求める複雑な計算をした場合
HTML

    <div id="app">
       <p>合計: {{ items.reduce(function(sum, item) { return sum + (item.price * item.quantity)}, 0) }} </p>
    </div>

javascript

     let items = [
          {
               name: '鉛筆',
               price: 300,
               quantity: 1
          },
          {
               name: 'ノート',
               price: 400,
               quantity: 2
          }
     ]

     let vm = new Vue({
          el: '#app',
          data: {
               items: items
          }
     })

見ての通り、HTMLが何をしたいのか理解するのに時間がかかります。
そこで、HTMLに『その値を表す名前』として算出プロパティを記述すれば、何をするのかが見るだけでわかるようになります。

HTML

    <div id="app">
        <p>{{ totalPrice }}</p>
    </div>

javascript

     let items = [
          {
               name: '鉛筆',
               price: 300,
               quantity: 1
          },
          {
               name: 'ノート',
               price: 400,
               quantity: 2
          }
     ]

     let vm = new Vue({
          el: '#app',
          data: {
               items: items
          },
          computed: {
               totalPrice: function () {
                    return this.items.reduce((sum, item) => {
                         return sum + (item.price * item.quantity)
                    }, 0)
               }
          }
     })

このようにcomputedで参照するとjavascriptもHTMLも大分わかりやすくなります。
関数を定義しましたが、computedはメソッドではなくプロパティなので、呼び出す際には()は必要ありません。
console.log(vm.totalPrice)でプロパティであることが確認できます。

メソッドと算出プロパティの違い

メソッドと算出プロパティは、どちらも関数を定義するという点では同じなのですが、算出プロパティはデータが更新されない限り、一度計算した結果をキャッシュ（保存）する特徴があります。
先ほどのtotalPriceの場合、一度計算をしたあとは、priceなどのデータが変わるまでは再計算を行わない、とうことです。

メソッドを使い、{{ totalPrice() }}でも同じ表現ができますが、これはメソッドが呼ばれるたびに計算されます。
この理由で、何度も同じ計算をせず、結果を再利用できるのであれば、算出プロパティを使った方が良いということです。

---

以上になります。
まだまだ補足することがありますが、これで大枠の理解はできるかと思います。
大事な補足が抜けていたり訂正などありましたら、ぜひご教授いただければ嬉しいです。
最後まで見ていただきありがとうございます。