業務でVue.jsを使えないとメンテ出来ない事があるので、とりあえず使って概要を抑える
ことにしました。

とりあえず使えるようにする設定

インストール

Vue.js公式のインストールの項目に書いてある、CDNでのインストールを試します。

CDNでのインストールであれば、htmlのhead内に以下を書くだけで使用出来ました。

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

vueインスタンスの生成

以下を追加する事でVue.jsインスタンスを作成する事が出来、実際に使用していく事が出来ます。

</body>
<script>
  var app = new Vue({
    // newしてvueインスタンスというものを作る。vueの処理はここに書いていく。
  })
</script>

今回はとりあえず使ってみる事が目的なので、Vue.jsの構文を</body>の下あたりに直接<script></script>で書いてしまいます。

データバインディング

データバインディングとは、データを同期させて表示に反映させる事。

まず、vueインスタンス内にel: '#id名'と書き、html内のidと紐づけてみます。

<body>
  <div id="app">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app' // id="app"を指定して、その配下のhtmlにVue.jsを反映させる
  })
</script>
</html>

データオプション作成とhtml内での展開

Vue.jsではvueインスタンス内にdataオプションでデータを定義した後、html内で{{ 展開したいdataのキー }}のように書く事でデータを展開して表示出来ます。

{{}}で囲って書く事をマスタッシュ構文と言います。

<body>
  <div id="app">
    {{ greet }}  // 3. 作ったデータをマスタッシュ構文で展開
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {                 // 1. データオプションでデータを用意する
      greet: 'Hello Vue.js' // 2. greetというキーで'Hello Vue.js'というデータを作る
    }
  })
</script>
</html>

完成

最終的に以下のようになります。


<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  </head>
  <body>
    <div id="app">
      {{ greet }}
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        greet: 'Hello Vue.js'
      }
    })
  </script>
</html>

Vue.jsの基本構文

先ほどの完成形を以下のようにテンプレートとして使い、Vue.jsの基本構文を使ってみました。


<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  </head>
  <body>
    <!--ここにhtmlとVue.jsの構文を書く-->
  </body>
  <script>
    // ここにVue.jsのデータを設定する
  </script>
</html>

v-bind

vueオブジェクト内に定義したdataオプションのキーをv-bind:valueに設定する事でデータを表示します。

html

<div id="app">
  <input type="text" v-bind:value="message">
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

v-if

dataオプションで設定した真偽値によって表示、非表示を切り替えます。
下記の例だとon_offが偽の場合、pタグごと表示を消します。

html

<div id="app">
  <p v-if="on_off">
    Hello
  </p>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    on_off: true
  }
})

v-show

v-showはv-ifの例のように表示、非表示を制御出来ますが、タグ毎非表示にするのではなく、
display: none;にします。

html

<div id="app">
  <p v-show="on_off">
    Hello
  </p>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    on_off: true
  }
})

v-for　繰り返し

要素の個数分繰り返して表示出来ます。
dataオプションで設定した配列colorsを１つずつcolorに入れて表示します。

html

<div id="app">
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    colors: ['Red', 'Greeen', 'Blue']
  }
})

v-on　イベント処理

クリックされた時の動作など、イベント処理を設定出来ます。

html

<div id="app">
  <button v-on:click="on_click">
    クリックボタン
  </button>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  methods: {
    on_click: function() {
      alert('クリックされました');
    }
  }
})

v-model　双方向バインディング

データを共有してリアルタイムで変更を反映します。
1つ目のテキストボックスに入力すると、dataオプションのtextが更新され、2つ目のテキストボックスにもすぐに反映されます。

html

<div id="app">
  <p>
    <input type="text" v-model="text"> // 1つ目のテキストボックス
  </p> 
  <p>
    <input type="text" v-model="text"> // 2つ目のテキストボックス
  </p> 
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  }
})

まとめ、感想

とりあえず使ってみて、なんとなくこんな感じか？というところはわかりました。
でもQiitaにあるVue.jsでゲーム作る記事とか見てると、まだ全体の1%くらいしか理解してない感じがする^^;
とりあえず何かアプリを作りたいところです。

Vue.jsを全く知らない状態から、とりあえず使ってみるまで