Vue.jsコンポーネントが動作しない

Question

コンポーネントを動作させる方法を理解できないようです。コンポーネントがなければ、それはうまく動作します（コメント付きコード）。ここで

は私のHTMLです：

Vue.component('my-component', { 
    // data: function() { 
    //  return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 } 
    // }, 
    computed: { 
     total: function() { 
      return(this.clicks * (this.exposure * 0.001/10)/700).toFixed(8) 
     }, 
     cpc: function() { 
      return((this.total)/(this.clicks > 0 ? this.clicks : 1)).toFixed(8) 
     } 
    } 
}); 

const app = new Vue({ 
    el: '#app', 
    data: { 
     interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 
    }, 
    // computed: { 
    //  total: function() { 
    //   return(this.clicks * (this.exposure * 0.001/10)/700).toFixed(8) 
    //  }, 
    //  cpc: function() { 
    //   return((this.total)/(this.clicks > 0 ? this.clicks : 1)).toFixed(8) 
    //  } 
    // } 
}); 

1）私がコメントしたコードのコメントを解除しない限り、これは動作しません：

<strong>Total Price:</strong> <span v-text="total"></span><br> 
<strong>CPC:</strong> <span v-text="cpc"></span> 

ここに私のVue.jsコードです。

2）JSFiddle：http://jsfiddle.net/tjkbf71h/3/

Answer 1

https://vuejs.org/v2/guide/components.html

を読むことをお勧めコンポーネントは、インラインまたはそれ以外のテンプレートでなければなりません。

Vue.component('my-component', { 
    template: '<div>Your HTML here</div>', 
    data: function() { 
     return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 } 
    }, 
// 

Answer 2

どこで、どのようにコンポーネントをレンダリングするためにVueのは知りませんので、あなたは、あなたのコンポーネント用のテンプレートを定義していませんでした。

インラインテンプレートストリングを使用したり、テンプレートタグにマウントしたり、単一ファイルコンポーネント（webpackまたはbrowserifyを使用）を使用することができます。あなたがこのの一部として表示する

<div id="app"> 
    <my-component></my-component> 
</div> 

そしてHTML：まず

は、私はあなたがドキュメント

あなたのHTMLマークアップでコンポーネントを含める必要が

Answer 3

あなたはそれが醜いと思う場合は多分あなたは単一のファイルコンポーネントを使用したいと思います。 https://vuejs.org/v2/guide/single-file-components.html