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.лезвие.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>

Есть добавить.vue для создания.лезвие.PHP и др... вдобавок.vue el: '#add-panel'

Это мое приложение.JS. Я уже прокомментировал код по умолчанию выглядит следующим образом.

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

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

Я с трудом проверил большинство документов и учебных пособий. Но они используют один файл js. Они используют компоненты для небольших элементов с шаблоном, а не только js.

Можно ли использовать vuejs таким образом? Нужно ли мне использовать приложение.JS. Как лучше всего это сделать?

2 7
vue.js laravel vuejs2 vue-component

2 ответа:

  1. Создайте свое приложение для каждой страницы в отдельных файлах JS. Хорошей практикой было бы использовать то же имя, что и имя страницы, чтобы понять, где она находится.
  2. имя основного div совпадает с именем файла (fileName.php + assets/js / fileName.в JS).
  3. Use #fileName' as yourel '
  4. в blade используйте @{{ vue expressions }}, чтобы позволить Blade пропустить это и позволить VueJS обрабатывать это.

Готово. Удачи вам!

7

Если вы хотите добавить немного vuejs в файлы blade, у вас есть два основных варианта:

Вариант №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 имеет идентификатор #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>
17