目錄：

• 1、腳本式開(kāi)發(fā).
• 2、工程化開(kāi)發(fā)
• 3、工程化和腳本的區(qū)別
• 4、來(lái)個(gè)table試試水
• 4,1、目標(biāo)
• 4.2、思路
• 4.3、設(shè)計(jì)與編碼
• 4.4、效果
• 5、業(yè)務(wù)分離
• 6、功能拓展——個(gè)性化設(shè)置    

正文：

我以前是后端（asp.net）開(kāi)發(fā)，會(huì)點(diǎn)js、jQuery，但是不會(huì)寫(xiě)js特效，至于css嘛，拿來(lái)用現(xiàn)成的可以，自己動(dòng)手寫(xiě)就不會(huì)了。

發(fā)現(xiàn)現(xiàn)在前端開(kāi)發(fā)的勢(shì)頭太猛了，有一點(diǎn)要干掉后端的感覺(jué)，于是萌發(fā)了想要學(xué)一學(xué)前端開(kāi)發(fā)的想法。那么前端三大框架，先學(xué)哪一個(gè)呢？就先學(xué)學(xué)Vue吧，為啥呢？很簡(jiǎn)單呀，他只有三個(gè)英文字母，好記好寫(xiě)。

Vue的學(xué)習(xí)時(shí)間比較短，才三、五天吧，所以有些用法可能很稚嫩，甚至是錯(cuò)誤的，不過(guò)不怕，才剛開(kāi)始學(xué)，及時(shí)發(fā)現(xiàn)錯(cuò)誤及時(shí)改正就好。每天都寫(xiě)點(diǎn)心得，萬(wàn)一遇見(jiàn)好人給指點(diǎn)一二，那就掙大發(fā)了。

Vue至少有兩種開(kāi)發(fā)方式：腳本是開(kāi)發(fā)和工程化開(kāi)發(fā)。

一、腳本式開(kāi)發(fā)

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

這種方式適合初初學(xué)者，以及對(duì)一些想法做測(cè)試，驗(yàn)證想法是否行的通。但是正式項(xiàng)目里面可不可以這么用呢？一本書(shū)里面說(shuō)——不可以。但是作為一個(gè)Vue的初學(xué)者，我現(xiàn)在還沒(méi)有能力做這個(gè)判斷。

二、工程化開(kāi)發(fā)

這個(gè)剛一開(kāi)的時(shí)候感覺(jué)很懵逼，但是看著看著發(fā)現(xiàn)了，這個(gè)不就是后端做開(kāi)發(fā)的方式嗎？簡(jiǎn)直太像了。

后端開(kāi)發(fā)，以asp.net mvc 為例（為啥不用其他語(yǔ)言呢？千萬(wàn)別掙，因?yàn)槲抑粫?huì)這一種，其他的不會(huì)）。打開(kāi)IDE，建立一個(gè)項(xiàng)目，選擇框架版本，選擇項(xiàng)目類(lèi)型，選擇。。。。。然后IDE會(huì)根據(jù)你的選擇，加載DLL引用，加載必須的js腳本，建立文件夾，建立配置文件，建立默認(rèn)頁(yè)面、代碼。然后一運(yùn)行，一個(gè)簡(jiǎn)單的網(wǎng)站就出來(lái)了。

Vue的工程化開(kāi)發(fā)居然也是這個(gè)樣子的。首先要安裝node和npm，然后安裝Vue-cli，這個(gè)叫做腳手架，emmm，一臉懵逼這是啥？看看上一段我寫(xiě)的，這個(gè)腳手架統(tǒng)統(tǒng)能做。當(dāng)然不是引用dll這類(lèi)的，而是引用Vue開(kāi)發(fā)需要的各種東東，也會(huì)讓你做各種選擇，最后建立文件夾，然后神奇的是，可以用node做一個(gè)站點(diǎn)，直接就運(yùn)行了。還可以模擬后端。

這個(gè)也太牛叉了吧，我感覺(jué)，再加上一個(gè)數(shù)據(jù)庫(kù)（比如mysql），就沒(méi)有后端啥事了。

具體怎么做就不細(xì)說(shuō)了，emmmm，好吧我現(xiàn)在也只是一知半解。反正很神奇就對(duì)了。

三、工程化和腳本的區(qū)別

如果說(shuō)腳本開(kāi)發(fā)，是把js文件引入到頁(yè)面 ，然后寫(xiě)代碼的話，那么工程化是把自己的代碼加到了Vue的框架里面，給框架補(bǔ)點(diǎn)肉，整個(gè)項(xiàng)目就出來(lái)了。

歷史的發(fā)展就是這樣的，不管個(gè)人喜不喜歡，這種開(kāi)發(fā)方式必定越來(lái)越火，不愿意接受的，早晚會(huì)被淘汰的。

四、來(lái)個(gè)table試試水

看官網(wǎng)、查百度會(huì)有一些簡(jiǎn)單的介紹，這里也是依據(jù)這些簡(jiǎn)單的介紹，來(lái)點(diǎn)稍微復(fù)雜一些的，也是比較實(shí)用的一種用法。因?yàn)槲乙仓皇浅鯇W(xué)，不知道這種用法屬于什么級(jí)別的，拋磚引玉，拿出來(lái)供大家參考一下。

1、目標(biāo)

不管做什么事情，都要先定一個(gè)目標(biāo)，這里雖然只是一個(gè)試水，但是也應(yīng)該知道要做成啥樣子的。那么就定一個(gè)簡(jiǎn)單的表格吧，比如下圖這個(gè)樣子的。

很簡(jiǎn)單的一個(gè)表格，列不多，因?yàn)榱袛?shù)不是問(wèn)題?？戳藢?shí)現(xiàn)方式你就知道了。

2、思路

Vue的特點(diǎn)就是——數(shù)據(jù)驅(qū)動(dòng)視圖。數(shù)據(jù)為主，然后把數(shù)據(jù)綁定到頁(yè)面。這個(gè)是核心，千萬(wàn)別跑偏了。

那么我們來(lái)分析一下，這個(gè)表格由兩個(gè)部分組成：表頭和表體。

表頭：公司名稱(chēng)、電話等。實(shí)際項(xiàng)目里肯定還會(huì)有很多列。這里先拿兩個(gè)舉例。使用<tr><th>來(lái)標(biāo)示。

表體：就是公司信息的列表，由多條數(shù)據(jù)組成，字段數(shù)量和表頭對(duì)應(yīng)。用<tr><td>來(lái)標(biāo)示。

那么我們?cè)O(shè)計(jì)一個(gè)表頭和表體的數(shù)據(jù)包，然后讓Vue一綁定就ok了。

3、設(shè)計(jì)與編碼

先設(shè)計(jì)一個(gè)數(shù)據(jù)包，emmmm，不知道專(zhuān)業(yè)的叫法是啥，反正就是弄一個(gè)json的結(jié)構(gòu)。比如這樣

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

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

data 這個(gè)也是Vue的保留字，后面是model，結(jié)構(gòu)可以隨意設(shè)置，怎么玩就看想象力了。

當(dāng)然Vue還有很多保留字，比如方法的等等，不過(guò)這里先介紹這兩個(gè)，其他的以后再說(shuō)。

然后在設(shè)計(jì)一個(gè)模板，比如這樣：

<div>
  {{ message }}
  <table class="table_default1" >
    <tr>
      <th>序號(hào)</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>
 

不知道大家有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題：這里面沒(méi)有任何和業(yè)務(wù)相關(guān)的東東，那個(gè)“序號(hào)”不算的話。

這個(gè)模板也很簡(jiǎn)單，表頭用一個(gè)循環(huán)就出來(lái)了，數(shù)據(jù)包里面有多少列，就可以循環(huán)出來(lái)多少列，所以我開(kāi)頭說(shuō)的，多少列不重要，因?yàn)檠h(huán)就對(duì)了，管他多少列呢？

表體用了兩個(gè)循環(huán)（嵌套循環(huán)）就出來(lái)了。這個(gè)用法比較很好理解吧。這個(gè)我就不想多解釋了，說(shuō)多了會(huì)有一種湊字?jǐn)?shù)的感覺(jué)。

4、效果

發(fā)現(xiàn)我劇透了，上面那個(gè)圖就是運(yùn)行效果。數(shù)據(jù)包設(shè)計(jì)好，模板設(shè)置好，然后交給Vue就可以了，打開(kāi)瀏覽器查看網(wǎng)頁(yè)，就可以看到這個(gè)效果。

五、業(yè)務(wù)分離

這個(gè)模板可以看做是所有列表的通用模板，因?yàn)樗m合任何一種數(shù)據(jù)，不管是公司信息列表，還是員工信息，還是產(chǎn)品信息，都可以這樣寫(xiě)，而且copy過(guò)來(lái)之后不用改！因?yàn)槲野褬I(yè)務(wù)相關(guān)的統(tǒng)統(tǒng)放到了數(shù)據(jù)包里面。增加一個(gè)列表需求，只需要寫(xiě)數(shù)據(jù)包即可，不用改模板代碼，是不是很方便？

當(dāng)然，如果大家都是這么做的，那么就是英雄所見(jiàn)略同。昨天在一個(gè)前端群里問(wèn)了半天，也沒(méi)有人告訴我，他們的數(shù)據(jù)列表是怎么做的，結(jié)果我到現(xiàn)在也還是不知道在Vue里面大家是怎么做數(shù)據(jù)列表的。百度了一下，也沒(méi)發(fā)現(xiàn)啥有用的信息。

 六、功能拓展個(gè)性化設(shè)置

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

然后做好之后給用戶看，第一個(gè)領(lǐng)導(dǎo)看了說(shuō)，這個(gè)電話怎么放這了，不重要放最后好了。

然后給另一個(gè)領(lǐng)導(dǎo)看說(shuō)，哎，這個(gè)電話怎么放最后了，不是和你們說(shuō)了嗎，這個(gè)要放前面！

？？？剛才那個(gè)領(lǐng)導(dǎo)說(shuō)，，，，，。

然后又給操作人員看，操作人說(shuō)，這個(gè)電話放這里不習(xí)慣，能不能改一改？

這里只是舉一個(gè)簡(jiǎn)單的例子，客戶的需求總是千奇百怪的，調(diào)整順序只是最簡(jiǎn)單最常見(jiàn)的。

對(duì)于客戶來(lái)說(shuō)，不就是改個(gè)位置嗎，我用Excel天天改順序，你們這個(gè)項(xiàng)目肯定比Excel厲害吧，改個(gè)順序很難嗎？

不難呀，只是別改來(lái)改去的，另外我到底聽(tīng)誰(shuí)的？

細(xì)心的你可能會(huì)發(fā)現(xiàn)，數(shù)據(jù)包里面有一個(gè)orderBy: ["c1", "c2"]沒(méi)有用上，這個(gè)是干嘛的？

這個(gè)不是給數(shù)據(jù)排序的，而是給列排序的。這個(gè)數(shù)組里放的是key，后面兩個(gè)數(shù)據(jù)包都是以這些key來(lái)組織數(shù)據(jù)的。那么這個(gè)數(shù)組里的key的先后順序就是列的先后順序。

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

最后，模板需要改一下：

<div>
  {{ message }}
  <table class="table_default1">
    <tr>
      <th>序號(hào)</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>
 

先遍歷這個(gè)數(shù)組，然后用里面的key提取數(shù)據(jù)在做綁定。這樣，我們把調(diào)整列的先后順序的業(yè)務(wù)需求也給分離出來(lái)了，還附帶了一個(gè)福利——個(gè)性化設(shè)置。感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。

最新評(píng)論