欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

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

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

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

Vue組件介紹

基于vue.js高效的雙向數據綁定特性，讓我們在開(kāi)發(fā)高可用組件時(shí)可以更加專(zhuān)注于數據邏輯開(kāi)發(fā)；

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

1、定義需要使用的數據及類(lèi)型

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

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

4、開(kāi)放對外調用接口

代碼

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

代碼詳解

script

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

這里引入weui樣式作為組件全局默認樣式。

name：組件名稱(chēng)，默認作為使用組件的標簽名

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

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

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

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

template

組件模板定義，除了DOM結構定義以外，還包括模板與數據的綁定方式。

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

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

第9行：綁定輸入框對應的model：query，以及placeholder值。

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

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

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

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

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

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

style

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

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

使用方法

JS

• 引入并使用vue-search組件
• events中定義對使用的組件進(jìn)行響應的事件，這里事件名與組件內定義的派發(fā)事件名稱(chēng)保持一致。如果當前模塊有自己的方法，請在methods中實(shí)現。

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

代碼構建

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

感謝 

再說(shuō)兩句

MVVM的魅力就在于屏蔽了DOM操作，解放前端開(kāi)發(fā)創(chuàng )造力，將開(kāi)發(fā)專(zhuān)注力集中在數據的變化過(guò)程上來(lái)。

這樣一方面可以讓開(kāi)發(fā)更高效，另外一方面讓開(kāi)發(fā)調試過(guò)程變成相對簡(jiǎn)單。

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

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

最后請大家思考一個(gè)問(wèn)題：

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