Vue组件模板

先定义全局Vue实例和数据

new Vue({ 
	el:'#component-demo',
	data: {
		posts: [
			{ id:1, title:'My journey with Vue', date:'0430' },
			{ id:2, title:'Blogging with Vue', date:'0501'  },	
			{ id:3, title:'Why Vue is so fun', date:'0502'  }
		]
	}
})

然后全局注册组件：

Vue.component('blog-post',{
	props: ['post'],
   	template: '\
       <div class="blog-post">\
           <h3>{{ post.title }}</h3>\
           <h4>{{ post.date }}</h4>\
           <div v-html="post.content"></div>\
       </div>\
   '
});

在DOM中使用：

<div id="component-demo">
    <blog-post :style="{ fontSize: postFontSize + 'px' }"
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
    ></blog-post>
</div>

局部注册组件

var app = new Vue({ 
	el: '#app’,
	components: { 
		'my-component': {
			template: '<div>Something</div>'
		}
	}
))