これからはじめるVue.js #Vue.js

はじめに

Vue.jsはオープンソースのJavaScriptフレームワークです。
Vue.js公式サイト
日本語リファレンスがすごく豊富なので、変にググって調べるよりもこっちの方が勉強になると思います。

特徴

データバインディングとは分離されたデータソースとユーザインタフェースの間を橋渡しする役割を果たしますが、ユーザインタフェースの変更または操作に応じてデータが変更されるのを双方向データバインディングと言います。
その双方向データバインディングに特化しているのがVue.jsです。
つまりhtmlとjs間で簡単にデータの橋渡しができるよーっていうイメージ。

さっそく導入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

これを！！！htmlファイルにコピペするだけ！！！簡単！！！

npmでインストールする方法もありますが、軽く触るくらいならCDNでいいと思うので割愛します。

やってみる

<div id="app"></div>

まずは、適当にdivタグを書いてidを指定します。

Vueインスタンスの作成

var vm = new Vue({
  // プロパティ
    el: '#app',
});

全ての Vue アプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。
上記のコードだと、以下のプロパティはapp内に通用しますと言う意味になります。
ちなみにここでクラスを指定すると、そのクラス名がユニークである場合のみ動きます。複数指定したクラスには適用されないので注意。

オプション/データ

index.html

<html>
    <head>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            こんにちは、{{ name }}さん！
            <p>所持品</p>
            <li v-for="item in items">
                {{ item.name }}
            </li>
        </div>
        <script src="js/index.js"></script>
    </body>
</html>

js/index.js

var app = new Vue({
    el: '#app',
    data: {
        name: '勇者',
        items: [
            { name: 'ポーション' },
            { name: 'どくけし' },
            { name: 'エーテル' },
        ]
    }
});

【出力結果】

...とこんな感じでデータをjsからhtmlに渡すことができます。

ディレクティブ

上記のhtmlファイルの<li>タグにv-forとありますが、これはVue.jsのディレクティブといいhtmlタグに埋め込むことにより便利な機能が使えます。以下では、主なディレクティブを紹介したいと思います。

v-text : 要素の中身のテキストを書き換える

<div id="sample">
    <div v-text="hoge"></div>
    <div>HOGEHOGE</div>
</div>

<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      hoge: 'HOGEHOGE',
    }
  });
</script>

結果

HOGEHOGE
HOGEHOGE

v-for : 配列に要素をマッピングする


<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

結果

・Foo
・Bar

v-show : 表示切り替えのトリガー

<div v-show="foo">表示されます</div>
<div v-show="bar">表示されません</div>

<script>
var vm = new Vue({
    el: '#sample',
    data: {
      foo: true,
      bar: false,
    }
  });
</script>

結果

表示されます

v-if : バインディングの値の真偽値に基いて要素の挿入や削除を行う

<div v-if="foo">表示されます</div>
<div v-if="bar">表示されません</div>

<script>
var vm = new Vue({
    el: '#sample',
    data: {
      foo: true,
      bar: false,
    }
  });
</script>

結果

表示されます

v-on : DOM イベントの購読、イベント発火時の JavaScript の実行が可能になる

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
   <p>このボタンは {{ counter }} 回クリックされました。</p>
</div>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>

結果

クリック回数が記録される機能が簡単に実装できました。

今回はこのあたりで。
ディレクティブに関しては本当にたくさん存在するので公式リファレンスを参考にするといいでしょう。
次回以降はもっと踏み込んだ内容について書いていきます。