文組也能看得懂的網頁前端Vue  (五)元件篇

簡單介紹 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的路由。