Vue.jsについて

人気の高いJavaScriptのフレームワークの一つ
https://jp.vuejs.org/index.html

Vue.jsの読み込みには、Vue.js本体を配信しているCDNを利用する。Vue.jsには開発用と、本番用の２種類があり、開発バージョンには警告出力とデバックモードがあるので学習ようには最適。

Vue.jsを読み込むとVue関数が使用できるようになる。そのVue関数を使いVueインスタンスを作成する。
Vue関数には引数としてオプションオブジェクト（Vue.jsの設定を行うためのオブジェクト）をとり、そのオプションオブジェクトの内容によってVueアプリの挙動が変わる。

new Vue({
//オプション
})

・elオプション
elオプションではVueインスタンスを紐付けるDOM要素を指定する。DOM要素はCSSセレクタ形式での指定が可能

new Vue({
  el: "#app"  //#appを指定
})

・dataオプション
Vueインスタンスに持たせたいデータを登録することができる。複数データ持たせることも可能。

new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js"  //messageというプロパティ名で"Hello Vue.js"という値を登録
  }
})

これでVueインスタンスを#appに紐付かせ、データも持たせることができた。

・登録したデータを表示
参照したいデータの名前を波括弧を二重にして囲む（Mustache構文）。

<div id="app">
  {{ message }}  //Hello Vue.jsと表示
</div>

HTMLの属性値にVueインスタンスのデータを参照するには、v-bindディレティブを使う。
v-bind:属性名="参照するデータ"の形で使い、Vueインスタンスのデータと属性値を紐付けする。

.html

<div id="app">
 <a v-bind:href="href">Vue.js</a>
　　//省略して　:href="href" でも良い
</div>

.js

new Vue({
  el: "#app",
  data: {
    href: "https://jp.vuejs.org"
  }
})

条件によって要素の表示を分けたい場合はv-ifディレクティブを使う。値が真か偽どちらに評価されるかで表示の有無が変わる。else if、elseディレクティブも用意されている。

.html

<div id="app">
  <p v-if="stock">販売中</p>
  <p v-else-if="stock">のこりわずか</p>
  <p v-else>売り切れ</p>
</div>

.js

new Vue({
  el: "#app",
  data:　{
    stock: 5
  }
})

「のこりりわずか」と表示される。

配列をループしたい場合はv-forを使う。
v-for="配列の要素名 in 配列名"の形で使う。

.html

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

.js

new Vue({
  el: "#app",
  data: {
    items: ['みかん','りんご','ばなな']
  }
})

・みかん
・りんご
・ばなな

と表示される。

クリック、フォームの送信など、イベントが発生した時に処理を行いたい時はv-onディレクティブを使う。

.html

<div id="app">
  <p>カウント : {{ count }}</p>
  <button v-on:click="count = count + 1">カウント追加</button>
  //ボタンをクリックするとcountの値を１増加する
</div>

.js

new Vue({
  el: "#app",
  data: {
    count: 0
  }
})

v-onもよく使うため、省略して「@イベント名="行いたい処理"」と書くこともできる。

以上

まだまだたくさんありますし、自分も勉強中なのでこれから他にも書いていきたいです。

Vue.js基本