[Vuejs]-Vue.Js Beginner about Component

by

4👍

“methods” in Vue are actually objects (key-value pair) where the value is a function. Also, inside the template you have to refer variables using mustache binding like this: {{ vName }}.

I made example: (here is a 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>
👤Miikka

Leave a comment