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
