VUE寫一個簡單的表格實例

目錄：

正文：

我以前是后端（asp.net）開發，會點js、jQuery，但是不會寫js特效，至于css嘛，拿來用現成的可以，自己動手寫就不會了。

發現現在前端開發的勢頭太猛了，有一點要干掉后端的感覺，于是萌發了想要學一學前端開發的想法。那么前端三大框架，先學哪一個呢？就先學學Vue吧，為啥呢？很簡單呀，他只有三個英文字母，好記好寫。

Vue的學習時間比較短，才三、五天吧，所以有些用法可能很稚嫩，甚至是錯誤的，不過不怕，才剛開始學，及時發現錯誤及時改正就好。每天都寫點心得，萬一遇見好人給指點一二，那就掙大發了。

Vue至少有兩種開發方式：腳本是開發和工程化開發。

一、腳本式開發

就是和jQuery的使用有點像，在頁面里引用vue.js，然后按照vue的規則寫模板、寫代碼，就可以開魯了。這種方式和jQuery挺像的，用著也是很爽的，改完代碼一保存，瀏覽器里面一刷新就可以看到效果，很直觀方便。

這種方式適合初初學者，以及對一些想法做測試，驗證想法是否行的通。但是正式項目里面可不可以這么用呢？一本書里面說——不可以。但是作為一個Vue的初學者，我現在還沒有能力做這個判斷。

二、工程化開發

這個剛一開的時候感覺很懵逼，但是看著看著發現了，這個不就是后端做開發的方式嗎？簡直太像了。

后端開發，以asp.net mvc 為例（為啥不用其他語言呢？千萬別掙，因為我只會這一種，其他的不會）。打開IDE，建立一個項目，選擇框架版本，選擇項目類型，選擇。。。然后IDE會根據你的選擇，加載DLL引用，加載必須的js腳本，建立文件夾，建立配置文件，建立默認頁面、代碼。然后一運行，一個簡單的網站就出來了。

Vue的工程化開發居然也是這個樣子的。首先要安裝node和npm，然后安裝Vue-cli，這個叫做腳手架，emmm，一臉懵逼這是啥？看看上一段我寫的，這個腳手架統統能做。當然不是引用dll這類的，而是引用Vue開發需要的各種東東，也會讓你做各種選擇，最后建立文件夾，然后神奇的是，可以用node做一個站點，直接就運行了。還可以模擬后端。

這個也太牛叉了吧，我感覺，再加上一個數據庫（比如mysql），就沒有后端啥事了。

具體怎么做就不細說了，emmmm，好吧我現在也只是一知半解。反正很神奇就對了。

三、工程化和腳本的區別

如果說腳本開發，是把js文件引入到頁面 ，然后寫代碼的話，那么工程化是把自己的代碼加到了Vue的框架里面，給框架補點肉，整個項目就出來了。

歷史的發展就是這樣的，不管個人喜不喜歡，這種開發方式必定越來越火，不愿意接受的，早晚會被淘汰的。

四、來個table試試水

看官網、查百度會有一些簡單的介紹，這里也是依據這些簡單的介紹，來點稍微復雜一些的，也是比較實用的一種用法。因為我也只是初學，不知道這種用法屬于什么級別的，拋磚引玉，拿出來供大家參考一下。

1、目標

不管做什么事情，都要先定一個目標，這里雖然只是一個試水，但是也應該知道要做成啥樣子的。那么就定一個簡單的表格吧，比如下圖這個樣子的。

很簡單的一個表格，列不多，因為列數不是問題?？戳藢崿F方式你就知道了。

2、思路

Vue的特點就是——數據驅動視圖。數據為主，然后把數據綁定到頁面。這個是核心，千萬別跑偏了。

那么我們來分析一下，這個表格由兩個部分組成：表頭和表體。

表頭：公司名稱、電話等。實際項目里肯定還會有很多列。這里先拿兩個舉例。使用<tr><th>來標示。

表體：就是公司信息的列表，由多條數據組成，字段數量和表頭對應。用<tr><td>來標示。

那么我們設計一個表頭和表體的數據包，然后讓Vue一綁定就ok了。

3、設計與編碼

先設計一個數據包，emmmm，不知道專業的叫法是啥，反正就是弄一個json的結構。比如這樣

var table = new Vue({
 el: '#table',
 data: {
 message: '公司信息!',
 orderBy: ["c1", "c2"], //可以控制字段的先后順序，想調整列的先后順序，改這個數組就行，可以做個性化設置
 tableTh: {//表頭的描述信息
 c1: {
 title: "公司名稱", //還可以增加其他描述，比如width等
 align: "left"
 },
 c2: {
 title: "電話",
 align: "right"
 }
 },
 dataList: [
 {
 //數據包，字段名作為關鍵字，便于列的調整先后順序
 c1: "度娘2",
 c2: "123123123"
 },
 {
 c1: "企鵝2",
 c2: "7897899787"
 },
 {
 c1: "阿里爸爸2",
 c2: "456456456"
 }
 ]
 }
 });
 

el 這個是Vue的保留字，必須這么寫，后面是dom的ID，比如<div> 。用jQuery的思路就是 $(‘#table')。

data 這個也是Vue的保留字，后面是model，結構可以隨意設置，怎么玩就看想象力了。

當然Vue還有很多保留字，比如方法的等等，不過這里先介紹這兩個，其他的以后再說。

然后在設計一個模板，比如這樣：

<div>
 {{ message }}
 <table class="table_default1" >
 <tr>
 <th>序號</th>
 <th v-for="th in tableTh" >
 {{th.title}}
 </th>
 </tr>
 <tr v-for="(tr,index) in dataList">
 <td>{{index+1}}</td>
 <td v-for="td in tr" >
 {{td}}
 </td>
 </tr>
 </table>
</div>
 

不知道大家有沒有發現一個問題：這里面沒有任何和業務相關的東東，那個“序號”不算的話。

這個模板也很簡單，表頭用一個循環就出來了，數據包里面有多少列，就可以循環出來多少列，所以我開頭說的，多少列不重要，因為循環就對了，管他多少列呢？

表體用了兩個循環（嵌套循環）就出來了。這個用法比較很好理解吧。這個我就不想多解釋了，說多了會有一種湊字數的感覺。

4、效果

發現我劇透了，上面那個圖就是運行效果。數據包設計好，模板設置好，然后交給Vue就可以了，打開瀏覽器查看網頁，就可以看到這個效果。

五、業務分離

這個模板可以看做是所有列表的通用模板，因為他適合任何一種數據，不管是公司信息列表，還是員工信息，還是產品信息，都可以這樣寫，而且copy過來之后不用改！因為我把業務相關的統統放到了數據包里面。增加一個列表需求，只需要寫數據包即可，不用改模板代碼，是不是很方便？

當然，如果大家都是這么做的，那么就是英雄所見略同。昨天在一個前端群里問了半天，也沒有人告訴我，他們的數據列表是怎么做的，結果我到現在也還是不知道在Vue里面大家是怎么做數據列表的。百度了一下，也沒發現啥有用的信息。

 六、功能拓展個性化設置

不知道大家有沒有遇到這樣的情況，接到一個任務，要求做一個數據列表里面有n個字段，這個沒啥的嘛，做唄。但是這么多的列哪個在前哪個在后呢？如果文檔里明確說明了，那么好辦，按照文檔里的來唄。如果文檔里沒有明確說明先后順序，那么咋辦？只能按照自己的習慣來了。

然后做好之后給用戶看，第一個領導看了說，這個電話怎么放這了，不重要放最后好了。

然后給另一個領導看說，哎，這個電話怎么放最后了，不是和你們說了嗎，這個要放前面！

？？？剛才那個領導說，，，，，。

然后又給操作人員看，操作人說，這個電話放這里不習慣，能不能改一改？

這里只是舉一個簡單的例子，客戶的需求總是千奇百怪的，調整順序只是最簡單最常見的。

對于客戶來說，不就是改個位置嗎，我用Excel天天改順序，你們這個項目肯定比Excel厲害吧，改個順序很難嗎？

不難呀，只是別改來改去的，另外我到底聽誰的？

細心的你可能會發現，數據包里面有一個orderBy: ["c1", "c2"]沒有用上，這個是干嘛的？

這個不是給數據排序的，而是給列排序的。這個數組里放的是key，后面兩個數據包都是以這些key來組織數據的。那么這個數組里的key的先后順序就是列的先后順序。

所以只需要改這個數組里的key就可以了。然后我們可以為每一個用戶都設置一個獨立的數組，這樣每個用戶都可以有自己的列的順序了，互相不干擾。這樣客戶都滿意了，我們也不用總是調整順序了。

最后，模板需要改一下：

<div>
 {{ message }}
 <table class="table_default1">
 <tr>
 <th>序號</th>
 <th v-for="key in orderBy" >
 {{tableTh[key].title}}
 </th>
 </tr>
 <tr v-for="(tr,i) in dataList">
 <td>{{i+1}}</td>
 <td v-for="key in orderBy" v-bind:align="tableTh[key].align">
 {{tr[key]}}
 </td>
 </tr>
 </table>
</div>
 

先遍歷這個數組，然后用里面的key提取數據在做綁定。這樣，我們把調整列的先后順序的業務需求也給分離出來了，還附帶了一個福利——個性化設置。感謝大家的學習和對腳本之家的支持。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com