VueJS Komponente nicht gerendert wird

Ich habe eine sehr einfache vueJS app, die ich von der website.

Hier den code, warum ist die Komponente nicht gerendert wird?

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<div>
<ol>
  <todo-item></todo-item>
</ol>
</div>

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', {
    template: '<li>This is a list item</li>'
})
Ihre <todo-item> außerhalb der <div id="app">, die die Vue-mount-Punkt.
funktioniert nicht, auch wenn ich meine <ol> innen div#app .. link

InformationsquelleAutor qweqwe | 2017-06-28

  1. 9

    Besser, können Sie die Einzelne Datei-Komponenten zu definieren, die todo-item Komponente innerhalb einer anderen Datei:

    app.vue

     import TodoItem from './components/todo-item'

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    TodoItem
  }
})

    Komponenten/todo-Element.vue

    <template>
  <li>This is a list item</li>
</template>

<script>
  export default {
    name: 'todo-item'
  }
</script>

    In vielen Vue-Projekte, Globale Komponenten werden definiert mit Vue.component, gefolgt von new Vue({ el: '#container' }) Ziel ein container-element, in den Körper auf jeder Seite.

    Diese arbeiten können sehr gut für kleine bis mittlere Projekte, bei denen JavaScript nur zum verbessern von bestimmten Ansichten. In komplexeren Projekten jedoch, oder wenn Ihr frontend ist völlig angetrieben von JavaScript, diese Nachteile offensichtlich geworden:

    • Globalen Definitionen Kraft eindeutigen Namen für jede Komponente
    • String Vorlagen Mangels syntax-highlighting und erfordern hässlich Schrägstriche für mehrzeilige HTML -
    • Keine CSS-Unterstützung bedeutet, dass, während HTML und JavaScript sind modularisiert in Komponenten, CSS ist Auffällig ausgelassen
    • Keine build-Schritt schränkt uns zu HTML und JavaScript, ES5, eher als Präprozessoren wie Mops (ehemals Jade) und Babel

    Alle diese werden gelöst, indem einzelne-Datei-Komponenten mit einer .vue Erweiterung möglich mit build-tools wie Webpack oder Browserify.

    Das funktioniert nicht in der Geige für mich auf Chrome. Denkst du, dass die Geige nur Lasten Vue falsch?
    Das funktioniert nicht, in der Geige, noch in meinem lokalen setup..
    Ich habe einige Erklärungen Hinzugefügt
    Vue.Component('...') erklären die Komponente Global. Es ist falsch zu verwenden Vue.Component innen components {}
    Du hast Recht. Ich habe das behoben.

    InformationsquelleAutor Yann Bertrand

  2. 0

    Meine Komponenten wurde auch nicht Rendern.

    In Fall ist es nicht so offensichtlich, wie es für mich war, nehmen Sie einen Blick an, wie Sie sind, importieren von Komponenten.

    Beispielsweise die ersten, die ich hatte:

    import { CurrencyConverter } from "./CurrencyConverter.vue";

    Musste und entfernen Sie die Klammern, so sah es so aus:

    import CurrencyConverter from "./CurrencyConverter.vue";

    Natürlich, dies bedeutet, dass in der Komponente, die Sie verwenden Sie die syntax:

    export default {
    name: "CurrencyConverter",
}

    InformationsquelleAutor tno2007

Schreibe einen Kommentar