vue.jsを学習中です。
一通りvueに関するいろんな記事を見てきたのですがタイトルの通り、使い分けが未だにわからずもやもやしています。
使っているバックエンドFWはLaravelになりますが、まず、Vueとexport default
についてです。
/* app.js */ /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app' });
<!--ExampleComponent.vue--> <template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Example Component</div> <div class="panel-body"> I'm an example component! </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('ExampleComponent!!!') } } </script>
vueファイル(Component)の方ですが、感覚的にHTMLファイルにJSを埋め込んでいると思っています。
Vueじゃなくて通常のやり方の場合、HTMLファイルにJSを記述するのは個人的に好まないので外部JSファイルに切り出して読み込んでいます。
なのでその感覚でいうと、vueファイルに
<script> export default { mounted() { console.log('ExampleComponent!!!') } } </script>
を含めるのは好まないので、app.jsにdata定義などしています。
/* app.js */ /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app' data: { // ビュー切替用判定値 is_preview: false, }, created: function () { }, methods: { // 確認画面への切り替え。 inputComplete: function() { /* axiosのthen内でthisとするとthisがaxiosを参照するのでvueインスタンスは明示的にインスタンスを代入している変数名にして切り分けている */ app.is_preview = true; }, // 入力画面への切り替え。 back: function() { app.is_preview = false; }, // 処理実行。 submit: function() { }, }, });
その他は、routesで画面遷移ができるということぐらいしか知らないです。
vue.jsはコンポーネント指向とのことですが実際にはcompornentは使っておらず、Laravel側のbladeファイル内の要素に対して各ディレクティブを使って部分的にSPAを作って行っている感じです。
理由はblade側で各ディレクティブを使うことで、Laravel側の関数(oldなどformヘルパーなど)も併用できて便利だからです。
<div v-cloak v-if="is_show_company_name" class="form-group{{ $errors->has('company_name') ? ' has-error' : '' }}"> <label for="company_name" class="col-md-4 control-label">@{{ text_company_name }}</label> <div class="col-md-6"> {!! Form::text('company_name', old('company_name'), [ 'id' => 'company_name', 'class' => 'form-control', 'v-model' => 'field_company_name', 'placeholder' => '株式会社XXX YYY法律事務所 ...', 'required']) !!} @if ($errors->has('company_name')) <span class="help-block"> <strong>{{ $errors->first('company_name') }}</strong> </span> @endif </div> </div>
最後の処理だけ同期でやれば$errors->first('company_name')なども捉えられるので様々なメリットがあると思っています。
でも、やはり完全なSPAにしたいと思ったとき、これらはあまり意味を成さずroutesを使おうと検討していたところ、こういうところでcomponentが使えるのか!と思い今一度ドキュメントを読み返したりいろんな記事を見たりしているのですが、どうもexport default
の使い方がわからないのです。
全部、xxx.js側で定義したらいいんじゃないの?って思うんです。
でも、じゃあやってみればって言われたら、どういう構造で作り込んでいったら綺麗な構造を保ちながら開発できるのかがわからずそこでまた悩みます。
自分としては、以下のLaravel側の構造と合わせたくLaraval側のファイルと同名のjsファイルを作っていったら綺麗な構造を保てると思っているのですが、例えばJobController
を例にとって考えてまるのですが、これは求人ページを作成する機能を担うcontrollerで、画面でいうと求人の「作成ページ」「一覧表示ページ」「詳細表示ページ」「編集ページ」としてページがあります。
これをvueに置き換えると、Job.js
があって、そのJob.js
では多分、create.vue
show.vue
detail.vue
edit.vue
といった感じのcomponentができて、これらのcomponentで扱うdata
をJob.js
で取り扱うときのベストプラティクスな方法がわからないのです。
そもそもこういう構造にする場合、Job.js
でdataを持つのではなく、ここでまさしくそのexport default
を使うときなのでしょうか?
仮にそうした場合、各componentで定義しているdata
をJob.js
で扱うにはどうしたら良いのでしょうか?
elの定義はJob.js
が持っているので、el: '#job',
だった場合、各componentは<div id="job">
配下にあるべきだと思うのです。
そうしたら<div id="job">
はどこに記述すべきなのか?blade側?
構造を考えるので悩みます。。。
Laravelがformヘルパーのデフォルト導入をやめたのはこういう背景もあるんでしょうかね。。。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。