vue.js不支持ie8以下（包括ie8）不支持显熏！不支持铅歼！不支持伦吠！重要的事情說(shuō)三次
我們將one中的html組件化引入two中的html
屏幕快照 2017-01-10 下午1.37.52.png
首先去官網(wǎng)下載vue.js 然后引入
創(chuàng)建one.css來(lái)寫(xiě)樣式one.js寫(xiě)js代碼
屏幕快照 2017-01-10 下午2.12.59.png
- 首先在要引入的html中自定義一個(gè)
<my-component></my-component>標(biāo)簽
屏幕快照 2017-01-10 下午2.21.54.png
- 在one.js用Vue.component注冊(cè)全局組件
// 注冊(cè)全局組件
Vue.component("my-component",{
template:'<div class="top"><p>這是頭部!</p></div>'
})
// 創(chuàng)建實(shí)例
new Vue({
el:".wrap"
})
- 使用
template: ' '來(lái)創(chuàng)建dom
屏幕快照 2017-01-10 下午2.23.06.png
- 然后創(chuàng)建實(shí)例 使用
el:""選擇插入位置
// 創(chuàng)建實(shí)例
new Vue({
el:".wrap"
})
然后就能在后面寫(xiě)js了
然后在two.html 引入one.css 和 one.js
就這樣隨便寫(xiě)寫(xiě) 以上是全局組件
還有一種是局部組件
可以使組件僅在另一個(gè)實(shí)例/組件的作用域中可用
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
更多參考
vue中文網(wǎng)：http://cn.vuejs.org/v2/guide/
vue.js 組件化：http://www.cnblogs.com/Leo_wl/p/5702359.html
