目錄：
1、指令碼式開發.
2、工程化開發
3、工程化和指令碼的區別
4、來個table試試水
4,1、目標
4.2、思路
4.3、設計與編碼
4.4、效果
5、業務分離
6、功能擴充——個性化設定
正文：
我以前是後端（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、目標
不管做什麼事情，都要先定一個目標，這裡雖然只是一個試水，但是也應該知道要做成啥樣子的。那麼就定一個簡單的表格吧，比如下圖這個樣子的。
很簡單的一個表格，列不多，因為列數不是問題。看了實現方式你就知道了。
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 id="table"> 。用jQuery的思路就是 $(‘#table’)。
data 這個也是Vue的保留字，後面是model，結構可以隨意設定，怎麼玩就看想象力了。
當然Vue還有很多保留字，比如方法的等等，不過這裡先介紹這兩個，其他的以後再說。
然後在設計一個模板，比如這樣：
<div id="table"> {{ 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 id="table"> {{ message }} <table class="table_default1" style=" "> <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提取資料在做繫結。這樣，我們把調整列的先後順序的業務需求也給分離出來了，還附帶了一個福利——個性化設定。