web-dev-qa-db-ja.com

VueJSコンポーネントがレンダリングされない

ウェブサイトからフォローしている非常に基本的なvueJSアプリがあります。

こちら コード、なぜコンポーネントがレンダリングされないのですか？

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
15
qweqwe

より良いのは、 Single File Components を使用して、別のファイル内で_todo-item_コンポーネントを定義できることです。

app.vue

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

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

components/todo-item.vue

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

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

多くのVue=プロジェクトでは、グローバルコンポーネントは_Vue.component_を使用して定義され、その後にnew Vue({ el: '#container' })が続き、各ページの本文のコンテナ要素をターゲットにします。

これは、特定のビューを拡張するためだけにJavaScriptが使用される小規模から中規模のプロジェクトで非常にうまく機能します。ただし、より複雑なプロジェクトでは、またはフロントエンドが完全にJavaScriptで駆動される場合、これらの欠点が明らかになります。

  • グローバル定義すべてのコンポーネントに一意の名前を強制する
  • 文字列テンプレートは構文の強調表示を欠いており、複数行のHTMLにはforいスラッシュが必要です
  • CSSサポートなしは、HTMLとJavaScriptがコンポーネントにモジュール化されている一方で、CSSが著しく除外されていることを意味します
  • ビルドステップなしは、Pug（以前のJade）やBabelなどのプリプロセッサではなく、HTMLとES5 JavaScriptに制限します

これらはすべて、_.vue_拡張子を持つ単一ファイルコンポーネントによって解決され、WebpackやBrowserifyなどのビルドツールで可能になります。

12
Yann Bertrand
  • コンポーネントを使用します指定されたelマウント要素内
  • コンポーネントを定義しますbefore Vue instance with new Vue
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>
38
yuriy636

コンポーネントもレンダリングされませんでした。

私にとってそうであるように、それがそれほど明白ではない場合、コンポーネントをどのようにインポートしているかを見てください。

たとえば、最初に私が持っていた：

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

ブラケットを削除する必要があったため、次のようになりました。

import CurrencyConverter from "./CurrencyConverter.vue";

もちろん、これはコンポーネントで次の構文を使用することを意味します。

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

同様の問題があります。 @ yuriy636によると、まだレンダリングされていません。そして、次のようなコンポーネントフィールドにコンポーネント宣言があることがわかりました。

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    'todo-item': 'todo-item',  <--- see this ?
  }
})

'todo-item': 'todo-item'を削除した後。できます！

これが他の人を助けることを願っています！

0
Anyany Pan