Vue.js を PHP7+Laravel5 で使用してみた雑感と注意点

環境

• Vue.js 1.0
• CentOS 7
• PHP 7
• Laravel 5.3

はじめに Vue.js とは

• MVVMな JavaScript のフレームワーク
• Knockout.js の良いところを取って AngularJS をより簡略(軽量)化したようなポジション
• ES5 の機能が使われているため、IEは9以上でないと動作しない
• React.js に次いで満足度が高い
  

使用してみた雑感

• 公式ドキュメントが日本語化されていて、それなりに充実している
• チュートリアルをやれば大体分かる

イベント処理が簡単にできる

v-on:click=とかv-on:keyup.enter=とかでイベントが簡単に処理できる。

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
  name: 'Vue.js'
  },
  methods: {
  greet: function (event) {
  alert('Hello ' + this.name + '!')
  }
  }
})

でもスクロールのイベントはデフォだと取得できないぽい。
vue-scroll を入れれば解決する。

$index が地味に便利

v-forのブロック内で使える$index（カウンタ）が地味に便利。

<ul id="example-2">
  <li v-for="item in items">
  {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
  parentMessage: 'Parent',
  items: [
  { message: 'Foo' },
  { message: 'Bar' }
  ]
  }
})

結果：

Parent - 0 - Foo
Parent - 1 - Bar

Blade テンプレートにレンダリングする際は @ を付ける

Vue.js というより テンプレートエンジンの問題だけど、
Laravel で使用している Blade テンプレートにレンダリングする際は、
@{{ name }}のように記述しないとエラーになる

<h1>Laravel</h1>

こんにちは @{{ name }}.

エディタは ATOM がおすすめ

Vue.js のプラグインがいくつか出ているのでコーディングしやすい。