Edited at

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

More than 1 year has passed since last update.


環境


  • 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 のプラグインがいくつか出ているのでコーディングしやすい。