鉴于官方的文档是es5的，但是使用vue-cli生成的代码模板是es6的，而且es6的模块化等也非常方便，以后肯定是主流。
1）定义简单组件 ItemTemplate.vue
<template> <li>{{text}}</li> </template> <script> export default { props: ['text'], } </script>2）使用组件
<style> .test { text-align: left; width: 300px; margin-left:auto; margin-right:auto; } </style> <template> <div id="test" class="test"> <h1>Hello {{person.name}}!</h1> 介绍：<input type="text" v-model="person.introduce"/><br/> 年龄：<input type="text" v-model="person.age"/><br/> TODO:<br/> <li v-for="todo in person.todos"> {{todo.id}}{{todo.text}} </li> <Item text="todo"/> <button v-on:click="buttonClick">点我</button> </div> </template> <script> import Item from './ItemTemplate.vue' export default { name: 'test', components: { Item }, data() { return { person: { name: 'VUE', introduce: null, age: null, todos:[ {id:1, text:'任务1'}, {id:2, text:'任务2'}, {id:3, text:'任务3'}, ] } }; }, methods: { buttonClick() { this.person.introduce = 'i am sure'; this.person.age = 20; } } } </script>可以参考iView组件库的源码实现来学习： https://github.com/iview/iview/blob/master/src/components
