VueJS componente non di rendering

Ho un molto di base vueJS app che sto seguendo dal sito web.

Ecco il codice, perché è il componente non di rendering?

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>'
})
Il <todo-item> è al di fuori di <div id="app">, che è la Vue punto di montaggio.
non funziona anche se ho messo il mio <ol> all’interno div#app .. link

OriginaleL’autore qweqwe | 2017-06-28

One Reply
  1. 8

    Meglio, è possibile utilizzare il Singolo File Componenti per definire il todo-item componente all’interno di un altro file:

    app.vue

     import TodoItem from './components/todo-item'
    
     new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      components: {
        TodoItem
      }
    })

    componenti/todo-voce.vue

    <template>
      <li>This is a list item</li>
    </template>
    
    <script>
      export default {
        name: 'todo-item'
      }
    </script>

    In molti Vue progetti, i componenti globali saranno definiti mediante Vue.component, seguita da new Vue({ el: '#container' }) a destinazione di un elemento contenitore, nel corpo di ogni pagina.

    Questo può funzionare molto bene per le piccole e medie progetti, in cui JavaScript è utilizzato solo per migliorare alcuni punti di vista. Nei progetti più complessi, tuttavia, o quando il frontend è interamente guidato da JavaScript, questi svantaggi diventare evidente:

    • Globale definizioni forza di nomi univoci per ogni componente
    • Stringa modelli mancanza di evidenziazione della sintassi e richiedono brutto barre per multiline HTML
    • Senza il supporto dei CSS significa che, mentre l’HTML e JavaScript sono modulare di componenti, il CSS è vistosamente a sinistra fuori
    • Nessun passaggio di generazione limita noi di HTML e ES5 JavaScript, piuttosto che preprocessori come il Pug (precedentemente Giada) e Babel

    Tutti questi sono risolto da un singolo file di componenti con un .vue estensione, resa possibile costruire strumenti come Webpack o Browserify.

    Che non e il Violino per me su Chrome. Pensi che il Violino solo carichi Vue in modo non corretto?
    Questo non e il violino, né nel mio locale di installazione..
    Ho aggiunto alcune spiegazioni
    Vue.Component('...') dichiarare il componente a livello globale. E ‘ sbagliato usare Vue.Component all’interno components {}
    Hai ragione. Ho risolto.

    OriginaleL’autore Yann Bertrand

Lascia un commento