VueJS composant non rendu

J'ai un très de base vueJS app qui je suis après à partir du site web.

Voici le code, pourquoi est le composant pas rendu?

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>'
})
Votre <todo-item> est à l'extérieur de <div id="app">, qui est la Vue de point de montage.
ne fonctionne pas même si j'ai mis mon <ol> à l'intérieur de div#app .. lien

OriginalL'auteur qweqwe | 2017-06-28

  1. 9

    Mieux, vous pouvez utiliser le Fichier Unique Des Composants pour définir la todo-item composant à l'intérieur d'un autre fichier:

    app.vue

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

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

    composants/todo-élément.vue

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

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

    Dans de nombreux projets Vue, mondial de composants sera défini à l'aide de Vue.component, suivie par new Vue({ el: '#container' }) pour cible un élément de conteneur dans le corps de chaque page.

    Cela peut très bien fonctionner pour les petites et moyennes projets, où le JavaScript est utilisé uniquement pour améliorer certains points de vue. Dans des projets plus complexes, cependant, si votre interface est entièrement piloté par JavaScript, ces inconvénients deviennent apparents:

    • Des définitions globales force des noms uniques pour chaque composant
    • Chaîne de modèles manque syntaxique et nécessiter laide des barres obliques pour multiligne HTML
    • Pas de prise en charge de CSS signifie que, bien que le HTML et le JavaScript sont modulables en composants, le CSS est visiblement laissé de côté
    • Aucune étape de génération nous interdit de HTML et ES5 JavaScript, plutôt que de les préprocesseurs comme Carlin (anciennement Jade) et Babel

    Tous ces éléments sont résolus par un seul fichier de composants avec un .vue extension, rendue possible grâce à des outils de création tels que Webpack ou Browserify.

    Qui ne fonctionne pas dans le Violon pour moi sur Chrome. Pensez-vous que le Violon juste les charges de Vue de façon incorrecte?
    Ce n'est pas le travail en coulisse, ni dans mon local d'installation..
    J'ai ajouté quelques explications
    Vue.Component('...') déclare le composant à l'échelle mondiale. C'est mal d'utiliser Vue.Component à l'intérieur de components {}
    Vous avez raison. J'ai corrigé ça.

    OriginalL'auteur Yann Bertrand

  2. 0

    Mes composants n'a également pas été rendu.

    Dans le cas où il n'est pas évident, comme c'était à moi de prendre un coup d'oeil à la façon dont vous êtes l'importation de composants.

    Par exemple, j'ai d'abord eu:

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

    Et a dû enlever les crochets, de sorte qu'il ressemblait à ceci:

    import CurrencyConverter from "./CurrencyConverter.vue";

    Bien sûr, cela signifie dans votre composant que vous utilisez la syntaxe:

    export default {
    name: "CurrencyConverter",
}

    OriginalL'auteur tno2007