在開始本文之前,你可能需要先了解以下相關(guān)內(nèi)容:
Vue.js 一款高性能輕量化的MVVM框架
Webpack 前端模塊化代碼構(gòu)建工具
基于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
組件邏輯腳本實(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)行邏輯處理。
組件模板定義,除了DOM結(jié)構(gòu)定義以外,還包括模板與數(shù)據(jù)的綁定方式。
v-show:綁定組件的show值,當(dāng)show為true時(shí),組件才會(huì)顯示(display:block);
聯(lián)系客服