web-dev-qa-db-fra.com

Le composant VueJS n'est pas rendu

J'ai une application très basique VueJS que je suis sur le site.

Voici le code, pourquoi le composant n'est 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>'
})
javascriptvue.jsrenderingvue-component
9
qweqwe

Mieux, vous pouvez utiliser les composants de fichier unique pour définir le composant todo-item dans un autre fichier:

app.vue

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

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

composants/todo-item.vue

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

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

Dans de nombreux projets Vue, les composants globaux seront définis à l'aide de Vue.component, suivi de new Vue({ el: '#container' }) pour cibler un élément conteneur dans le corps de chaque page.

Cela peut très bien fonctionner pour des projets de petite à moyenne taille, où JavaScript n’est utilisé que pour améliorer certaines vues. Toutefois, dans des projets plus complexes, ou lorsque votre interface est entièrement gérée par JavaScript, ces inconvénients sont évidents:

  • Définitions globales forcent des noms uniques pour chaque composant
  • String templates manque de mise en évidence de la syntaxe et nécessite des barres obliques pour HTML multi-lignes
  • Pas de support CSS signifie que bien que HTML et JavaScript soient modularisés en composants, CSS est visiblement omis
  • Aucune étape de construction nous limite au HTML et à JavaScript ES5, plutôt qu'aux pré-processeurs comme Pug (anciennement Jade) et Babel

Tous ces problèmes sont résolus par des composants à fichier unique dotés d'une extension .vue, rendus possibles par des outils de construction tels que Webpack ou Browserify.

8
Yann Bertrand

Vue.component('todo-item', {
  template: '<li>This is a list item</li>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
  <p>{{ message }}</p>
</div>

<div>

</div>

29
yuriy636

Mes composants n'étaient pas non plus rendus.

Au cas où ce ne serait pas si évident, comme cela m’était le cas pour moi, regardez comment vous importez des composants.

Par exemple, j'ai d'abord eu:

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

Et dû enlever les crochets, donc ça ressemblait à ça:

import CurrencyConverter from "./CurrencyConverter.vue";

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

export default {
    name: "CurrencyConverter",
}
0
tno2007