Proper Ansatz Subviews mit Vue

Question

Ich bin neu in Vue und versuchen, das Paradigma davon zu beobachten, überprüfte ich die Seite, machte die Beispiele und im Vergleich zu Angular, MVC usw., die ich im Wesentlichen bequem bin.

Mein Szenario ist wie folgt. Es gibt eine Navbar auf der statischen Landung index.html Seite. Darunter gibt es ein div markiert für meine Ansicht Anwendung #vapp. Wenn der Benutzer auf die verschiedenen Menüs klickt, möchte ich die div vapp zu mit neu besiedelt werden:

1. der HTML-Code für diese bestimmte Ansicht,
2. Daten, die in der Tabelle verwendet werden los (n) und Listen darin.

Mein Ansatz wäre, den Wert von vapp.data ändern die in der Ansicht benötigt entsprechen (das Feld meiner Viewmodel machen, Art). Allerdings bin ich ein bisschen auf dem Routing-Teil fest. Soll ich den HTML-Code im Click-Event als Vue anzeigen lassen?

Vielleicht bin ich von Angular beeinflusst aber spontan würde Ich mag eine Vorlage in einer separaten HTML-Datei, um zu sehen, die geleitet wird (geschoben, gemacht - was auch immer die richtige Namensgebung ist) in einen Teil meiner vapp div während gleichzeitig in der Lage sein soll, auf die Daten zuzugreifen, die im Datenfeld des Vue-Objekts bereitgestellt werden (und vorzugsweise daran gebunden zu sein).

Ist das der richtige Ansatz? Oder ist das Paradigma hinter Vue, ein neues Vue-Objekt für jede gerenderte Seite zu erstellen und zu pflegen?

Answer 1

Ich habe noch nie Winkel verwendet, aber in Vue können Sie einen SPA implementieren durch single file components und vue-router verwenden.

Der Ansatz besteht darin, eine Seite zu haben, die alle Ihre Komponenten bedient, und jede Komponente selbst kann aus mehreren Komponenten bestehen.Also erstens setzen Sie einen Router wie so hoch:

// import top level components 
import Foo from './foo.js' 
import Bar from './bar.js' 

// Define routes, each route serves up a component 
const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

// Create a router 
const router = new VueRouter({ 
    routes 
}) 

// Mount it to your div 
const app = new Vue({ 
    router 
}).$mount('#app') 

In Ihrem HTML Sie dann tun:

<div id="app"> 
    <!-- links you registered earlier --> 
    <p> 
    <router-link to="/foo">Go to Foo</router-link> 
    <router-link to="/bar">Go to Bar</router-link> 
    </p> 
    <!-- All content will be served up here --> 
    <router-view></router-view> 
</div> 

Jetzt wird vue dienen bis Foo und Bar wenn diese Links angeklickt werden.

Wie für Daten dienen, die jeweils Komponente in einer einzigen Datei Komponente selbst enthalten ist, so setzen Sie die Vorlage, Stil und View-Modell (Daten) in einer Datei auf diese Komponente beziehen:

<template> 
    <div> 
    {{message}} 
    <my-component></my-component> 
</div> 

</template> 

<script> 
    // import components to be used in this component 
    import myComponent from './myComponent' 

    export default{ 
    // register imported components 
    components: { 
     myComponent 
    }, 
    data(){ 
     return { 
     message: 'Foo' 
     } 
    } 
    } 
</script> 

These müssen mit etwas wie webpack oder browserify kompiliert werden.

Im Wesentlichen haben Sie am Ende eine Reihe von eigenständigen Komponenten, die vom Router bedient werden, wenn der Benutzer navigiert, und jede Komponente enthält alle Komponenten, die sie benötigt, um zu funktionieren.

Answer 2

Konrad, Ich denke, Sie suchen nach Vue-Router. https://router.vuejs.org/en/

Sie haben Ihr navbar mit <router-link> s und dann ein <router-view> die mit entsprechenden Komponente in <router-view>routes

Ihre vapp ist konfiguriert ersetzt werden.

Jede Ansicht ist eine separate VUE-Datei (Komponente).

Es ist am besten, mit webpack-vue-template mehr als einfache Komponente zu entwickeln. Wenn Sie Routing usw. benötigen, sollten Sie unbedingt die Webpack-Vorlage verwenden. https://github.com/vuejs-templates/webpack