JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查

更新時(shí)間：2017年04月28日 11:53:39 作者：懶得安分

這篇文章主要介紹了JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查,需要的朋友可以參考下

正文

前言：關(guān)于Vue框架，好幾個(gè)月之前就聽說(shuō)過(guò)，了解一項(xiàng)新技術(shù)之后，總是處于觀望狀態(tài)，一直在猶豫要不要系統(tǒng)學(xué)習(xí)下。正好最近有點(diǎn)空，就去官網(wǎng)了解了下，看上去還不錯(cuò)的一個(gè)組件，就抽空研究了下。最近園子里vue也確實(shí)挺火，各種入門博文眼花繚亂，博主也不敢說(shuō)寫得多好，就當(dāng)是個(gè)學(xué)習(xí)筆記，有興趣的可以看看。

一、MVVM比拼

關(guān)于MVVM，原來(lái)在介紹knockout.js的時(shí)候有過(guò)講解，目前市面上比較火的MVVM框架也是一抓一大把，比如常見的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它們自己的優(yōu)勢(shì)。

Knockout：微軟出品，可以說(shuō)是MVVM的模型領(lǐng)域內(nèi)的先驅(qū)，使用函數(shù)偷龍轉(zhuǎn)鳳，最短編輯長(zhǎng)度算法實(shí)現(xiàn)DOM的同步，兼容IE6，實(shí)現(xiàn)高超，但源碼極其難讀，最近幾年發(fā)展緩慢。
Vue：是最近幾年出來(lái)的一個(gè)開源Javascript框架，語(yǔ)法精簡(jiǎn)，實(shí)現(xiàn)精致，但對(duì)瀏覽器的支持受限，最低只能支持IE9。
AvalonJS：是一個(gè)簡(jiǎn)單易用迷你的MVVM框架，由大神司徒正美研發(fā)。使用簡(jiǎn)單，實(shí)現(xiàn)明快。
React：React并不屬于MVVM架構(gòu)，但是它帶來(lái)virtual dom的概念，受限于視圖的規(guī)模。
Angularjs：Google出品，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。
更多MVVM框架優(yōu)缺點(diǎn)比較，可以看下這里。

其實(shí)在博主的博文里面，說(shuō)得最多的還是那句：任何技術(shù)和框架都有它存在的價(jià)值和意義！由上也可以看出沒(méi)有哪個(gè)框架是真正完美的，關(guān)鍵看你如何取舍，在你的項(xiàng)目中用好了以上任何一種框架，你就是技術(shù)大牛。不過(guò)話雖這樣說(shuō)，博主覺得多了解一些框架對(duì)我們并無(wú)壞處，至少能開闊我們的眼界吧。

二、Vue常用網(wǎng)址

上文說(shuō)了，Vue是一個(gè)開源框架，最新版本已經(jīng)更新到了2.0，是一個(gè)Javascript框架，不依賴于任何其他框架（例如jquery），下面是博主收集的一些常用網(wǎng)址。

Vue.js開源地址：https://github.com/vuejs/vue

Vue.js英文api地址：http://vuejs.org/v2/api/

后來(lái)博主又找到一個(gè)中文的api地址，感謝開源社區(qū)工作者的翻譯。https://vuefe.cn/api/

還有一個(gè)博主覺得很方便的就是一個(gè)Vue的在線測(cè)試網(wǎng)址：https://jsfiddle.net/chrisvfritz/50wL7mdz/。里面鍵入相應(yīng)的html+js+css可以直接運(yùn)行查看效果。

三、Vue基礎(chǔ)入門

1、MVVM圖例

說(shuō)到MVVM，先來(lái)看看下面下面這張圖

這張圖足以說(shuō)明MVVM的核心功能，在這三者里面，ViewModel無(wú)疑起著重要的橋梁作用。

一方面，通過(guò)ViewModel將Model的數(shù)據(jù)綁定到View的Dom元素上面，當(dāng)Model里面的數(shù)據(jù)發(fā)生變化的時(shí)候，通過(guò)ViewModel里面數(shù)據(jù)綁定的機(jī)制，觸發(fā)View里面Dom元素的變化；
另一方面，又通過(guò)ViewModel來(lái)View里面的Dom元素的數(shù)據(jù)變化，當(dāng)頁(yè)面上面的Dom元素發(fā)生變化的時(shí)候，

ViewModel通過(guò)Dom樹的機(jī)制，觸發(fā)對(duì)應(yīng)的Model的數(shù)據(jù)變化。
當(dāng)然在Vue.js里面ViewModel也是核心部件，它就是一個(gè)Vue實(shí)例。這個(gè)實(shí)例作用于單個(gè)或者多個(gè)html元素，從而實(shí)現(xiàn)Dom樹和數(shù)據(jù)綁定的雙向更新操作。

2、第一個(gè)Vue實(shí)例

關(guān)于第一個(gè)實(shí)例，無(wú)疑是最簡(jiǎn)單的應(yīng)用。要使用vue，不用多說(shuō)，肯定是先去github上面下載源碼嘍，然后引入到我們的項(xiàng)目中來(lái)，需要引用的js就一個(gè)vue.js，版本是2.0.5。

先來(lái)看一個(gè)最簡(jiǎn)單的例子：

<body>
  <div id="app">
    <h1>姓名：{{ Name }}</h1>
    <h1>年齡：{{ Age }}</h1>
    <h1>學(xué)校：{{ School }}</h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

這段代碼不難理解，我們的Model就是data變量，而ViewModel就是這里的new Vue()得到的對(duì)象。這里兩個(gè)最簡(jiǎn)單的屬性相信大家一看就能明白。

el：表示綁定的Dom元素，此例子中表示的是父級(jí)的Dom元素。
data：需要綁定的數(shù)據(jù)Model。

如果僅僅是展示，只需要姓名：{{ Name }} 這樣寫就好了。運(yùn)行的效果如下：

值得一提的是 {{ Name }} 這種寫法僅僅只能實(shí)現(xiàn)單向綁定，只有在Model里面數(shù)據(jù)發(fā)生變化的時(shí)候會(huì)觸發(fā)界面Dom元素的變化，反之并不能觸發(fā)Model數(shù)據(jù)的變化?？梢酝ㄟ^(guò)瀏覽器的Console來(lái)驗(yàn)證這一理論。

那么，對(duì)于雙向綁定的機(jī)制，Vue是如何實(shí)現(xiàn)的呢？

3、雙向綁定

vue里面提供了v-model指令，為我們方便實(shí)現(xiàn)Model和View的雙向綁定，使用也非常簡(jiǎn)單。還是上文的例子，我們加入一個(gè)文本框，里面使用v-model指令。

<body>
  <div id="app">
    <h1>編輯姓名：<input type="text" v-model="Name" /></h1>
    <h1>姓名：{{ Name }}</h1>
    <h1>年齡：{{ Age }}</h1>
    <h1>學(xué)校：{{ School }}</h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

得到效果：

雙向綁定效果展示：

通過(guò)v-model指令，很方便的實(shí)現(xiàn)了Model和View之間的雙向綁定。單從這種綁定的方式來(lái)看，還是比Knockout要簡(jiǎn)單一點(diǎn)，至少不用區(qū)分什么普通屬性和監(jiān)控屬性。

四、常用指令

本來(lái)按照Vue文檔說(shuō)明，常用指令應(yīng)該是放在后面介紹的，但是從使用的層面考慮，先介紹常用指令還是非常必要的，因?yàn)椴┲饔X得這些指令是我們?nèi)胧质褂肰ue的橋梁，沒(méi)有這些基石，一切的高級(jí)應(yīng)用都是空話。

Vue里面為我們提供的常用指令主要有以下一些。

v-text
v-html
v-if
v-show
v-else
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

每一個(gè)指令都可以鏈接到相關(guān)文檔，博主覺得文檔里面每種指令的語(yǔ)法寫得非常詳細(xì)，在此就沒(méi)必要重復(fù)做說(shuō)明了，下面博主打算將一些常用的指令以分組的形式分別結(jié)合demo來(lái)進(jìn)行解釋說(shuō)明。

1、v-text、v-html指令

v-text、v-html這兩者分為一組很好理解，一個(gè)用于綁定文本，一個(gè)用于綁定html。上文使用到的 {{ Name }}這種寫法就是v-text的的縮寫形式。這個(gè)很簡(jiǎn)單，沒(méi)什么好糾結(jié)的，看一個(gè)Demo就能明白。

<body>
  <div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>姓名：{{ Name }}</h1>
    <div style="font-size:30px;font-weight:bold;" v-html="Age">年齡：</div>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: "<label>20</label>",
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

效果如下：

代碼說(shuō)明：

{{Name}}這種寫法和v-text的作用是相同的，用于綁定標(biāo)簽的text屬性。注意如果標(biāo)簽沒(méi)有text屬性，該綁定會(huì)失效，比如你在一個(gè)文本框上面使用v-text是沒(méi)有效果的
由得到的效果可以看出，v-html綁定后會(huì)覆蓋原來(lái)標(biāo)簽里面的內(nèi)容（比如上面的“年齡：”），記住此處是覆蓋而非append。

對(duì)于v-html應(yīng)用的時(shí)候要慎重，在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 有一定的危險(xiǎn)存在，因?yàn)槿菀讓?dǎo)致 XSS 跨站腳本攻擊。所以最好是在信任的網(wǎng)址上面使用。

注意v-text和v-html綁定都是單向的，只能從Model到View的綁定，不能實(shí)現(xiàn)View到Model的更新。

2、v-model指令

v-model上面有介紹它的雙向綁定功能，對(duì)于v-model指令，vue限定只能對(duì)表單控件進(jìn)行綁定，常見的有<input>、<select>、<textarea>等。

<body>
  <div id="app">
    <h2>編輯姓名：<input type="text" v-model="Name" /></h2>
    <h2>姓名：{{Name}}</h2>
    <hr />
    <h2>編輯備注：<textarea v-model="Remark"></textarea></h2>
    <h2>備注：{{Remark}}</h2>
    <hr />
    <input type="checkbox" id="basketball" value="籃球" v-model="Hobby">
    <label for="basketball">籃球</label>
    <input type="checkbox" id="football" value="足球" v-model="Hobby">
    <label for="football">足球</label>
    <input type="checkbox" id="running" value="跑步" v-model="Hobby">
    <label for="running">跑步</label>
    <br>
    <h2>學(xué)生愛好： {{ Hobby }}</h2>
    <hr />
    <h2>戶籍：{{ Huji }}</h2>
    <select style="width:100px;" class="form-control" v-model="Huji">
      <option>湖南</option>
      <option>廣東</option>
      <option>北京</option>
    </select>
</div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
    School: '光明小學(xué)',
    Hobby: [],
    Remark: '三好學(xué)生',
    Huji:""
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

以上列舉了v-model的一些常見用法，應(yīng)該都不難，基本都是雙向綁定，效果如下：

關(guān)于selece的數(shù)據(jù)源的動(dòng)態(tài)綁定，我們留在v-for指令的時(shí)候介紹。

3、v-if、v-else指令

v-if和v-else是一對(duì)離不開的好兄弟，使用條件運(yùn)算符判斷時(shí)常用。需要說(shuō)明的是，v-if可以單獨(dú)使用，但是v-else的前面必須要有一個(gè)v-if的條件或者v-show指令（后面介紹），這個(gè)和我們編程的原理是一樣一樣的。

它們作為條件渲染指令，他們的基礎(chǔ)語(yǔ)法如下：

v-if="expression",v-else;

注意這里的v-else可以不寫，expression表達(dá)式是一個(gè)返回bool類型的屬性或者表達(dá)式。

<body>
  <div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>是否已婚：<span v-if="IsMarry">是</span></h1>
    <h1>大人or小孩：<span v-if="Age>18">大人</span><span v-else>小屁孩</span></h1>
    <h1>學(xué)校：{{ School }}</h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    IsMarry: true,
    Age: 20,
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

得到結(jié)果：

只有有一點(diǎn)編程基礎(chǔ)，上述應(yīng)該不難看懂。

4、v-show指令

v-show指令表示根據(jù)表達(dá)式之bool值，覺得是否顯示該元素。需要說(shuō)明的是，如果bool值false，對(duì)應(yīng)的Dom標(biāo)簽還是會(huì)渲染到頁(yè)面上面，只是將該標(biāo)簽的css屬性display設(shè)為none而已。而如果你用v-if值，bool值為false的時(shí)候整個(gè)dom樹都不被渲染到頁(yè)面上面。從這點(diǎn)上來(lái)說(shuō)看，如果你的需求是需要經(jīng)常切換元素的顯示和隱藏，使用v-show效率更高，而如果你只一次條件判斷，使用v-if更加合適。

v-show還常和v-else一起使用，表示如果v-show條件滿足，則顯示當(dāng)前標(biāo)簽，否則顯示v-else標(biāo)簽。

<body>
  <div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>是否已婚：<span v-show="IsMarry">是</span></h1>
    <h1>學(xué)校：{{ School }}</h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    IsMarry: false,
    Age: 16,
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

得到效果：

5、v-for指令

v-for 指令需要以 item in items 形式的特殊語(yǔ)法。常用來(lái)綁定數(shù)據(jù)對(duì)象。

最簡(jiǎn)單的例子：

<body>
  <div id="app">
    <ul>
      <li v-for="value in nums">{{value}}</li>
    </ul>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: {
      nums: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  });
  </script>
</body>

效果：

除了基礎(chǔ)數(shù)據(jù)之外，還支持Json數(shù)組的綁定。比如：

　<div id="app">
    <ul>
      <li v-for="value in values">姓名：{{value.Name}}，年齡：{{value.Age}}</li>
    </ul>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: {
      values: [{ Name: "小明", Age: 20 }, { Name: "小剛", Age: 18 }, { Name: "小紅", Age: 16 }]
    }
  });
  </script>

效果：

在v-for里面，可以使用<template> 標(biāo)簽來(lái)渲染多個(gè)元素塊，下面就基于bootstrap樣式使用v-for、v-if、v-else等實(shí)現(xiàn)一個(gè)簡(jiǎn)單的demo。

<div id="app">
    <nav>
      <ul class="pagination pagination-lg">
        <template v-for="page in pages ">
          <li v-if="page==1" class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁(yè)</a></li>
          <li v-if="page==1" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>
          <li v-else><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>
          <li v-if="page==pages"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁(yè)</a></li>
        </template>
      </ul>
    </nav>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: {
      pages: 10
    }
  });
  </script>

得到效果

是不是很easy！需要說(shuō)明一點(diǎn)的是，pages是10，然后遍歷它的時(shí)候，page的值會(huì)從1依次到10。

v-for指令除了支持?jǐn)?shù)據(jù)對(duì)象的迭代以外，還支持普通Json對(duì)象的迭代，比如：

<div id="app">
    <ul>
      <li v-for="(value, key) in values">
        {{ key }} : {{ value }}
      </li>
      <li v-for="(value, key, index) in values">
        {{ index }}. {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: {
      values: { Name: "小明", Age: 20, School: "**高中" }
    }
  });
  </script>

得到效果：

6、v-once指令

v-once表示只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。什么意思呢？還是來(lái)看demo說(shuō)話：

<div id="app">
    <h1>姓名：<label v-once v-text="Name"></label></h1>
    <h1 v-once>年齡：{{ Age }}</h1>
    <h1>學(xué)校：{{ School }}</h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
    School:'光明小學(xué)',
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>

效果動(dòng)態(tài)圖：

可以看出，只要使用v-once指令的，View和Model之間除了初次渲染同步，之后便不再同步，而同一次綁定里面沒(méi)使用v-once指令的還是會(huì)繼續(xù)同步。

7、v-bind指令

對(duì)于html標(biāo)簽的text、value等屬性，Vue里面提供了v-text、v-model去綁定。但是對(duì)于除此之外的其他屬性呢，這就要用到接下來(lái)要講的v-bind指令了。博主的理解是v-bind的作用是綁定除了text、value之外的其他html標(biāo)簽屬性，常見的比如class、style、自定義標(biāo)簽的自定義屬性等。它的語(yǔ)法如下：

v-bind:property="expression"

先來(lái)看幾個(gè)簡(jiǎn)單的例子。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="Content/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <style type="text/css">
    class1 {
      padding:20px;
    }
    .backred {
      background-color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>是否紅領(lǐng)巾：<span class="class1" v-bind:class="{backred:IsBack}"><label v-if="IsBack">是</label></span></h1>
    <h1>學(xué)校星級(jí)：<span v-bind:style="{color:SchoolLevel}">aa</span></h1>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
    School: '光明小學(xué)',
    SchoolLevel: 'red',
    IsBack:true
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>
</body>

需要說(shuō)明的是同一個(gè)標(biāo)簽里面的同一個(gè)屬性，可以既有綁定的寫法，也有靜態(tài)的寫法，組件會(huì)自動(dòng)幫你合并，比如上文中的class屬性。

得到效果如下：

關(guān)于自定義屬性的綁定，打算在綜合應(yīng)用里面來(lái)說(shuō)。

8、v-on指令

屬性jquery的朋友應(yīng)該很熟悉這個(gè)“on”，對(duì)于時(shí)間綁定，jquery里面最常用的就是on了。同樣，在Vue里面，v-on指令用來(lái)綁定標(biāo)簽的事件，其語(yǔ)法和v-bind基本類似。

v-on:event="expression";

這里的event可以是Javascript里面的常用事件，也可以是自定義事件。

<div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>年齡：{{ Age }}</h1>
    <button class="btn btn-primary" v-on:click="Age++;if(Name=='小明')Name='吉姆格林';else Name='小明';">年齡遞增</button>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
  });
  </script>

這段代碼是一個(gè)最簡(jiǎn)單的應(yīng)用，直接在click事件里面執(zhí)行邏輯，改變變量的值。效果如下：

除了直接在標(biāo)簽內(nèi)寫處理邏輯，還可以定義方法事件處理器。

<div id="app">
    <h1>姓名：<label v-text="Name"></label></h1>
    <h1>年齡：{{ Age }}</h1>
    <button class="btn btn-primary" v-on:click="Hello">Hello</button>
  </div>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
  //Model
  var data = {
    Name: '小明',
    Age: 18,
  }
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
    methods: {
      Hello: function (event) {
        // `this` 在方法里指當(dāng)前 Vue 實(shí)例
        alert('Hello ' + this.Name + '!');
        this.Age++;
      }
    }
  });
  </script>

結(jié)果應(yīng)該不難猜。

9、實(shí)例一：30分鐘搞定增刪改查

有了我們的Vue框架，關(guān)于行內(nèi)編輯的增刪改查，我們很簡(jiǎn)單即可實(shí)現(xiàn)，如果你熟的話應(yīng)該還不用30分鐘吧。代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="Content/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <style type="text/css">
    table thead tr th {
      text-align:center;
    }
  </style>
</head>
<body>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">用戶管理</div>
      <table class="table table-bordered table-striped text-center">
        <thead>
          <tr>
            <th>用戶名</th>
            <th>年齡</th>
            <th>畢業(yè)學(xué)校</th>
            <th>備注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="row in rows ">
            <tr><td>{{row.Name}}</td><td>{{row.Age}}</td><td>{{row.School}}</td><td>{{row.Remark}}</td>
            <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="Edit(row)">編輯</a>&nbsp;&nbsp;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="Delete(row.Id)">刪除</a></td>
            </tr>
          </template>
          <tr>
            <td><input type="text" class="form-control" v-model="rowtemplate.Name" /></td>
            <td><input type="text" class="form-control" v-model="rowtemplate.Age" /></td>
            <td><select class="form-control" v-model="rowtemplate.School">
  　　　　　　　　　　　　　　　　 <option>中山小學(xué)</option>
  　　　　　　　　　　　　　　　　<option>復(fù)興中學(xué)</option>
  　　　　　　　　　　　　　　　　<option>光明小學(xué)</option>
　　　　　　　　　　　　　　　　</select></td>
            <td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>
            <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="Content/jquery-1.9.1.min.js"></script>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
    //Model
    var data = {
      rows: [
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      ],
      rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' }
    };
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
    methods: {
      Save: function (event) {
        if (this.rowtemplate.Id == 0) {
          //設(shè)置當(dāng)前新增行的Id
          this.rowtemplate.Id = this.rows.length + 1;
          this.rows.push(this.rowtemplate);
        }
        //還原模板
        this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' }
      },
      Delete: function (id) {
        //實(shí)際項(xiàng)目中參數(shù)操作肯定會(huì)涉及到id去后臺(tái)刪除，這里只是展示，先這么處理。
        for (var i=0;i<this.rows.length;i++){
          if (this.rows[i].Id == id) {
            this.rows.splice(i, 1);
            break;
          }
        }
      },
      Edit: function (row) {
        this.rowtemplate = row;
      }
    }
  });
  </script>
</body>
</html>

行內(nèi)編輯效果如下：

10、實(shí)例二：帶分頁(yè)的表格

上面的例子用最簡(jiǎn)單的方式實(shí)現(xiàn)了一個(gè)增刪改查，為了進(jìn)一步體驗(yàn)我們Vue的神奇，博主更進(jìn)了一步，用Vue去做了一個(gè)客戶端分頁(yè)的表格功能。其實(shí)代碼量并不大。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="Content/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <style type="text/css">
    table thead tr th {
      text-align: center;
    }
  </style>
</head>
<body>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">用戶管理</div>
      <table class="table table-bordered table-striped text-center">
        <thead>
          <tr>
            <th>用戶名</th>
            <th>年齡</th>
            <th>畢業(yè)學(xué)校</th>
            <th>備注</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(row, index) in rows ">
            <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
              <td>{{row.Name}}</td>
              <td>{{row.Age}}</td>
              <td>{{row.School}}</td>
              <td>{{row.Remark}}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <nav style="float:right;">
      <ul class="pagination pagination-lg">
        <template v-for="page in Math.ceil(rows.length/pagesize)">
          <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁(yè)</a></li>
          <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>
          <li v-else v-on:click="NumPage(page, $event)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>
          <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁(yè)</a></li>
        </template>
      </ul>
    </nav>
  </div>
  <script src="Content/jquery-1.9.1.min.js"></script>
  <script src="Content/vue/dist/vue.js"></script>
  <script type="text/javascript">
    //Model
    var data = {
      rows: [
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      ],
      pagesize: 2,
      curpage:1,//當(dāng)前頁(yè)的頁(yè)碼
    };
  //ViewModel
  var vue = new Vue({
    el: '#app',
    data: data,
    methods: {
      //上一頁(yè)方法
      PrePage: function (event) {
        $(".pagination .active").prev().trigger("click");
      },
      //下一頁(yè)方法
      NextPage: function (event) {
        $(".pagination .active").next().trigger("click");
      },
      //點(diǎn)擊頁(yè)碼的方法
      NumPage: function (num, event) {
        if (this.curpage == num) {
          return;
        }
        this.curpage = num;
        $(".pagination li").removeClass("active");
        if (event.target.tagName.toUpperCase() == "LI") {
          $(event.target).addClass("active");
        }
        else {
          $(event.target).parent().addClass("active");
        }
        if (this.curpage == 1) {
          $("#prepage").addClass("disabled");
        }
        else {
          $("#prepage").removeClass("disabled");
        }
        if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
          $("#nextpage").addClass("disabled");
        }
        else {
          $("#nextpage").removeClass("disabled");
        }
      }
    }
  });
  </script>
</body>
</html>

來(lái)看看效果吧：

什么，數(shù)據(jù)少了不過(guò)癮？那我們加一點(diǎn)數(shù)據(jù)試試唄。調(diào)整一下data變量，其他不用做任何變化。

var data = {
      rows: [
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      { Id: 1, Name: '小明', Age: 18, School: '光明小學(xué)', Remark: '三好學(xué)生' },
      { Id: 2, Name: '小剛', Age: 20, School: '復(fù)興中學(xué)', Remark: '優(yōu)秀班干部' },
      { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學(xué)', Remark: '吉姆做了汽車公司經(jīng)理' },
      { Id: 4, Name: '李雷', Age: 25, School: '復(fù)興中學(xué)', Remark: '不老實(shí)的家伙' },
      { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學(xué)', Remark: '在一起' },
      ],
      pagesize: 6,
      curpage:1,//當(dāng)前頁(yè)的頁(yè)碼
    };

測(cè)試效果：