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

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
Vue組件開發(fā)分享

在開始本文之前,你可能需要先了解以下相關(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


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í)行效率能高嗎?

 

打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
vue 分享記錄
大家一直想要的Vue.js資源
Vue.js介紹以及優(yōu)缺點(diǎn)
前端三大框架(vue,angular,react)
Vue 淺談前端js框架vue
【9】Vue.js開發(fā)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服