VueJS 2.0 Trial

by FiNGAHOLiC

HTML

<div id="app"></div>

Babel + JSX

const componentA = Vue.extend({

});

const app = new Vue({
	el: '#app',
  template: `
  	<div>
    	<div :style="styleObject">
      	{{messageAndCount}}
			</div>
    	<div>
		    <input v-model="count">
			</div>
      <div>
      	<button @click="increment">increment</button>
			</div>
      <div v-for="color in colors" :style="{color}">
				{{color}}
      </div>
      <div v-for="user in users">
      	{{user.id}}: {{user.name}}
      </div>
		</div>
  `,
  data() {
  	return {
    	message: 'Number is ',
			count: 0,
      colors: ['red', 'blue', 'green'],
      users: [
        {id: 1, name: 'ユーザ１'},
        {id: 2, name: 'ユーザ２'}
      ],
    }
  },
  computed: {
  	messageAndCount() {
    	return `${this.message} ${this.count}`
    },
    styleObject() {
    	return {
      	color: this.count % 2 !== 0 ? 'red' : 'blue',
      }
    }
  },
  methods: {
  	increment() {
    	this.count += 1;
    },
  }
});