簡單介紹 element-ui一些元件
上一篇介紹了函式的基本用法，這一篇主要介紹Element-ui的一些常用元件配合函式使用，程式碼可能會比較多一點。
一開始先介紹一下Element-UI，官網為https://element.eleme.io/#/zh-CN ，有中文頁面雖然是簡體中文（本篇會把簡體中文都打成繁體中文），但是對科技英文比較不熟的，應該比較好瞭解內容。Element-Ui為一個提供許多元件的套件，大部分是配合著Vue使用、不過也有支援React跟Angular的版本，只是比較少看到有人使用就是了。官網上面有許多元件頁面，每個頁面也會提供使用方式的程式碼，這篇簡單介紹幾個，其實操作方式都大同小異，會用一個其他大概也問題不大了。
1. Input 輸入框
這個應該是每個人寫網頁應用都會使用到的元件，就是要使用者打字在裡面的那種長方形框。在element-ui裡面基本程式碼是長這樣的
<el-input v-model="input" placeholder="請輸入內容"></el-input>
el-input ：這是 element-ui的input元件寫法。
v-model：可以讓這個輸入框內的內容綁定到變數上，但是變數記得要先宣告。
placehoder：在還沒有輸入內容時會顯示在輸入框內的文字，不過這文字並不會綁定在變數。
2. Button 按鈕
按鈕這個大家應該都見過很多次了，基本程式碼如下
<el-button>按鈕</el-button>
然後我們可以在按鈕上增加一些屬性，像這樣
<el-button @click="function()" type="primary" round>按鈕</el-button>
el-button： element-ui的按鈕寫法。
type：按鈕的類型有primary（會顯示藍色），success（會顯示綠色），info（會顯示灰色），warning（會顯示黃色），danger（會顯示紅色）。
round：表示按鈕為圓角。
@click：按下按鈕後執行後面的function()函式。
3. Table 表格
通常用來顯示資料用途，程式碼如下
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="no" label="學號" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="sex" label="性別">
</el-table-column>
</el-table>
el-table：element-ui的表格寫法。
:data：表格綁定的變數資料。
style：這一個el-table的外觀參數。
width：表示佔畫面的寬度。
el-table-column：表格的欄位。
prop：這個先想成是這個欄位要顯示的綁定資料裡面的欄位名稱。
label：每行最上面的欄位名稱，就像Excel資料最上面那一列的意思。
元件先介紹到這裡，接下來試著用這三個元件來寫一個簡單的功能。
目標：三個輸入框個別表示學號、姓名、性別，輸入完畢後按下按鈕，將資料儲存顯示在表格內。
首先一樣開啟之前的專案，開啟App.vue後先宣告需要的變數、函式，因為需要三個不同的輸入框這邊我們總共需要學號（no）、姓名（name）、性別（sex）這三個變數，外加一個表格資料（tableData）儲存表格來源資料一共四個變數，再加上一個按鈕按下事件函式（clickEvent()）。
<script>
export default {
data() {
return {
no: 0, //數字格式不用“”括起來
name: "", //字串格式要用“”括起來
sex: "",
tableData: [] //表格資料為一個陣列
};
},
methods: {
clickEvent() {}
}
};
</script>
之後將不需要的元件都先刪除，然後依序加入三個輸入框、一個按鈕、一個表格。
輸入框綁定各個變數，表格綁定資料來源，按鈕綁定事件，tableData綁定的欄位變數前面多加tbl避免搞混
<template>
<div id="app">
<el-input v-model="no" placeholder="學號" style="width:180px;"></el-input>
<el-input v-model="name" placeholder="姓名" style="width:180px;"></el-input>
<el-input v-model="sex" placeholder="性別" style="width:180px;"></el-input>
<el-button @click="clickEvent()">按鈕</el-button>
<el-table :data="tableData">
<el-table-column prop="tblno" label="學號"></el-table-column>
<el-table-column prop="tblname" label="姓名"></el-table-column>
<el-table-column prop="tblsex" label="性別"></el-table-column>
</el-table>
</div>
</template>
在終端機輸入
yarn run dev
執行後localhost:8010畫面大概會顯示下面這個樣子
接下來開始寫事件函式吧
程式碼的思考方向建議由操作的順序來思考該如何撰寫，操作方式大約是
填入數值 -> 按下按鈕 -> 數值存入表格資料來源 -> 顯示表格
這邊Vue由於是雙向綁定所以在已經綁定變數的元件填入數值的時候，我們不必額外做處理Vue會直接將數據寫入宣告好的變數之中，開發者就可以直接使用。
思考後的程式碼大約會是這樣
methods: {
clickEvent() {
let noInput = this.no;
let nameInput = this.name;
let sexInput = this.sex;
this.tableData.push({
tblno: noInput,
tblname: nameInput,
tblsex: sexInput
});
}
}
let：這個為Javascript的其中一種宣告方式，這邊可以直接用英文原本的意思“讓”，所以 let noInput = this.no; 翻譯為 讓 noIpunt 這個變數 等於 這個網頁的 no 變數。
push：這個是Javascript中陣列增加內容的函式，push英文的意思是推，所以this.tableData.push({....})可翻譯成 {......} 推進 這個網頁的 tableData 變數 。
再來說明一下push進陣列裡面的內容
{
tblno: noInput,
tblname: nameInput,
tblsex: sexInput
}
冒號左邊是陣列的變數名稱、而冒號右邊是數值，所以這邊tblno: noInput的意思就是指定 tblno的值為noInput以此類推
存擋後，回到 http://localhost:8010 來看看結果如何吧，如果都正確的話應該會顯示下面的樣子。
功能成功之後，稍微簡化一下程式碼，其實上面的函式中let部分其實不需要額外將宣告的變數再次宣告到另外一個變數上，上面這樣寫只是比較好瞭解陣列的操作，其實我們可以簡化成
methods: {
clickEvent() {
this.tableData.push({
tblno: this.no,
tblname: this.name,
tblsex: this.sex
});
}
}
也會達到一樣的效果
這篇介紹三個最常用的元件使用方法以及元件資料的互相傳遞方式，有興趣的可以上element-ui的官網將各種元件玩一遍。
下一篇預計介紹Vue的路由。