由於工作需要,最近在寫一些前端的東西。經過向開發經驗豐富的前端工程師的請教之后，得出一個結論----2016年前端被玩壞了，其實對於我來說我並不是太了解這句話的深刻含義，只是覺得是不是因為前端技術突飛猛進，導致前端的技術太多太雜。不管這些了，至少我不打算淌前端這趟渾水。
我們先說一下我學vue.js的原因，最近由於需要想寫一個微信公眾平台，前端部分由於只學過angularjs，但是通過測試發現並不適合用來做微信公眾平台webapp的開發，因為這個框架並不能算是輕量級框架，如果你要求每一個訪問微信公眾平台的關注者每次都下載幾百KB的lib庫，我想這並不科學。所以決定使用vuejs，一個輕量級的前端mvmm框架。今天我們首先對vuejs的組件進行初步的學習。
1.IS特性， 首先我們來解釋一下組件這個基本的概念：組件可以擴展html，封裝可重用的代碼。同時組件也可以自定義元素，來達到對html的高度封裝。當然組件也可以是原生的html代碼，並以is特性擴展。其實這里如果大家之前有學過angularjs的話很好理解關於組件的封裝這個特性，類似與angularjs中的自定義指令。但是is特性是什么意思？我們通過一個簡單的例子來理解一下啊。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>Title</title> </head> <body> <div id="app"> <h1 is="test"></h1> </div> <script type="text/javascript"> var mytest = Vue.extend({ template: '<h1>{{a}}</h1>', data: function () { return{ a: "this is a test" } } }); var vm = new Vue({ el: "#app", components: { "test": mytest } }); </script> </body> </html>
我們解釋一下這段代碼： 首先是一個div元素，並且我們應該指定一個id或者class，這是為了我們下面能定位Vue初始化作用范圍。接下來我們從創建Vue對象開始，提供了兩個參數，el：指定了對象多用的元素，components指定了我們在元素范圍內的組件，是一些k-v對，這里就是is特性的對應規則，我們通過html元素中is制定的值來映射到我們創建的組件中，這就是我們前面說的is特性。
2.組件構造： 上面我們簡單的介紹了一下組件的概念，下面我們來介紹一下組件的構造過程，語法結構如下：
A： 創建組件：var myComponent = var.extend({.......});
B: 將構造器用作組件：Var.component（“my-component",myComponent);
當然此時我們只需要對上面的代碼進行小改動即可完成這種映射，我們只需要將html中<h1 is="test"></h1>換為我們創建的組件即可，如下：<test></test>。當然這里我們只是一個例子，在實戰中我們還應該注意自定義標簽的命名規則，應該盡量符合w3c的命名規則，即××-×××,例如：my-component（雖然並不強制）。
3.流程總結： 我們在進行自定義組件的時候應該盡量保持這樣一個流程：
A: 定義組件：
var myComponent = Vue.extend({
template: <h1>test</h1>
)}
B: 注冊： 就是將我們自定義的組件與標簽之間進行映射：
var.component（”my-component",mycomponent);
C: 創建vue實例，並在html中使用我們自定義的組件對應的標簽。
4.局部注冊： 有時間我們並不是一個組件中只能包含html代碼，在開發的過程中我們可能會在不同的組件中調用一些共同的代碼，但是我們又不想重復來寫這段程序。這樣我們就可以把我們的這段共同代碼封裝成一個組件，在其他組件中進行局部注冊即可。我們來看一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
var son = Vue.extend({
template: '<span>I am son</span>'
});
var father = Vue.extend({
template: '<h1>I am father<my-son></my-son></h1>',
components: {
'my-son':son
}
})
Vue.component("my-component",father);
var vm = new Vue({
el:'#app'
});
</script>
</body>
</html>
我們講解一下語法： 為了讓組件son能夠正常的顯示出來，我們需要在father中使用components屬性，並在屬性中對son進行注冊，然后我們在father的template中進行調用。
5. 組件構造選項問題： 組件在構造的時候，我們應該注意它的選項問題，傳入Vue構造器的多數參數也可以同時傳入到組件構造器中，除了data和el兩個參數。如果我們在使用的時候簡單的采用var data={a：××}這樣的做法的時候，我們將會發現這樣一個問題，我們構造的組件將會在全局共享data數據。正確的做法是：
A： data：我們的正確做法是使data稱為一個函數，並且在函數中返回對象：eg：data：function{ return{a:1}};
B: el： 我們必須制定el為一個函數，並且返回el對應的元素