Vue.js入門その１〜基本文法〜

はじめに

軽量JSフレームワークとして有名なVue.js。

最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思います。

今回は基本文法に関してメモしていきます。

なお、Vue.jsの公式ドキュメントはこちらになります。
https://jp.vuejs.org/

使用ツール

今回はJSFiddleを使用して開発します。

公式でも進められており、今回のような簡単な文法を試すくらいであればちょうど良いのかな、と思います。

なお、使用する場合はJavaScriptのFWをVue.jsの2系にします。

今回扱う内容は、公式ドキュメントに依ります。

基本文法

JSFiddleで試すので、HTML、CSS、JS（Vue）を分けて記述していきます。

レンダリング

HTMLテンプレートの中にデータを埋め込む場合です。

HTML

<div id="app">
  {{ message }}
</div>

JS

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

Vueインスタンスを生成します。
elが対象のDOMを指定しています。
またdataで定義した値を{{ }}の中に埋め込みます。

ちなみにリアクティブなので、Consoleから値を渡せば変更されます。
その際、JSFiddleで実施する場合はConsoleのコンテキストタブを「result (fiddle.jshell.net)」に変更し、JSの末尾に以下のコードを追記します。

window.app = app;

ディレクティブ

HTML

<div id="app-2">
  <span v-bind:title="message">
    数秒間この上にマウスオーバーしておくと、
    バインドしたタイトルを見ることができます！
  </span>
</div>

JS

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'あなたがこれをロードした時間は' + new Date()
  }
})

v-bindで対象の属性をVueインスタンスのmessageプロパティで保存できます。
v-は接頭辞で他にも種類があります。
v-bind (Vue.jsリファレンス)

この結果、HTMLでは以下のようにレンダリングされます。

<span title="あなたがこれをロードした時間はMon Jun 19 2017 20:56:20 GMT+0900 (JST)">
  数秒間この上にマウスオーバーしておくと、
  バインドしたタイトルを見ることができます！
</span>

条件分岐とループ

条件分岐（v-if）

HTML

<div id="app-3">
  <p v-if="seen">Hi!!</p>
</div>

JS

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

window.app = app3;

v-ifディレクティブでseenの真偽値を確認して表示制御できます。
試しにseenをfalseにすると表示されなくなります。
v-if (Vue.jsリファレンス)

ループ文（v-for）

HTML

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

JS

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Studying JavaScript' },
      { text: 'Studying PHP' },
      { text: 'Studying Ruby' },
    ]
  }
})

window.app = app4;

v-forディレクティブを使用することで、リストを展開できます。
v-for (Vue.jsリファレンス)

なお、コンソールで下記を入力すれば追加されます。

app.todos.push({ text: 'Studing CSS' })

ユーザー入力の制御

イベントリスナの追加（v-on）

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    Reverse Message
  </button>
</div>

JS

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-on:clickで、クリック時のイベントを定義できます。
v-on (Vue.jsリファレンス)

その際、インスタンス内のmethodsで関数を作成すればその処理をしてくれます。

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

ビュー側でデータが変更された場合、反映してほしいと思います。
v-modelを使用することでそれができます。
v-model (Vue.jsリファレンス)

HTML

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

JS

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

入力フォームから変更することで、messageも変更されます。

試しにコンソールで確認してみると、「Hello Vue!」ではなく、「hogehoge」になっています。

app.message
> "hogehoge"

コンポーネント

再利用可能なまとまりに分けておくことができます。

JS（コンポーネント）

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

これで、todo-itemというコンポーネントにまとめることができます。
propsでtodoという値を受け取ることができます。
templateは埋め込むHTMLテンプレートになります。

これで<todo-item>というタグをHTMLに記述すれば使用可能です。

HTML

<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

v-bindでtodoにループ文で取り出したitemをバインドさせます。
これでコンポーネントに値を渡せます。

JS（Vueインスタンス）

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' },
    ]
  }
})

コンポーネントとインスタンスを合わせて書くと、以下のようになります。

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' },
    ]
  }
})

さいごに

今回は以上になります。
上記は公式ドキュメントではこちらの範囲になります。

次回はVueインスタンスになります！

2017-07-06 追記
次の記事ができました！
Vue.js入門その２〜Vueインスタンスってなんぞ？〜

おすすめ書籍