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

文組也能看得懂的網頁前端vue vue.js

yj0803 2019-07-23 21:45:41 ‧ 5896 瀏覽

上一篇介紹了函式的基本用法，這一篇主要介紹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()函式。

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的路由。