Home

vue.jsを使って実装していきたいので、使えそうな部分のまとめ

概要

https://jp.vuejs.org/v2/guide/index.html

導入は簡単で、

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

と書けばok
cdn = contents delivery network

描画をしてみる

<div id="app">    <!-- Vueインスタンスのelの値 -->
  {{ message }}   <!-- Vueインスタンスのdata内の属性 -->
</div>
var app = new Vue({
  el: '#app',               // id
  data: {                   // dataの中に色々入れる
    message: 'Hello Vue!'
  }
})

これで描画できる。
また、

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

v-という接頭辞を持つ「ディレクティブ」が提供される。
v-bindディレクティブにより、html内のtitle属性の値をVueインスタンスのmessage属性の値によって束縛している。
これもまたリアクティブであり、messageを変更するとhtmlに反映される。

ディレクティブはいっぱいあり、htmlの値だけではなく構造も束縛できる。
例えば、v-ifディレクティブにより、Vueインスタンスの例えばseen属性のtrue/falseによって描画の有無を切り替えたりできる。
トランジェントエフェクトもあるらしい
v-forとか

v-onがあります methodsに関数名を入れておく

書いてないけど超大事として、vueインスタンスはhtml読み込み後に読み込まれないと動作しない（は？）（書けよ）
のでjsにdeferとかつける必要がある

コンポーネントの概念
hogeコンポーネントを定義すると、<hoge></hoge>がtemplateの中身に化ける
このときv-bindで値を渡すこともできる