vue.js不支持ie8以下（包括ie8）不支持！不支持！不支持！重要的事情说三次

我们将one中的html组件化引入two中的html

屏幕快照 2017-01-10 下午1.37.52.png

• 首先去官网下载vue.js 然后引入

• 创建one.css来写样式one.js写js代码

屏幕快照 2017-01-10 下午2.12.59.png

• 首先在要引入的html中自定义一个<my-component></my-component>标签

屏幕快照 2017-01-10 下午2.21.54.png

• 在one.js用Vue.component注册全局组件

// 注册全局组件
     Vue.component("my-component",{
        template:'<div class="top"><p>这是头部!</p></div>'
     })
     // 创建实例
     new Vue({
        el:".wrap"
     }) 

• 使用template: ' '来创建dom
  屏幕快照 2017-01-10 下午2.23.06.png

• 然后创建实例 使用el:""选择插入位置

 // 创建实例
     new Vue({
        el:".wrap"
     }) 

• 然后就能在后面写js了

• 然后在two.html 引入one.css 和 one.js

就这样随便写写 以上是全局组件

还有一种是局部组件
可以使组件仅在另一个实例/组件的作用域中可用

var Child = {
template: '<div>A custom component!</div>'
}

new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})

更多参考
vue中文网：http://cn.vuejs.org/v2/guide/
vue.js 组件化：http://www.cnblogs.com/Leo_wl/p/5702359.html