關於 iView
iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中后台產品。
特性
- 高質量、功能豐富
- 友好的 API ，自由靈活地使用空間
- 細致、漂亮的 UI
- 事無巨細的文檔
- 可自定義主題
以上內容乃是摘抄官網介紹，懶的寫，以下代碼以記錄最近學習的一些問題解決，IViewUI入門練習~CDN模式全局加載JS，值得注意的地方是，由於CDN模式與NPM 安裝模式，在HTML中寫入還是有一定的區別的，例如寫一個日期控件：
//CDN模式加載 <Row style="margin-left:300px"> <i-col span="12"> </i-col> <i-col span="12"> <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="選擇日期"></date-picker> </i-col> </Row> //NPM模式安裝 <Row style="margin-left:300px"> <Col span="12"> </Col> <Col span="12"> <DatePicker style="left:0px" type="daterange" placement="bottom-start" placeholder="選擇日期"></DatePicker> </Col> </Row>
可以看出，明顯的區別：DatePicker在CDN的模式下要用橫杠 一 分開的，在HTML中是不能識別字符的大小寫特性。官網也有介紹，但是由於我們平時都是直接找對應的組件，而且在組件中也沒有專門寫CDN模式的注意地方，挺頭疼的，以下是部分的區別：
在非 template/render 模式下（例如使用 CDN 引用時），組件名要分隔，例如 DatePicker 必須要寫成 date-picker。
以下組件，在非 template/render 模式下，需要加前綴 i-：
- Button:
i-button - Col:
i-col - Table:
i-table - Input:
i-input - Form:
i-form - Menu:
i-menu - Select:
i-select - Option:
i-option - Progress:
i-progress
以下組件，在所有模式下，必須加前綴 i-：
- Switch:
i-switch - Circle:
i-circle
官網傳送帶https://www.iviewui.com/docs/guide/start
以下內容做為記錄學習，給初學者的一個捷徑。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <style type="text/css"> .ivu-select-dropdown{ left:0px } </style> </head> <body> <div id="app"> <Tabs value="name1"> <Tab-pane label="我是" name="name1">你好<br /> <i-button @click="show">Click me!</i-button> <Modal v-model="visible" title="Welcome">歡迎使用 iView</Modal> </Tab-pane> <Tab-pane label="博主" name="name2" style="height:300px"> <Row :gutter="16"> <i-Col span="6"> <div style="background-color:red">col-6</div> </i-Col> <i-Col span="6"> <div style="background-color:black">col-6</div> </i-Col> <i-Col span="6"> <div style="background-color:blue">col-6</div> </i-Col> <i-Col span="6"> <div style="background-color:green">col-6</div> </i-Col> </Row> <Auto-Complete v-model="value2" @on-search="handleSearch2" placeholder="input here" style="width:200px"> <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option> </Auto-Complete> </Tab-pane> <Tab-pane label="秋意正寒" name="name3">秋意正寒 <Slider v-model="value3" range></Slider> <Row style="margin-left:300px"> <i-col span="12"> </i-col> <i-col span="12"> <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="選擇日期"></date-picker> </i-col> </Row> </Tab-pane> </Tabs> </div> <script > new Vue({ el: '#app', data: { visible: false, value3: [20, 50], value2: '', data2: [] }, methods: { show: function () { this.visible = true; }, handleSearch2 (value) { this.data2 = !value || value.indexOf('@') >= 0 ? [] : [ value + '@qq.com', value + '@sina.com', value + '@163.com' ]; } } }) </script> </body> </html>
推薦一個網友的總結使用，對於組件的理解比較全面一些，傳送門http://blog.csdn.net/u012123026/article/details/72460470
結束~