web-dev-qa-db-fra.com

Vuejs js pour plusieurs pages, pas pour une seule application

J'ai besoin de construire une application en utilisant laravel 5.3 et vuejs 2, car j'ai besoin d'utiliser une liaison bidirectionnelle plutôt que d'utiliser jquery.

J'ai besoin de configurer les vues avec des modèles de lame. Ensuite, je dois utiliser vuejs dans chaque page comme mentionné ci-dessous.

ressources/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>

ressources/assert/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>

Il y a Add.vue pour créer.blade.php etc ... Dans Add.vue el: '#add-panel'

Ceci est mon app.js. J'ai déjà commenté le code par défaut comme suit.

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

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

J'ai à peine vérifié la plupart des documentations et des tutoriels. Mais ils utilisent un seul fichier js. Ils utilisent des composants pour les petits éléments avec modèle, pas seulement js.

Est-il possible d'utiliser vuejs de cette façon? Dois-je utiliser app.js. Quelle est la meilleure façon de procéder?

laravelvue.jslaravel-5.3vue-componentvuejs2
13
Dinuka Thilanga
  1. Créez votre "application" pour chaque page dans des fichiers JS séparés. La bonne pratique consisterait à utiliser le même nom que le nom de la page pour savoir clairement où il appartient.
  2. Le nom que vous divisez le même que le fichier (fileName.php + assets/js/fileName.js).
  3. Utilisation #fileName' as yourel`
  4. en utilisation lame @{{ vue expressions }} pour laisser Blade ignorer ceci et permettre à VueJS de gérer cela.

Terminé. Bonne chance!

11
M U