Vue components sample

by yshrkn

HTML

<div id="app">
  <user-list></user-list>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const userDetail = {
	props: {
  	user: {
    	type: Object,
    }
  },
	template: `
  	<div>
  	  <h2>選択中のユーザ</h2>
  	  <p>{{ user.name }}</p>
    </div>
  `,
}

const userList = {
	components: {
  	'user-detail': userDetail,
  },
  data() {
  	return {
    	users: [
      	{ id: 1, name: 'ユーザ１' },
        { id: 2, name: 'ユーザ2' },
        { id: 3, name: 'ユーザ3' },
        { id: 4, name: 'ユーザ4' },
        { id: 5, name: 'ユーザ5' }
      ],
      selectedUser: {}
    }
  },
  template: `
  	<div>
    	<ul>
      	<li v-for='user in users' :key='user.id' @click='selectedUser = user'>
          {{ user.id }}&nbsp;{{ user.name }}
        </li>
      </ul>
      <user-detail :user=selectedUser></user-detail>
    </div>
  `,
}

const vm = new Vue({
  el: "#app",
  components: {
  	'user-list': userList
  },
})