JS組件系列——又一款MVVM組件：Vue（一：30分鐘搞定前端增刪改查）
前言：關於Vue框架，好幾個月以前就據說過，瞭解一項新技術以後，老是處於觀望狀態，一直在猶豫要不要系統學習下。正好最近有點空，就去官網瞭解了下，看上去還不錯的一個組件，就抽空研究了下。最近園子裏vue也確實挺火，各類入門博文眼花繚亂，博主也不敢說寫得多好，就當是個學習筆記，有興趣的能夠看看。javascript
本文原創地址：http://www.cnblogs.com/landeanfen/p/6054654.html css
1、MVVM大比拼
關於MVVM，原來在介紹knockout.js的時候有過講解，目前市面上比較火的MVVM框架也是一抓一大把，好比常見的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它們本身的優點。html
- Knockout：微軟出品，能夠說是MVVM的模型領域內的先驅，使用函數偷龍轉鳳，最短編輯長度算法實現DOM的同步，兼容IE6，實現高超，但源碼極其難讀，最近幾年發展緩慢。
- Vue：是最近幾年出來的一個開源Javascript框架，語法精簡，實現精緻，但對瀏覽器的支持受限，最低只能支持IE9。
- AvalonJS：是一個簡單易用迷你的MVVM框架，由大神司徒正美研發。使用簡單，實現明快。
- React：React並不屬於MVVM架構，可是它帶來virtual dom的革命性概念，受限於視圖的規模。
- Angularjs：Google出品，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。
更多MVVM框架優缺點比較，能夠看下 這裏 。vue
其實在博主的博文裏面，說得最多的仍是那句：任何技術和框架都有它存在的價值和意義！由上也能夠看出沒有哪一個框架是真正完美的，關鍵看你如何取捨，在你的項目中用好了以上任何一種框架，你就是技術大牛。不過話雖這樣說，博主以爲多瞭解一些框架對咱們並沒有壞處，至少能開闊咱們的眼界吧。java
2、Vue經常使用網址
上文說了，Vue是一個開源框架，最新版本已經更新到了2.0，是一個獨立的Javascript框架，不依賴於任何其餘框架（例如jquery），下面是博主收集的一些經常使用網址。jquery
Vue.js開源地址：https://github.com/vuejs/vuegit
Vue.js英文api地址：http://vuejs.org/v2/api/angularjs
後來博主又找到一箇中文的api地址，感謝開源社區工做者的翻譯。https://vuefe.cn/api/github
還有一個博主以爲很方便的就是一個Vue的在線測試網址：https://jsfiddle.net/chrisvfritz/50wL7mdz/。裏面鍵入相應的html+js+css能夠直接運行查看效果。算法
3、Vue基礎入門
一、MVVM圖例
說到MVVM，先來看看下面下面這張圖
這張圖足以說明MVVM的核心功能，在這三者裏面，ViewModel無疑起着重要的橋樑做用。
- 一方面，經過ViewModel將Model的數據綁定到View的Dom元素上面，當Model裏面的數據發生變化的時候，經過ViewModel裏面數據綁定的機制，觸發View裏面Dom元素的變化；
- 另外一方面，又經過ViewModel來監聽View裏面的Dom元素的數據變化，當頁面上面的Dom元素髮生變化的時候，ViewModel經過Dom樹的監聽機制，觸發對應的Model的數據變化。
固然在Vue.js裏面ViewModel也是核心部件，它就是一個Vue實例。這個實例做用於單個或者多個html元素，從而實現Dom樹監聽和數據綁定的雙向更新操做。
二、第一個Vue實例
關於第一個實例，無疑是最簡單的應用。要使用vue，不用多說，確定是先去github上面下載源碼嘍，而後引入到咱們的項目中來，須要引用的js就一個vue.js，版本是2.0.5。
先來看一個最簡單的例子：
<body> <div id="app"> <h1>姓名：{{ Name }}</h1> <h1>年齡：{{ Age }}</h1> <h1>學校：{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
這段代碼不難理解，咱們的Model就是data變量，而ViewModel就是這裏的new Vue()獲得的對象。這裏兩個最簡單的屬性相信你們一看就能明白。
- el：表示綁定的Dom元素，此例子中表示的是父級的Dom元素。
- data：須要綁定的數據Model。
若是僅僅是展現，只須要 姓名：{{ Name }} 這樣寫就行了。運行的效果以下：
值得一提的是 {{ Name }} 這種寫法僅僅只能實現單向綁定，只有在Model裏面數據發生變化的時候會觸發界面Dom元素的變化，反之並不能觸發Model數據的變化。能夠經過瀏覽器的Console來驗證這一理論。
那麼，對於雙向綁定的機制，Vue是如何實現的呢？
三、雙向綁定
vue裏面提供了v-model指令，爲咱們方便實現Model和View的雙向綁定，使用也很是簡單。仍是上文的例子，咱們加入一個文本框，裏面使用v-model指令。
<body> <div id="app"> <h1>編輯姓名：<input type="text" v-model="Name" /></h1> <h1>姓名：{{ Name }}</h1> <h1>年齡：{{ Age }}</h1> <h1>學校：{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
獲得效果：
雙向綁定效果展現：
經過v-model指令，很方便的實現了Model和View之間的雙向綁定。單從這種綁定的方式來看，仍是比Knockout要簡單一點，至少不用區分什麼普通屬性和監控屬性。
4、經常使用指令
原本按照Vue文檔說明，經常使用指令應該是放在後面介紹的，可是從使用的層面考慮，先介紹經常使用指令仍是很是必要的，由於博主以爲這些指令是咱們入手使用Vue的橋樑，沒有這些基石，一切的高級應用都是空話。
Vue裏面爲咱們提供的經常使用指令主要有如下一些。
每個指令均可以連接到相關文檔，博主以爲文檔裏面每種指令的語法寫得很是詳細，在此就不必重複作說明了，下面博主打算將一些經常使用的指令以分組的形式分別結合demo來進行解釋說明。
一、v-text、v-html指令
v-text、v-html這二者分爲一組很好理解，一個用於綁定文本，一個用於綁定html。上文使用到的 {{ Name }}這種寫法就是v-text的的縮寫形式。這個很簡單，沒什麼好糾結的，看一個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:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
效果以下：
代碼說明：
- {{Name}}這種寫法和v-text的做用是相同的，用於綁定標籤的text屬性。注意若是標籤沒有text屬性，該綁定會失效，好比你在一個文本框上面使用v-text是沒有效果的
- 由獲得的效果能夠看出，v-html綁定後會覆蓋原來標籤裏面的內容（好比上面的「年齡：」），記住此處是覆蓋而非append。
- 對於v-html應用的時候要慎重，在網站上動態渲染任意 HTML 有必定的危險存在，由於容易致使 XSS 跨站腳本攻擊。因此最好是在信任的網址上面使用。
- 注意v-text和v-html綁定都是單向的，只能從Model到View的綁定，不能實現View到Model的更新。
二、v-model指令
v-model上面有介紹它的雙向綁定功能，對於v-model指令，vue限定只能對錶單控件進行綁定，常見的有<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>學生愛好： {{ 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: '光明小學', Hobby: [], Remark: '三好學生', Huji:"" } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
以上列舉了v-model的一些常見用法，應該都不難，基本都是雙向綁定，效果以下：
關於selece的數據源的動態綁定，咱們留在v-for指令的時候介紹。
三、v-if、v-else指令
v-if和v-else是一對離不開的好兄弟，使用條件運算符判斷時經常使用。須要說明的是，v-if能夠單獨使用，可是v-else的前面必需要有一個v-if的條件或者v-show指令（後面介紹），這個和咱們編程的原理是同樣同樣的。
它們做爲條件渲染指令，他們的基礎語法以下：
v-if="expression",v-else;
注意這裏的v-else能夠不寫，expression表達式是一個返回bool類型的屬性或者表達式。
<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>學校：{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', IsMarry: true, Age: 20, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
獲得結果：
只有有一點編程基礎，上述應該不難看懂。
四、v-show指令
v-show指令表示根據表達式之bool值，以爲是否顯示該元素。須要說明的是，若是bool值false，對應的Dom標籤仍是會渲染到頁面上面，只是將該標籤的css屬性display設爲none而已。而若是你用v-if值，bool值爲false的時候整個dom樹都不被渲染到頁面上面。從這點上來講看，若是你的需求是須要常常切換元素的顯示和隱藏，使用v-show效率更高，而若是你只作一次條件判斷，使用v-if更加合適。
v-show還常和v-else一塊兒使用，表示若是v-show條件知足，則顯示當前標籤，不然顯示v-else標籤。
<body> <div id="app"> <h1>姓名：<label v-text="Name"></label></h1> <h1>是否已婚：<span v-show="IsMarry">是</span></h1> <h1>學校：{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', IsMarry: false, Age: 16, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
獲得效果：
五、v-for指令
v-for 指令須要以 item in items 形式的特殊語法。經常使用來綁定數據對象。
最簡單的例子：
<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>
效果：
除了基礎數據以外，還支持Json數組的綁定。好比：
<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> 標籤來渲染多個元素塊，下面就基於bootstrap樣式使用v-for、v-if、v-else等實現一個簡單的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="#">上一頁</a></li> <li v-if="page==1" class="active"><a href="#">{{page}}</a></li> <li v-else><a href="#">{{page}}</a></li> <li v-if="page==pages"><a href="#">下一頁</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！須要說明一點的是，pages是10，而後遍歷它的時候，page的值會從1依次到10。
v-for指令除了支持數據對象的迭代之外，還支持普通Json對象的迭代，好比：
<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>
獲得效果：
六、v-once指令
v-once表示只渲染元素和組件一次。隨後的從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過。什麼意思呢？仍是來看demo說話：
<div id="app"> <h1>姓名：<label v-once v-text="Name"></label></h1> <h1 v-once>年齡：{{ Age }}</h1> <h1>學校：{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script>
效果動態圖：
能夠看出，只要使用v-once指令的，View和Model之間除了初次渲染同步，以後便再也不同步，而同一次綁定裏面沒使用v-once指令的仍是會繼續同步。
七、v-bind指令
對於html標籤的text、value等屬性，Vue裏面提供了v-text、v-model去綁定。可是對於除此以外的其餘屬性呢，這就要用到接下來要講的v-bind指令了。博主的理解是v-bind的做用是綁定除了text、value以外的其餘html標籤屬性，常見的好比class、style、自定義標籤的自定義屬性等。它的語法以下：
v-bind:property="expression"
先來看幾個簡單的例子。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Content/bootstrap/css/bootstrap.css" 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>是否紅領巾：<span class="class1" v-bind:class="{backred:IsBack}"><label v-if="IsBack">是</label></span></h1> <h1>學校星級：<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: '光明小學', SchoolLevel: 'red', IsBack:true } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
須要說明的是同一個標籤裏面的同一個屬性，能夠既有綁定的寫法，也有靜態的寫法，組件會自動幫你合併，好比上文中的class屬性。
獲得效果以下：
關於自定義屬性的綁定，打算在綜合應用裏面來講。
八、v-on指令
屬性jquery的朋友應該很熟悉這個「on」，對於時間的監聽和綁定，jquery裏面最經常使用的就是on了。一樣，在Vue裏面，v-on指令用來綁定標籤的事件，其語法和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>
這段代碼是一個最簡單的應用，直接在click事件裏面執行邏輯，改變變量的值。效果以下：
除了直接在標籤內寫處理邏輯，還能夠定義方法事件處理器。
<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` 在方法裏指當前 Vue 實例 alert('Hello ' + this.Name + '!'); this.Age++; } } }); </script>
結果應該不難猜。
九、實例一：30分鐘搞定增刪改查
有了咱們的Vue框架，關於行內編輯的增刪改查，咱們很簡單便可實現，若是你熟的話應該還不用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="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>畢業學校</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="#" @click="Edit(row)">編輯</a> <a href="#" @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>中山小學</option> <option>復興中學</option> <option>光明小學</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: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', 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) { //設置當前新增行的Id this.rowtemplate.Id = this.rows.length + 1; this.rows.push(this.rowtemplate); } //還原模板 this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' } }, Delete: function (id) { //實際項目中參數操做確定會涉及到id去後臺刪除，這裏只是展現，先這麼處理。 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>
行內編輯效果以下：
十、實例二：帶分頁的表格
上面的例子用最簡單的方式實現了一個增刪改查，爲了進一步體驗咱們Vue的神奇，博主更進了一步，用Vue去作了一個客戶端分頁的表格功能。其實代碼量並不大。
<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="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>畢業學校</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="#">上一頁</a></li> <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li> <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li> <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一頁</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: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', Remark: '在一塊兒' }, ], pagesize: 2, curpage:1,//當前頁的頁碼 }; //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { //上一頁方法 PrePage: function (event) { $(".pagination .active").prev().trigger("click"); }, //下一頁方法 NextPage: function (event) { $(".pagination .active").next().trigger("click"); }, //點擊頁碼的方法 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>
來看看效果吧：
什麼，數據少了不過癮？那咱們加一點數據試試唄。調整一下data變量，其餘不用作任何變化。
var data = { rows: [ { Id: 1, Name: '小明', Age: 18, School: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', Remark: '在一塊兒' }, { Id: 1, Name: '小明', Age: 18, School: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', Remark: '在一塊兒' }, { Id: 1, Name: '小明', Age: 18, School: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', Remark: '在一塊兒' }, { Id: 1, Name: '小明', Age: 18, School: '光明小學', Remark: '三好學生' }, { Id: 2, Name: '小剛', Age: 20, School: '復興中學', Remark: '優秀班幹部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小學', Remark: '吉姆作了汽車公司經理' }, { Id: 4, Name: '李雷', Age: 25, School: '復興中學', Remark: '不老實的傢伙' }, { Id: 5, Name: '韓梅梅', Age: 22, School: '光明小學', Remark: '在一塊兒' }, ], pagesize: 6, curpage:1,//當前頁的頁碼 };
測試效果：
若是再進一步封裝，是否是有點分頁組件的概念了。簡單吧！固然，這只是爲了體現經常使用指令而提供的一個實現思路，可能不少地方都有待優化，待深刻研究組件以後再進一步封裝。
5、總結
以上學習了下Vue的一些經常使用指令，基本都是些比較經常使用的，等下篇有時間再來研究下它的一些高級功能。若是你也對它有興趣，用起來試試吧！博主以爲它的文檔仍是挺全的。
若是你以爲本文可以幫助你，能夠右邊隨意 打賞 博主，也能夠 推薦 進行精神鼓勵。你的支持是博主繼續堅持的不懈動力。
本文原創出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利
- 1. JS組件系列——又一款MVVM組件：Vue（一：30分鐘搞定前端增刪改查）
- 2. Vue（30分鐘搞定前端增刪改查）
- 3. JS組件系列——又一款MVVM組件：Vue（二：構建自己的Vue組件）
- 4. JS組件系列——又一款MVVM組件：Vue（二：構建本身的Vue組件）
- 5. JS組件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（三）：兩個Viewmodel搞定增刪改查...
- 6. C#組件系列——又一款日誌組件：Elmah的學習和分享
- 7. vue.js之入門快速學習（30分鐘搞定前端増刪改查）
- 8. 用戶組管理系列(一)：增刪改查
- 9. 9 stark組件 增刪改
- 10. JS組件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（二）
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • ASP AdRotator 組件 - ASP 教程
- • Git五分鐘教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS組件系列——又一款MVVM組件：Vue（一：30分鐘搞定前端增刪改查）
- 2. Vue（30分鐘搞定前端增刪改查）
- 3. JS組件系列——又一款MVVM組件：Vue（二：構建自己的Vue組件）
- 4. JS組件系列——又一款MVVM組件：Vue（二：構建本身的Vue組件）
- 5. JS組件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（三）：兩個Viewmodel搞定增刪改查...
- 6. C#組件系列——又一款日誌組件：Elmah的學習和分享
- 7. vue.js之入門快速學習（30分鐘搞定前端増刪改查）
- 8. 用戶組管理系列(一)：增刪改查
- 9. 9 stark組件 增刪改
- 10. JS組件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（二）