3）輸入框和按鈕

View UI，即原先的 iView，是一套基于 Vue.js 的開源 UI 元件庫，

主要服務于 PC 界面的中背景産品；這裡我假設你已經完成了VUE基礎文法學習

那麼是時候，讓我們嘗一下ui元件帶來的前端好處；

iview官網提供了示例代碼，也友善做調試學習

首先看輸入框和按鈕元件：

《輸入框》一般存在form标簽内，用來查找、搜尋、登陸、建立等post工作

《按鈕》一般響應某個DOM事件，連結事件的處理方法，多是觸發前後端通信

1、輸入框

<Input v-model="value" placeholder="Enter something..." style="width: 300px">

v-model ==> 綁定資料變量
placeholder ==> 提示語,占位符
style ==> "width: 長度"
type => 輸入框的類型,可以是{text/password/textares/url/email/date/number/tel}
value => 使用v-model綁定資料變量
size => 輸入框的大小{高度: large, small},預設中等
maxlength => 輸入最大字元數限制
icon => 輸入框右側添加圖示, 隻在text下生效
prefix => 輸入框左側添加圖示
suffix => 資料庫右側添加圖示           

 <Input><Icon type="ios-contanct" slot="prefix" /> </Input>
 <Input><Icon type="ios-search" slot="suffix" /> </Input>           

clearable ==> 屬性：配置可一鍵清空
show-word-limit ==> 屬性：可實時顯示輸入字元數統計
password ==> 屬性：密碼類型可顯示切換
disabled ==> 屬性：禁用
autofocus ==> 屬性：自動聚焦
search ==> 屬性：開啟搜尋框，預設右側添加搜尋圖示
enter-button ==> 添加搜尋按鈕
:rows ==> 預設開啟行數，在textarea生效
:autosize ==> 開啟自動擴增模式，可設定最小最大行數，在textarea生效           

 <Input>
   <span slot="prepend">http://</span>
   <span slot="append">.com</span>
 </Input>           

2、按鈕

type ==> 按鈕的類型,可以是{primary/dashed/text/info/success/warning/error}
icon ==> 給按鈕内嵌一個左側圖示，比如搜尋:"ios-search"
shape ==> 自定義按鈕的形狀,比如"circle"
size ==> 設定按鈕的大小,可以是small default large
to ==> 實作按鈕點選跳轉，支援vue-router對象,replace替換目前頁且不能後退
target ==> 行為類似a标簽，"_brank"使用新頁面打開
ghost ==> 屬性：打開幽靈按鈕，背景設定為透明色
long ==> 屬性：使用長按鈕樣式，寬度為100%
disabled ==> 屬性：禁用按鈕點選
loading ==> 屬性：設定按鈕顯示loading加載形式
vertical ==> 屬性：開啟按鈕垂直豎行模式(ButtonGroup)