Компонент Vue.js не работает

Question

Я не могу понять, как заставить компоненты работать. Без компонента он работает нормально (прокомментированный код).

Вот мой HTML:

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

Вот мой Vue.js код:

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) Это не работает, если я не раскомментировать комментировал код.

2) JSFiddle: http://jsfiddle.net/tjkbf71h/3/

Answer 1

Вам нужно включить этот компонент в HTML-разметке:

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

, а затем 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 не знает, где и как сделать свой компонент.

Вы можете использовать встроенные строки шаблонов, монтировать их в тег шаблона или использовать отдельные компоненты файлов - с помощью веб-пакета или браузера.

Во-первых, я предлагаю вам прочитать документы

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

Answer 3

Возможно, вы хотите использовать компонент одного файла, если считаете его уродливым. https://vuejs.org/v2/guide/single-file-components.html