vue iView is a good framework, but due to the relatively new framework, the use of fewer cases parity, although the official line api, api but application cases is relatively small, it is under the following using the "Page Paging" component, but we attribute this component, in fact, will feel the routine framework so it was, the use of the same.
Here is Page Page URL: https://www.iviewui.com/components/page
api Page There are many components are given, but the api to only a few use cases, as shown below
Only this information is definitely not enough, in the actual project development, the use of a page, we are not to go Binding
1. With regard to "current page":
- How to dynamically bind this page
- Monitor how changes in the current page
2. With regard to "the current number of"
- How to dynamically bind this page
- How monitor the change of the current number of pieces
Let's look at an example:
For properties current, total, page-size is used:
Api apparent from the current, total, page-size type are Number, when we define the data type number should be defined as follows:
1. How do "When we modify their own definition of the object in the page data, along with data on the components of change"
which was to go to dynamically bind three values above set, api given is this:
Our practical application:
:total="page.total" :current="page.index" :page-size="page.size"
wherein page.total, page.index, page.size we define the variable data, the figure II
course, we may not be dynamically arranged as to directly :total="1" :current="10" :page-size="50"but that in an actual development is not used for .
For attributes on-change, on-page-size-change of use:
2. How do "When we modify the current page or on the number of components, we own page objects defined in the real-time data will follow the change with it,"
which was to define the function on the component to monitor, and the component is packaged before, it has been exposed to our listening interface, and the api is written
Our practical application:
@on-change="pIndexChange" @on-page-size-change="pSizeChange"
wherein pIndexChange and pSizeChange method defined in our methods, the titanium FIG
whenever the front page before the handover, pIndexChange function will listen for new page, then we assign it to this.page.index, so sync it to do.
For the attribute page-size-opts, placement using
Of course, here, " 'top'" and "[10,20,50,100,200,500]" method of data may be inside.
Note the wording placement value, the property received value is a string, so we need to hold the string value of the property plus one more in quotes.
For attributes show-total, show-elevator, show-size, show-size is used:
simple, show-total, show- elevator, show-size, show-size type is Boolean, Boolean value attribute usage three kinds:
1. When to Boolean attributes, as long as the write attribute value is either true, so when we want to use this property, write directly on the component can, as shown in the figure below two and "1" usage;
2. If we want to write on the component properties, set it in the value of it? The following figure "2" Usage;
3. If we want to dynamically set the value of it? Of course, you can write data inside an attribute value, below "3" Usage
到这里我们可以注意到，不管属性的是什么类似的值，在绑定到组件时，我们都要把它放到字符串里的。
关于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”的默认值如“图七”