Vue組件開發分享

在開始本文以前，你可能須要先了解如下相關內容：

Vue.js  一款高性能輕量化的MVVM框架

Webpack  前端模塊化代碼構建工具

 

Vue組件介紹

基於vue.js高效的雙向數據綁定特性，讓咱們在開發高可用組件時能夠更加專一於數據邏輯開發；

忘記DOM操做，忘記事件綁定，讓開發的專一力集中於數據上：

一、定義須要使用的數據及類型

二、在合適的時機更新數據

三、在模板上綁定數據與視圖的映射關係

四、開放對外調用接口

 

代碼

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屢次事件？最終的事件執行效率能高嗎？