创建组件的两种方式：

1、局部组件声明、注册和使用：

方法一(推荐)、

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> // 局部组件声明 var myHeader = { template: ` <div>我的头可不是面团捏的</div> ` } new Vue({ el: '#app', // 组件注册 components: { myHeader }, // 组件使用 template: ` <div> <myHeader></myHeader> </div> ` })</script></body></html>

方法二、

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> // 局部组件声明 // var myHeader = { // template: ` // <div>我的头可不是面团捏的</div> // ` // } var myHeader = Vue.extend({ template: ` <div>我的头可不是面团捏的</div> ` }) new Vue({ el: '#app', // 组件注册 components: { myHeader }, // 组件使用 template: ` <div> <myHeader></myHeader> </div> ` })</script></body></html>2、全局组件的使用：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> // 组件声明加注册 Vue.component('myFoot', { template:` <div>我没有尾巴</div> ` }) new Vue({ el: '#app', template: ` <div> <!--组件的使用--> <myFoot></myFoot> </div> ` })</script></body></html>