<div class="page" id="app-7">
	<user v-bind:item="item"></user>
</div>
<!-- 引用user组件 -->
.page {
  p {
    display:inline-block;
    margin: 5px;
  }
  .name {
    color:purple;
  }
  .job {
    color:green;
  }
  .hobby {
    color:#e96900;
  }
}
View Compiled
// 定义一个名为user的组件
Vue.component('user', {
  props: ['item'],
  template: '<div class="userInfo"><p class="name">{{item.name}}</p><p class="job">{{item.job}}</p><p class="hobby">{{item.hobby}}</p></div>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    item: {
      name: 'Neil',
      job: 'freelancers',
      hobby: 'folk art'
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://npmcdn.com/vue/dist/vue.min.js