Vue.Js有關組件的初學者

Question

我的代碼有點問題，需要一些建議。

我嘗試用Vue.js模擬diceroll。爲了確保任何diceroll是不同的，我想創建一個組件。我使用該代碼爲我app.js

Vue.component('diceroll', { 
    template: 'This is the result !' + diceroll, 
    data: function() { 
    return { 
     diceroll: 0 
    } 
    }, 
    methods: function(){ 
    diceroll: Math.floor(Math.random() * 6) + 1; 
    } 
} 
) 

var demo = new Vue({ 

    el: ' #demo', 
} 
) 

顯然，它不工作，我不知道該怎麼做。我閱讀文檔並觀看laracast的系列，但...

有人可以幫助我嗎？ ^^

Answer 1

Vue中的「methods」實際上是對象（鍵值對），其中的值是一個函數。此外，在模板中，你必須使用像這樣的鬍鬚綁定來引用變量：{{ vName }}。

我製成例如：（這裏是一個jsbin demo）

Vue.component('diceroll', { 
 
    template: 'This is the result: {{diceroll}}', 
 
    data: function() { 
 
    return { 
 
     diceroll: 0 
 
    }; 
 
    }, 
 
    methods: { 
 
    roll: function() { 
 
     this.diceroll = Math.floor(Math.random() * 6) + 1; 
 
    } 
 
    }, 
 
    ready: function() { 
 
    this.roll(); 
 
    } 
 
}); 
 

 
var demo = new Vue({ 
 
    el: '#demo' 
 
});

<script src="http://vuejs.org/js/vue.js"></script> 
 
<div id="demo"> 
 
    <diceroll></diceroll> 
 
</div>