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

＆＃34;方法＆＃34;在Vue中实际上是对象（键值对），其中值是一个函数。此外，在模板内部，您必须使用胡扯绑定来引用变量，如下所示：{{ vName }}。

我做了一个例子:(这是一个jsbin demo）

＆＃13;

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'
});

＆＃13;

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

＆＃13;

关于组件的Vue.Js初学者

1 个答案: