国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

在開始本文之前，你可能需要先了解以下相關(guān)內(nèi)容：

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

Webpack  前端模塊化代碼構(gòu)建工具

Vue組件介紹

基于vue.js高效的雙向數(shù)據(jù)綁定特性，讓我們?cè)陂_發(fā)高可用組件時(shí)可以更加專注于數(shù)據(jù)邏輯開發(fā)；

忘記DOM操作，忘記事件綁定，讓開發(fā)的專注力集中于數(shù)據(jù)上：

1、定義需要使用的數(shù)據(jù)及類型

2、在合適的時(shí)機(jī)更新數(shù)據(jù)

3、在模板上綁定數(shù)據(jù)與視圖的映射關(guān)系

4、開放對(duì)外調(diào)用接口

代碼

https://github.com/xiaoyunchen/vue-search 

代碼詳解

script

組件邏輯腳本實(shí)現(xiàn)。詳細(xì)配置屬性含義請(qǐng)參考：http://cn.vuejs.org/guide/components.html

這里引入weui樣式作為組件全局默認(rèn)樣式。

name：組件名稱，默認(rèn)作為使用組件的標(biāo)簽名

props：組件需要使用的數(shù)據(jù)定義，包括數(shù)據(jù)類型與默認(rèn)值。這些數(shù)據(jù)可以在使用組件時(shí)由父級(jí)傳入。

也就是說，props里面的這些屬性，外部在使用的時(shí)候都是可以自行進(jìn)行定義。

data：組件內(nèi)部私有數(shù)據(jù)，也就是不需要對(duì)外暴露的值。比如這里的用戶搜索時(shí)輸入的關(guān)鍵字。

methods：事件響應(yīng)方法。這里主要實(shí)現(xiàn)當(dāng)用戶選擇對(duì)應(yīng)子項(xiàng)時(shí)，將選擇的數(shù)據(jù)進(jìn)行事件派發(fā)，交由父級(jí)進(jìn)行邏輯處理。

template

組件模板定義，除了DOM結(jié)構(gòu)定義以外，還包括模板與數(shù)據(jù)的綁定方式。

v-show：綁定組件的show值，當(dāng)show為true時(shí)，組件才會(huì)顯示（display:block);

transition：組件過渡切換動(dòng)畫模式，這里請(qǐng)參考 

第9行：綁定輸入框?qū)?yīng)的model：query，以及placeholder值。

第10行：v-show定義這個(gè)清除按鈕的顯示條件：當(dāng)輸入的值長度大于0時(shí)。

另外也定義了清除按鈕的功能，將query值設(shè)置為空，同樣的，我們無需進(jìn)行DOM操作。

第13-16行：v-for：根據(jù)傳入的數(shù)組數(shù)據(jù)生成選項(xiàng)列表，同時(shí)使用了vuejs的過濾器，根據(jù)query字段進(jìn)行數(shù)據(jù)過濾。

另外，這里還定義了最大顯示條數(shù)limit。

v-text：定義了我們需要顯示的對(duì)象屬性值

v-on:click="chooseItem(item)"：對(duì)應(yīng)script中的方法，用戶選擇對(duì)應(yīng)子項(xiàng)后，組件進(jìn)行事件派發(fā)，將選擇的數(shù)據(jù)上報(bào)給父級(jí)進(jìn)行處理。

style

這里有兩個(gè)style標(biāo)簽，一個(gè)帶有scoped屬性，代表這些樣式為組件內(nèi)部單獨(dú)使用，避免因重名的問題導(dǎo)致與外部樣式重疊。

另外一個(gè)是公用樣式，外部可以覆蓋修改。主要是為了外部在使用時(shí)自定義過渡動(dòng)畫時(shí)，需要額外定義動(dòng)畫css。

使用方法

JS

• 引入并使用vue-search組件
• events中定義對(duì)使用的組件進(jìn)行響應(yīng)的事件，這里事件名與組件內(nèi)定義的派發(fā)事件名稱保持一致。如果當(dāng)前模塊有自己的方法，請(qǐng)?jiān)趍ethods中實(shí)現(xiàn)。

HTML模板
引入組件，并定義相關(guān)需要傳入的數(shù)據(jù)項(xiàng)。

代碼構(gòu)建

我們的vue文件格式進(jìn)行自定義組件開發(fā)，所以在代碼構(gòu)建時(shí)需要對(duì)vue格式的文件進(jìn)行解析，然后交由webpack進(jìn)行模塊化打包。

感謝 

再說兩句

MVVM的魅力就在于屏蔽了DOM操作，解放前端開發(fā)創(chuàng)造力，將開發(fā)專注力集中在數(shù)據(jù)的變化過程上來。

這樣一方面可以讓開發(fā)更高效，另外一方面讓開發(fā)調(diào)試過程變成相對(duì)簡單。

其二，使用MVVM框架并不代表原生JS操作DOM，以及事件模型等這些基礎(chǔ)知識(shí)就不重要。

其實(shí)不然，所有框架都是使用原生JS開發(fā)的，只有對(duì)原生JS有足夠深的了解，才能更好的掌握MVVM框架。

最后請(qǐng)大家思考一個(gè)問題：

剛才組件的實(shí)現(xiàn)中（第14行），我們將點(diǎn)擊事件綁定在了每一個(gè)item上，那如果我們的item足夠多的話，是不是等于也要綁定N多次事件？最終的事件執(zhí)行效率能高嗎？