文组也能看得懂的网页前端Vue  （五）元件篇

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

通常用来显示资料用途，程式码如下

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