Vue.jsのオプションを忘れるためテンプレ作成
算出プロパティとウォッチャの使い分けに注意しなければ行けないなと思いましたまる。
だいたい算出プロパティでいいのかな・・・？

var app = new Vue({
  
  //①マウントする要素
  el: '#app', 
  
  //②アプリケーションで使用するデータ
  data: {
    val: true,
    item: {
      id:1,
      name: 'ソード',
      hp: 600
    },
    list: [
      { id:1, name: 'ウォンバット', hp:300 },
      { id:2, name: 'スライム', hp:200 },
      { id:3, name: 'ドラキー', hp:100 }
    ]
  },
  
  //③算出プロパティ
  //リアクティブデータの変更に基づいて結果をキャッシュするため処理が高速
  //複雑な処理に向いている
  computed: {
    computedMassage: function(){
      // this は app インスタンスを指します
      return this.massage + '!';
    }
  },
  
  //④ライフサイクルフック
  //特定のタイミングで自動呼び出しされる
  //タイミング毎にcreated,mounted,beforeMountなどがある
  created: function() {
    
  },
  
  //⑤アプリケーションで使用するメソッド
  //通常のメソッドとしての使用、イベントハンドラなどで呼び出す場合に使用
  methods: {
    myMethod: function(){
      
    }
  },
  
  //⑥ウォッチャ
  //特定のデータを監視して処理。データをトリガにしたフック
  //多くの場合では算出プロパティの方が適切
  //データが変わるのに応じて非同期や計算コストの高い処理を実行したいときに使用
  watch: {
    //値の監視
    監視するデータ: function(新しい値,古い値) {
      
    },
    //オブジェクトプロパティの監視
    'item.name': function( newVal, oldVal ) {
      
    },
    //実用的なものは以下
    //値の変更後一定時間経過後に処理
    //_.debounceは、実行から指定ミリ秒が過ぎた場合にcallbackを呼び出す
    value: _.debounce(function(newVal){
      //ここにコストの高い処理を記述
      console.log(newVal);
    }, 100 )
  },
  
  //⑦フィルター
  //ここで登録したフィルタは以下のように利用できる
  //{{ 対象のデータ | フィルタの名前 }}
  //{{ 対象のデータ | フィルタの名前1 | フィルタの名前2 }}
  //<div v-bind:id=" 対象のデータ | フィルタの名前 "></div>
  filters: {
    localNam: function(val) {
      return val.toLocaleDateString()
    }  
  },
  
  //⑧カスタムディレクティブ
  //v-vindのようなディレクティブを自作するinserted以外にも、bond,updateなどのフックがある
  //またフックの引数もel,binding,vnode,oldVnodeがある
  //input要素が描画されたときにフォーカスが当たるようにしたfocusディレクティブなら
  //<input v-focus>これで利用できる
  directive: {
    focus: {
      //紐ついている要素がDOMに追加される時
      inserted:function(el){
        el.focus();
      }
    }
  }
  
})