ElementUI組件 · Saber開發手冊

## ElementUI官方文檔文檔地址：[https://element.eleme.cn/#/zh-CN/component/quickstart](https://element.eleme.cn/#/zh-CN/component/quickstart) ## 最簡單的組件引入 1. 我們找到basic模塊下的button，查看對應文檔 ![](https://img.kancloud.cn/69/71/6971ea5b36c94f0bd574f7d88fd13a55_2390x1248.png) ![](https://img.kancloud.cn/7b/e6/7be6e33727a7d148677890db2c8a4886_1796x1700.png) 2. 稍做修改引入我們的Demo頁面 ![](https://img.kancloud.cn/0d/e6/0de65fc1b9c286a41406f352da5469b9_1034x920.png) 3. 打開系統查看效果 ![](https://img.kancloud.cn/09/ce/09ce90419c825fbac48e538511e7cd8c_1918x712.png) ## 常見的Select組件引入 1. 我們找到常用的select，查看文檔 ![](https://img.kancloud.cn/a4/fe/a4fed9a3e744ad5cce67af7a6362354c_2374x1898.png) 2. 稍做修改引入我們的Demo頁面 ![](https://img.kancloud.cn/40/32/4032b1cd1922cb83d30094519267c84b_1308x1888.png) 3. 打開系統查看效果 ![](https://img.kancloud.cn/4d/f3/4df32b6893092c1fbb70b695eb4668c1_1798x1144.png) 4. 點擊對應選項后console控制臺答應信息成功 ![](https://img.kancloud.cn/2b/fb/2bfb405879f74447649cf246bcd1c3d8_1756x1834.png) ## 注意 * select組件的for循環加載`<el-option>`以及`@change`執行`onChange`方法是vue中最基礎的知識點，這里不再針對基礎源碼進行贅述 * 若還不理解請務必先完整看兩遍es6的文檔以及vue的文檔 * es6：[http://es6.ruanyifeng.com/#README](http://es6.ruanyifeng.com/#README) * vue：[https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/) ## 后記 * ElementUI的組件質量非常高，數量也多，在這個章節只是簡單的教大家如何引入組件 * 若已有基礎可直接略過，如果是新手，則強烈推薦將ElementUI的每個組件都像剛剛這樣一個一個引入并且測試效果，這樣必定會給未來打下扎實的基礎，***磨刀不誤砍柴工***，請大家謹記！～