iView是一個很好的vue框架，但是因框架比較新，使用的案例比價少，官網上雖有api，但是api應用案例也比較少，下面來說下“Page分頁”組件的使用，但我們屬性了這個組件，會感覺到其實框架的套路也就這樣，用法差不多的。
這里給出Page分頁網址：https://www.iviewui.com/components/page
Page組件給出的api有很多，但是api的使用案例去只有幾個，如下圖
只有這些信息肯定是不夠的，在實際的項目開發上，使用一個分頁時，我們是不是該去綁定
1.關於"當前頁":
- 如何動態的綁定當前頁
- 怎么監聽當前頁的變化
2.關於"當前條數"
- 如何動態的綁定當前頁
- 怎么監聽當前條數的變化
下面來看看例子：
對於屬性current、total、page-size的使用：
從api可知current、total、page-size的類型都是Number,所以我們在data中定義時應該定義為number類型，如下：
1.如何做到“當我們修改自己定義的page對象里的數據，組件上的數據跟着改變”
這就得動態的去綁定上面的設置的3個值，api給出是這樣的：
我們的實際應用：
:total="page.total" :current="page.index" :page-size="page.size"
其中page.total，page.index，page.size是我們在data里定義的變量，如圖二
當然我們也可以不動態直接去設置如:total="1" :current="10" :page-size="50"但是這樣在實際的開發上是不合用的。
對於屬性on-change、on-page-size-change的使用：
2.如何做到“當我們修改組件上的條數或當前頁時，我們自己定義的page對象里的數據也會實時的跟着跟着改變”
這就得在組件上定義函數去監聽，而組件是經封裝過的，它已經暴露給我們監聽的接口了，api上是這樣寫的
我們的實際應用：
@on-change="pIndexChange" @on-page-size-change="pSizeChange"
其中pIndexChange和pSizeChange是我們在methods中定義的方法，如圖二
每當切換前前頁碼時，pIndexChange函數都會監聽新的頁碼，然后我們把它賦值給this.page.index ，這樣就做到了同步啦。
對於屬性page-size-opts、placement的使用
當然這里的"'top'"和"[10,20,50,100,200,500]"也可以方法data里面。
注意placement值的寫法，該屬性接收的值是字符串，所以我們需要在裝屬性值的字符串里再加多一對引號。
對於屬性show-total、show-elevator、show-size、show-size的使用：
simple、show-total、show-elevator、show-size、show-size的類型是Boolean，屬性值為布爾值的用法有3種：
1.當屬性為布爾值時，只要寫出該屬性，該屬性值就為true，所以當我們要用法這個屬性時，直接寫在組件上便可以，如圖二和下圖的“1”用法；
2.如果我們想把屬性寫在組件上，在來設置它的值呢？如下圖的“2”用法；
3.如果我們想動態的去設置該值呢？當然也是可以把屬性值寫到data里面，如下圖的“3”用法
到這里我們可以注意到，不管屬性的是什么類似的值，在綁定到組件時，我們都要把它放到字符串里的。
關於Page組件的使用大概就這些：
關於屬性的使用：
:屬性名 = “直接設置/在data里設置”
props屬性都是可以動態綁定的，動態綁定的方法就是在該屬性前加：號，然后等於一個data里面定義的變量，變量的值是什么呢？字符串？對象？布爾值？這就要看api里的的“類型”這一欄的規定啦。
關於方法的使用：
@事件名=“函數”
函數在定義時注意查看api的參數和返回值
關於默認值的使用
當我們寫上組件時，什么屬性都不寫時，如“圖五”
當我們寫上組件時，寫上"show-total, show-size, show-elevator"屬性(即設置這些屬性值為true)，
因為
show-total屬性與total屬性相關聯，
show-size屬性與page-size, page-size-opts, placement屬性相關聯；
show-elevator屬性與curren屬性相關聯
所以
當我們寫上"show-total, show-size, show-elevator"屬性時會自動綁定上
“curren, total, page-size, page-size-opts, placement”的默認值如“圖七”