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

你沒有為你的組件定義模板，所以 Vue 不知道在哪里以及如何渲染你的組件。

您可以使用內聯模板字符串，將其掛載到模板標簽，或者使用單文件組件 - 使用 webpack 或 browserify。

首先，我建議你閱讀文檔

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

Answer 2

您需要在 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 3

如果您認為它很難看，也許您想使用單個文件組件。 https://v2.vuejs.org/v2/guide/single-file-components.html

Answer 4

對象中的語法錯誤從對象的最后一項中刪除逗號，您的代碼將正常運行