More Related Content
What's hot (20)
Similar to Laravel Blade×vue.js 混在させる場合の注意点 (20)
Laravel Blade×vue.js 混在させる場合の注意点
- 3. Bladeとvue.jsを混在させる場合以下の3点を 気にする必要があります。 • Bladeの記述とvue.jsの記述の衝突 • ブラウザのDOM解析 • ブラウザのjavascriptの挙動
- 6. clickイベントでshowというイベントをemit したい Vue.component('custom-component', { template:`<div v-on:click="@emit('show’)">Button</div>` }); custom-component.js <custom-component @show="show"></custom-component> sample.blade.php v-onを省略して@にしています。
- 11. スタイル属性のwidthに値をバインド var app = newVue({ el:'#app‘, data:{ width: ‘300px’ } })； sample.js <div style=“width:@{{ width }}”></div> sample.blade.php widthの値を直接バインドしている
- 13. 素直にv-bindを使いましょう <div v-bind:style=“{ width: width }”></div> sample.blade.php
- 20. vue.jsのドキュメントに記述のmodelの実装をそ のまま書いてみる <input v-bind:value=“something” v-on:input=“(value)=>{ something = value }” > sample.blade.php アロー関数使っています
- 24. 普通にfilterを書いてみる。 追加引数ありバージョン 追加引数なしバージョン <div> @{{ value | filter() }} </div> sample.blade.php <div> @{{ value | filter2('argvalue') }} </div> sample.blade.php
- 26. 追加引数がない場合は()を省略しましょう <div> @{{ value | filter }} </div> sample.blade.php
- 28. v-modelに未定義なプロパティを入れる!! <input v-model="obj.value"> sample.blade.php var app = newVue({ el:'#app‘, data:{ obj:{} } })； sample.js
- 30. そもそも未定義プロパティは作らないよう にしましょう。 var app = newVue({ el:'#app‘, data:{ obj:{ value: true } } })； sample.js <input v-model="obj.value"> sample.blade.php
- 31. まとめ • v-onは省略しない • style属性のバインディングは必ずv-bindを使う • コンポーネントを自己終了形式で書かない • ES2015(ES6)を書かない • Filterに追加引数がない場合は()を書かない • 未定義のプロパティを参照しないよう気をつける