元件其實就是乙個擁有樣式、動畫、js邏輯、html結構的綜合塊。
前端元件化確實讓大的前端團隊更高效的開發前端專案。而作為前端比較流行的框架之一，vue 的元件化也做的非常徹底，而且有自己的特色。尤其是她單檔案元件開發的方式更是非常方便，而且第三方工具支援也非常豐富，社群也非常活躍，第三方元件也呈井噴之勢。當然學習和使用 vue 的元件也是我們的最重要的目標。
1. 全域性擴充套件方法vue.extend
vue提供了乙個全域性的api，vue.extend 可以幫助我們對 vue 例項進行擴充套件，擴充套件完了之後，就可以用此擴充套件物件建立新的 vue 例項了。 類似於繼承的方式。
語法：vue.extend( options )
引數： options
用法：使用基礎 vue 構造器，建立乙個「子類」
引數是乙個包含元件選項的物件
data 選項是特例，需要注意: 在 vue.extend() 中它必須是函式
id="mount-point">
div>
// 建立構造器
var profile = vue.extend(} } aka }
', // 建立的vue例項時，data 可以是 object 也可以是 function，但是在擴充套件
的時候，data必須是乙個函式，而且要返回值奧。
data: function
() }
})script>
// 建立 profile 例項，並掛載到乙個元素上。
// .$mount() 方法跟設定 el屬性效果是一致的。
new profile().$mount('#mount-point')
結果如下：
walter white aka heisenbergp>
div>
var myvue = vue.extend(} - } - }
", data: function
() }
});})
script>
當然上面的方式只是能讓我們繼承vue例項做一些擴充套件的動作。看vue中如何建立乙個元件並註冊使用。
vue提供了乙個全域性註冊元件的方法：vue.component
語法： vue.component( tagname, options)
引數： tagname 元件的名字，可以當html標籤用，注意元件的名字都是小寫，而且最好有橫線和字母組合。
[options] 元件的設定
用法：註冊或獲取全域性元件。註冊還會自動使用給定的 id 設定元件的名稱
// 註冊元件，傳入乙個擴充套件過的構造器
vue.component('my-component', vue.extend())
// 註冊元件，傳入乙個選項物件（自動呼叫 vue.extend）
vue.component('my-component', )
// 獲取註冊的元件（始終返回構造器）
var mycomponent = vue.component('my-component')
簡單demo：
id="example">
my-component>
div>
// 註冊乙個元件
vue.component('my-component',)
// 建立根例項
new vue()
script>
rid="rbas"
txt="籃球"
val="1">
radio-tag>
:rid="demoid"
:txt="demotext"
:val="demoval">
radio-tag>
div>
// 定義元件模板，模板有且只有乙個根元素
var temp ="}
"// 註冊乙個全域性的元件
// 元件的名字不能有大寫字母，跟react有區別，另外元件名最好的小寫字母加橫線組合
vue.component('radio-tag',
}});
//初始化乙個vue例項要在註冊元件之後
data:
});script>
注意結果點:
+ 元件的名字都必須是小寫【其實是非必須，但是為了不麻煩就強制吧】！！！而且建議是小寫字母和橫線的組合比如： my-radiobtn
+ 編寫元件**最好配合 vue 的 chrome 外掛程式：vue-devtool
+ 元件可以返還自己的資料，但是必須是函式。data必須是function
3. 區域性註冊元件
全域性註冊元件就是使用全域性api vue.componet(id, )就行了，當然我們有時候需要註冊乙個區域性模組的自己用的元件。那麼就可以用下面的方式了。
var child =
new vue()
使用元件的時候，經常需要在父元件中為子元件中插入一些標籤等。
當然其實可以通過屬性等操作，但是比較麻煩，直接寫標籤還是方便很多。
vue 提供了 slot 協助子元件對父容器寫入的標籤進行管理。
當父容器寫了額外的內容時， 如果子元件恰好有乙個slot標籤，那邊子容器的slot標籤會被父容器寫入的內容替換掉。
比如下面的例子：
這裡是父容器寫入的h3>
my-slot>
} my-slot>
my-slot>
div>
// 反引號：可以定義多行字串。
var temp = `
這裡是子元件h1>
slot標籤會被父容器寫的額外的內容替換掉，如果父容器沒有寫入任何東西，此標籤將保留！slot>
div>
`;//如果定義的元件為 my-slot，那麼用元件的時候
my-slot>
vue.component('my-slot',);
//初始化乙個 vue例項
data:
});
這裡是子元件h1>
這裡是父容器寫入的h3>
div>
這裡是子元件h1>
div>
這裡是子元件h1>
slot標籤會被父容器寫的額外的內容替換掉，如果父容器沒有寫入任何東西，此標籤將刪除！
div>
div>
元件化開發之vue
今天寫了寫vue的元件化開發demo，有些小的心得。分享一下。元件化意味著 可以復用，呼叫元件就可以了。然後可以通過元件呼叫元件的相關能力。例如以前我做元件化開發的乙個小專案 原生js元件的實現 這就是乙個 了，分割成以頁面為一級單位，元件為二級單位的乙個格局，然後呼叫addpage addcomp...
元件化開發之定義區域性元件
1.元件是什麼？有什麼用 擴充套件 html 元素，封裝可重用的 目的是復用 例如 有乙個輪播，可以在很多頁面中使用，乙個輪播有js，css，html 元件把js，css，html放到一起，有邏輯，有樣式，有html 2.區域性元件的定義和使用 doctype html html lang en h...
android 元件化開發
android 專案中隨之時間專案增大，執行時間也大，還有就是，元件化方便 管理和測試，這就是元件化好處 這裡就不多說了，既然你能找元件化開發，證明你對它是有一定的了解，我就直接說流程了，第二 在gradle.propertles 中設定乙個引數 如isdebug false 方便執行測試modul...