Was ist der Unterschied zwischen `el` und `Vorlage` im vue-Komponente und app?

Einem VUE-Komponente (und die app selbst) haben eine el: und auch ein template.

Ich will verstehen, was der Unterschied ist, Wann muss ich Sie verwenden und Wann die andere:

Wenn ich ein Projekt erstellen mit Nonne CLI-von der minimal-VUE-OnsenUI Vorlage sehe ich:

new Vue({
  el: '#app',
  template: '<app></app>',
  components: { App }
});

Aus der sehr ausführlichen Dokumentation keine Beispiele, um eine lange Geschichte kurz, ich nehme an, dass die template dom-element und alles, was es ersetzt die el dom-element. (Die Schablone kann nur einen einzigen root-rechten?). Zum Beispiel : Wenn meine html-ist: 

<html>...
  <body>...
    <replaceThis></replaceThis>...

und mein vue js sagt: 

el: "replace-this", 
template: "<div id='replaced'>hi there</div>"

Dann bekomme ich : 

<html>...<body>...<div id='replaced'>hi there</div>...

aber ich kann auch schreiben: 

el: "#bla", 
template: "#blu"

Dann, wenn mein html ist 

<html>
  <body>
    <div id="bla">
       anything inside here including the surrounding div will be replaced 
    </div>
    <template id="blu">
       <span id ="replacing-html">
           when ran in span, it stays mainly in the pan
       </span> 
    </template>
  </body>
</html>

dann den div mit der id bla ersetzt werden, mit der replacing-html span elelment, die innerhalb der template. (das template-tag selbst mit allem, was in wird es immer noch der emittierten html. richtig?)

So, ich brauche, um zu verstehen:

  1. Ist die template Inhalte austauschen der el element?
  2. Muss die template nur ein einziges root-element direkt unter ihm?
  3. Bin ich richtig mit meinem ersten Beispiel?
  4. Bin ich richtig über das zweite Beispiel?
  5. Wird die template tag mit allem, was in es bleibt in der emittierten html?
  6. Was passiert in dem Fall der Nonne Vue-OnsenUI Beispiel oben, wo die el ist die gleiche wie die Vorlage: "app". Ist das nicht rekursiv? Was ersetzt wird, und mit was?
  • Bitte ändern Sie nicht Ihre Frage, nachdem Sie bereits angenommen, eine Antwort auf Ihre ursprüngliche Frage. Wenn Sie eine neue Frage erstellen eine neue post für Sie.
  • Ich habe nicht wirklich ändern, sondern aktualisiert für übersichtlichkeit. Und kommentiert das akzeptiert und richtige Antwort, durch die Ausarbeitung mit Beispielen.
InformationsquelleAutor pashute | 2017-10-06
  1. 12

    Aus der Dokumentation auf der el - option:

    Bieten die Vue-Instanz einer vorhandenen DOM-element zu montieren auf. Es kann eine CSS-Selektor-string, oder eine tatsächliche HTMLElement.

    Nachdem die Instanz bereitgestellt wird, die gelöst element zugänglich sein wird als vm.$el.

    Wenn diese option verfügbar ist bei der Instanziierung der Instanz wird sofort geben Sie Zusammenstellung; andernfalls muss der Benutzer explizit aufrufen vm.$mount (), um manuell starten Sie die Kompilierung.

    Aus der Dokumentation auf der template - option:

    Eine Zeichenfolge-Vorlage verwendet werden, wie das markup für die Vue-Instanz. Die Vorlage ersetzt das element montiert. Alle vorhandenen Markups im angehängten element wird ignoriert, es sei denn, content-distribution-slots vorhanden sind, in die Vorlage.

    Wenn der string mit # beginnt, wird es als verwendet werden eine querySelector und verwenden Sie das ausgewählte element an die innerHTML-als-Vorlage-Zeichenfolge. Dies ermöglicht die Nutzung der trick sind Vorlagen.

    In deinem Beispiel die Vue-Instanz, die Sie definieren, ist die Registrierung ein app Komponente und dann mit, dass in seiner template-definition. Es ist auch auf der Suche nach einem vorhandenen element im DOM mit der id app zu verwenden, da es das zugehörige element bei der Montage.

    Ich denke, deine Verwirrung kommt von der Tatsache, dass beide mit etwas namens "app". Haben Sie nicht benannt zu werden, die gleiche Sache.

    • Damit diese Antwort in der Tat beantwortet die folgende (modifizierte ich die Frage für clairty): 1. Ist die template-Inhalt ersetzt das el-element? JA 2. Muss die Vorlage nur ein einziges root-element direkt unter ihm? JA 3. Bin ich richtig mit meinem ersten Beispiel? JA 4. Bin ich richtig über das zweite Beispiel? JA 5. Wird der template-tag mit allem, was in es bleibt in der emittierten html? JA
    • und 6. 6. Was passiert in dem Fall der Nonne Vue-OnsenUI Beispiel oben, wo die el ist die gleiche wie die Vorlage: "app". Ist das nicht rekursiv? Was ersetzt wird, und mit was? Antwort: das app-element in den code wird ersetzt durch "sich selbst" in die HTML-aber mittlerweile ist die Komponente hat auch js und css, die mit Ihr verbunden ist, die innerhalb der "Reichweite" von dieser app. Im Falle einer navigator-tab oder-splitter, der code kann eine Seite zu zeigen, die in einem zweiten Komponente außerhalb der app. Weitere Interaktion mit dem navigator/tabs ändern können Sie die aktuell angezeigte Seite.
    • Wenn Sie wollen, um Ihren eigenen Beitrag Antworten, noch besser auf die neuen Fragen in Ihrem Beitrag, den Sie können. Dann werde ich meinen post löschen, das war die Adressierung der früheren version Ihrer Frage.
    • Nein, ich meinte die Antwort akzeptieren. Scheint, dass ich vergaß, dies zu tun. Vielen Dank für die Einstellung mich auf dem Laufenden!
    InformationsquelleAutor thanksd
Schreibe einen Kommentar