web-dev-qa-db-ja.com

単一ページのアプリケーションではなく、複数ページのVuejs js

laravel 5.3およびvuejs 2を使用してアプリケーションを構築する必要があります。jqueryを使用するのではなく、双方向バインディングを使用する必要があるためです。

ブレードテンプレートを使用してビューを設定する必要があります。次に、以下で説明するように、各ページでvuejsを使用する必要があります。

resources/asserts/js/components/List.vue

<script>
    const panel = new Vue({
        el: '#list-panel',
        name: 'list',
        data: {               
           message: 'Test message'
        },
        methods: {
            setMessage: function(){
                this.message = 'New message';
            }
        }
   })
</script>

resources/asserts/views/post/index.blade.php

<div id="panel" class="panel panel-default">
    <div class="panel-heading">Posts</div>

    <div class="panel-body">
       <p>{{ message }}</p>
       <button v-on:click="setMessage">SET</button>
    </div>
</div>

Create.blade.phpなどにAdd.vueがあります... Add.vueにel: '#add-panel'

これが私のapp.jsです。私はすでに次のようにデフォルトのコードをコメントしました。

Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));

// const app = new Vue({
//     el: '#app'
// });

ほとんどのドキュメントとチュートリアルをほとんどチェックしませんでした。ただし、単一のjsファイルを使用します。それらは、jsだけでなく、テンプレートを持つ小さな要素にコンポーネントを使用します。

この方法でvuejsを使用することは可能ですか？ app.jsを使用する必要がありますか。これを行う最良の方法は何ですか？

laravelvue.jslaravel-5.3vue-componentvuejs2
13
Dinuka Thilanga
  1. 別のJSファイルのすべてのページに「アプリ」を作成します。ページ名と同じ名前を使用して、それが属する場所を明確にすることをお勧めします。
  2. メインdivにファイルと同じ名前を付けます（fileName.php + asset/js/fileName.js）。
  3. 使用する #fileName' as yourel`
  4. ブレードでの使用@{{ vue expressions }}は、Bladeにこれをスキップさせ、VueJSがそれを処理できるようにします。

できた幸運を！

11
M U

ブレードファイル内に少しのvuejsを振りたい場合、基本的に2つのオプションがあります。

オプション1

グローバルVueコンポーネントを宣言

例

// in laravel built in app.js file

Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));

const app = new Vue({
    el: '#app'
});

ルートdivのIDが#appであるメインレイアウトファイルを作成します

// layout.blade.php

<html>
  <header></header>
  <body>
    <div id="app">
      @yield('content')
    </div>
  </body>
</html>

最後にあなたの意見で：

//some-view.blade.php

@extends('layout')

@section('content')
 <foo :prop="{{ $someVarFromController }}"></foo>
@endsection

オプション＃2

これは私が現在使用しているものであり、実際により多くの柔軟性を与えてくれます

// in laravel built in app.js file

const app = new Vue({
    el: '#app',
    components: {
      Foo: require('./components/Foo.vue'),
      Bar: require('./components/Bar.vue')
    }
});

レイアウトファイルでは、vuejs動的コンポーネントを使用します

<html>
  <header></header>
  <body>
    <div id="app">
      @if (isset($component))
        <component :is={{ $component }} inline-template>
      @endif

         @yield('content')

     @if (isset($component))
       </component>
     @endif
    </div>
  </body>
</html>

あなたの意見では：

//some-view.blade.php

@extends('layout', ['component' => 'foo'])

@section('content')
   // all the vue stuff available in blade
   // don't forget to use the @ symbol every time you don't want blade to parse the expression.
  // Example: @{{ some.vue.propertie }}
@endsection

そして最後に、いつものようにvueコンポーネントを作成できます

// resources/assets/js/components/foo.vue

<script>
export default {
 // the component
}
</script>
26
Helder Lucas