在開始本文之前，你可能需要先了解以下相關內容：
Vue.js 一款高性能輕量化的MVVM框架
Webpack 前端模塊化代碼構建工具
Vue組件介紹
基於vue.js高效的雙向數據綁定特性，讓我們在開發高可用組件時可以更加專注於數據邏輯開發；
忘記DOM操作，忘記事件綁定，讓開發的專注力集中於數據上：
1、定義需要使用的數據及類型
2、在合適的時機更新數據
3、在模板上綁定數據與視圖的映射關系
4、開放對外調用接口
代碼
https://github.com/xiaoyunchen/vue-search
代碼詳解
script
組件邏輯腳本實現。詳細配置屬性含義請參考：http://cn.vuejs.org/guide/components.html
這里引入weui樣式作為組件全局默認樣式。
name：組件名稱，默認作為使用組件的標簽名
props：組件需要使用的數據定義，包括數據類型與默認值。這些數據可以在使用組件時由父級傳入。
也就是說，props里面的這些屬性，外部在使用的時候都是可以自行進行定義。
data：組件內部私有數據，也就是不需要對外暴露的值。比如這里的用戶搜索時輸入的關鍵字。
methods：事件響應方法。這里主要實現當用戶選擇對應子項時，將選擇的數據進行事件派發，交由父級進行邏輯處理。
template
組件模板定義，除了DOM結構定義以外，還包括模板與數據的綁定方式。
v-show：綁定組件的show值，當show為true時，組件才會顯示（display:block);
transition：組件過渡切換動畫模式，這里請參考 http://cn.vuejs.org/guide/transitions.html 這里定義的過渡動畫，需要在css中自行實現。組件內部已經默認實現了slide切換動畫。
第3行：v-on:click="show=false" 這里為組件遮罩層綁定了響應事件，簡單的將show的值改為false，vue會自動根據雙向數據綁定特性將組件隱藏，無需我們進行操作。
第9行：綁定輸入框對應的model：query，以及placeholder值。
第10行：v-show定義這個清除按鈕的顯示條件：當輸入的值長度大於0時。
另外也定義了清除按鈕的功能，將query值設置為空，同樣的，我們無需進行DOM操作。
第13-16行：v-for：根據傳入的數組數據生成選項列表，同時使用了vuejs的過濾器，根據query字段進行數據過濾。
另外，這里還定義了最大顯示條數limit。
v-text：定義了我們需要顯示的對象屬性值
v-on:click="chooseItem(item)"：對應script中的方法，用戶選擇對應子項后，組件進行事件派發，將選擇的數據上報給父級進行處理。
style
這里有兩個style標簽，一個帶有scoped屬性，代表這些樣式為組件內部單獨使用，避免因重名的問題導致與外部樣式重疊。
另外一個是公用樣式，外部可以覆蓋修改。主要是為了外部在使用時自定義過渡動畫時，需要額外定義動畫css。
使用方法
JS
- 引入並使用vue-search組件
- events中定義對使用的組件進行響應的事件，這里事件名與組件內定義的派發事件名稱保持一致。如果當前模塊有自己的方法，請在methods中實現。
HTML模板
引入組件，並定義相關需要傳入的數據項。
代碼構建
我們的vue文件格式進行自定義組件開發，所以在代碼構建時需要對vue格式的文件進行解析，然后交由webpack進行模塊化打包。
感謝 vue-loader 讓上述變成可能。
因此我們只需要在webpack中為vue文件配置對應的加載器即可：
{test: /\.vue/, loader: "vue" }
再說兩句
MVVM的魅力就在於屏蔽了DOM操作，解放前端開發創造力，將開發專注力集中在數據的變化過程上來。
這樣一方面可以讓開發更高效，另外一方面讓開發調試過程變成相對簡單。
其二，使用MVVM框架並不代表原生JS操作DOM，以及事件模型等這些基礎知識就不重要。
其實不然，所有框架都是使用原生JS開發的，只有對原生JS有足夠深的了解，才能更好的掌握MVVM框架。
最后請大家思考一個問題：
剛才組件的實現中（第14行），我們將點擊事件綁定在了每一個item上，那如果我們的item足夠多的話，是不是等於也要綁定N多次事件？最終的事件執行效率能高嗎？