Vue - 起手式

時間 2019-11-10

標籤 vue 手式简体版

原文原文鏈接

0x00：前言

此次前言不想扯太多。javascript

本文主要是記錄一下本身的學習歷程，順帶作一個總結。css

當中有參考 Vue.js 的中文文檔,也有去查看其它大大們給出的總結。html

最後也是一個期盼，但願可以幫助到其它有需要的小夥伴。前端

補充：
第一次自學的話，推薦直接去查看下面內容。
* Vue.js API(英文)
* Vue.js API(中文)
* Vue.js 開源站點vue

0x01：Vue 基礎介紹

下面部份內容參考於官方文檔。java

Vue.js 是什麼
Vue.js（讀音 /vjuː/, 類似於 view）是一套構建用戶界面的漸進式框架。與其它重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。node

Vue 的核心庫僅僅關注視圖層，並且很是easy學習，很是easy與其它庫或已有項目整合。jquery

還有一方面。Vue 全然有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的複雜單頁應用。
Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。webpack

至於很是多小夥伴。對因而否要選擇 Vue 可能存在一些顧慮。或者說可能會認爲 Vue 不值得去學習。git

在這裏，筆者和你們分享一句我曾經打遊戲時很是喜歡說的話。

沒有垃圾的英雄，僅僅有菜比的玩家

每一個框架的存在都是有其特定意義的，僅僅是在不一樣的使用場景，纔會有適不適合之分。

此外再去補充一下關於 SegmentFault 在 2016 年 8 月給出的 Vue 的增加趨勢。

由此也能看出來。Vue 的將來前景怎樣。

說了這麼多，也該書歸正文，一塊兒來看一下，假設咱們要學習 Vue。該作哪些準備？

0x02：Vue 和其它 MVVM 框架的對照

首先在開始學習 Vue 以前，咱們首先需要了解一下，Vue 和其它框架有什麼不一樣？

這裏請贊成我直接引用一下懶得安分大神的話術。

關於MVVM，原來在介紹knockout.js的時候有過解說，眼下市面上比較火的MVVM框架也是一抓一大把，比方常見的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它們本身的優點。
* Knockout：微軟出品，可以說是MVVM的模型領域內的先驅，使用函數偷龍轉鳳。最短編輯長度算法實現DOM的同步。兼容IE6。實現高超，但源代碼極其難讀，近期幾年發展緩慢。
* Vue：是近期幾年出來的一個開源Javascript框架。語法精簡。實現精緻，但對瀏覽器的支持受限，最低僅僅能支持IE9。
* AvalonJS：是一個簡單易用迷你的MVVM框架，由大神司徒正美研發。使用簡單，實現明快。
* React：React並不屬於MVVM架構，但是它帶來virtual dom的革命性概念，受限於視圖的規模。

* Angularjs：Google出品，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、本身主動化雙向數據綁定、語義化標籤、依賴注入等等。入門easy上手難。大量避不開的概念也是很是頭疼的。

除此以外。在 Vue 的官網上也提供了和其它框架的對照。

Vue ：對照其它框架

0x03：什麼是 MVVM?

MVVM是Model-View-ViewModel的簡寫。

MVVM（Model-View-ViewModel）框架的由來即是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架並且把WPF的新特性糅合進去。以應對客戶日益複雜的需求變化。

—-《百度百科》

除此之外。咱們還可以經過這張圖來看一下 MVVM。

這張圖足以說明MVVM的核心功能。在這三者裏面，ViewModel無疑起着重要的橋樑做用。

一方面，經過ViewModel將Model的數據綁定到View的Dom元素上面，當Model裏面的數據發生變化的時候。經過ViewModel裏面數據綁定的機制。觸發View裏面Dom元素的變化。

還有一方面，又經過ViewModel來監聽View裏面的Dom元素的數據變化，當頁面上面的Dom元素髮生變化的時候，ViewModel經過Dom樹的監聽機制，觸發相應的Model的數據變化。

固然在Vue.js裏面ViewModel也是核心部件，它就是一個Vue實例。這個實例做用於單個或者多個html元素，從而實現Dom樹監聽和數據綁定的雙向更新操做。

0x04：Vue 的引入

關於 Vue 的引入，首先要明白一點。

Vue.js 不支持 IE8 及其下面版本號，因爲 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

除此以外，咱們固然也可以去下載 Vue 的源代碼。

Vue 開發版本號

Vue 生產版本號

Vue 安裝指南

最後，咱們在選擇安裝方式的時候，要注意vue-cli。對 Node.js 不夠熟悉的同窗不推薦使用。

這裏附錄一下。關於 vue-cli 的路徑說明。

.
|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本號
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源代碼文件夾
|   |-- components                   // vue公共組件
|   |-- store                        // vuex的狀態管理
|   |-- App.vue                      // 頁面入口文件
|   |-- main.js                      // 程序入口文件。載入各類公共組件
|-- static                           // 靜態文件，比方一些圖片，json數據等
|   |-- data                         // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

這裏我們直接去使用一下官方推薦的基礎引入方法。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

0x05：Vue 的聲明式渲染

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!--引入 Vue--> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="div"> {{message}} </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ //注意這裏。需要填寫的是相應的選擇器 el:"#div", data: { message:"hello vue!" } }) </script> </html>

當中使用到了兩個需要注意的內容。

el :
- 提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標。
- 事實上說白了就是需要綁定的 DOM 元素。
data ：
- Vue 實例的數據對象。
- 大概來講。data 應該僅僅能是數據 - 不推薦觀察擁有狀態行爲的對象。

這是官方給出的基本案例，咱們在這個案例之上，去重新書寫一個新的案例。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!--引入 Vue--> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：{{ Name }}</h1> <h1>年齡：{{ Age }}</h1> <h1>性別：{{ Sex }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, Sex:'男人', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

用 MVVM 的角度，來重新看待這個問題，咱們會發現。

Model就是data變量
ViewModel就是這裏的new Vue()獲得的對象

需要注意，咱們在上方所使用的 {{message}} 是 Vue 中數據綁定最多見的形式。

也就是去使用「Mustache」語法（雙大括號）來在文本中插入值。

Mustache 標籤將會被替代爲相應數據對象上 msg 屬性的值。無論什麼時候，綁定的數據對象上 msg 屬性發生了改變。插值處的內容都會更新。

但是請注意，它所說的是綁定的數據對象的屬性發生改變纔會更新。

0x06：處理用戶輸入

Vue 提供了 v-model 指令，它使得在表單輸入和應用狀態中作雙向數據綁定變得很是輕巧。

你可以用 v-model 指令在表單控件元素上建立雙向數據綁定。
它會依據控件類型本身主動選取正確的方法來更新元素。

雖然有些奇妙，但 v-model 本質上只是是語法糖。它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的樣例。

首先來看一個樣例。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>{{ message }}</p> </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: '#app', data: { message: '測試文本' } }) </script> </html>

咱們會發現。一旦咱們輸入某些內容，咱們相應標籤頁會實時更新，這樣的方式咱們通常稱之爲雙向綁定。

除此以外，咱們還可以針對像 textarea 等內容進行數據的綁定。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines" style="resize: none;"></textarea> </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: '#app', data: { message: ' ' } }) </script> </html>

同一時候需要注意，在文本區域插值<textarea></textarea>並不會生效，應用 v-model 來取代。

不少其它內容請參照。表單數據綁定。

0x07：Vue 常用指令

下面內容。我就直接轉載懶得安分大神的文章，並對其內容做了更改。

Vue裏面爲咱們提供的常用指令主要有下面一些。

每一個指令都可以連接到相關文檔，博主認爲文檔裏面每種指令的語法寫得很是具體，在此就不是必需反覆作說明了，下面博主打算將一些常用的指令以分組的形式分別結合demo來進行解釋說明。

0x08：v-text、v-html指令

v-text、v-html這二者分爲一組很是好理解。一個用於綁定文本。一個用於綁定html。

上文使用到的 {{ Name }}這樣的寫法就是v-text的的縮寫形式。這個很是簡單，沒什麼好糾結的，看一個Demo就能明白。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: "<label>20</label>", School:'大連某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

代碼說明：
* {{Name}}這樣的寫法和v-text的做用是相同的，用於綁定標籤的text屬性。注意假設標籤沒有text屬性，該綁定會失效，比方你在一個文本框上面使用v-text是沒有效果的
* 由獲得的效果可以看出，v-html綁定後會覆蓋原來標籤裏面的內容（比方上面的「年齡：」），記住此處是覆蓋而非append。
* 對於v-html應用的時候要謹慎。在站點上動態渲染隨意 HTML 有必定的危急存在，因爲easy致使 XSS 跨站腳本攻擊。

因此最好是在信任的網址上面使用。
* 注意v-text和v-html綁定都是單向的，僅僅能從Model到View的綁定，不能實現View到Model的更新。

0x09：v-model指令

v-model上面有介紹它的雙向綁定功能。對於v-model指令。vue限定僅僅能對錶單控件進行綁定。常見的有<input>、<select>、<textarea>等。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School: '光明小學', Hobby: [], Remark: '三好學生', Huji:"" } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

關於selece的數據源的動態綁定，咱們留在v-for指令的時候介紹。

0x10：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類型的屬性或者表達式。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', IsMarry: true, Age: 20, School:'大連某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

0x11：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標籤。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：<label v-text="Name"></label></h1> <h1>是否已婚：<span v-show="IsMarry">是</span></h1> <h1>學校：{{ School }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', IsMarry: false, Age: 20, School:'大連某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

0x12：v-for指令

v-for 指令需要以 item in items 形式的特殊語法。

常用來綁定數據對象。

最簡單的樣例：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="value in nums">{{value}}</li> </ul> </div> </body> <script type="text/javascript" charset="utf-8"> //ViewModel var vue = new Vue({ el: '#app', data: { nums: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }); </script> </html>

除了基礎數據以外。還支持Json數組的綁定。比方：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="value in values">姓名：{{value.Name}}。年齡：{{value.Age}}</li> </ul> </div> </body> <script type="text/javascript" charset="utf-8"> //ViewModel var vue = new Vue({ el: '#app', data: { values: [{ Name: "李先生", Age: 20 }, { Name: "小剛", Age: 18 }, { Name: "小紅", Age: 16 }] } }); </script> </html>

0x13：v-once指令

v-once表示僅僅渲染元素和組件一次。

隨後的又一次渲染,元素/組件及其所有的子節點將被視爲靜態內容並跳過。什麼意思呢？仍是來看demo說話：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：<label v-once v-text="Name"></label></h1> <h1 v-once>年齡：{{ Age }}</h1> <h1>學校：{{ School }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School:'光明小學', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

可以看出。僅僅要使用v-once指令的，View和Model之間除了初次渲染同步，以後便再也不同步，而同一次綁定裏面沒使用v-once指令的仍是會繼續同步。

0x14：v-bind指令

對於html標籤的text、value等屬性，Vue裏面提供了v-text、v-model去綁定。但是對於除此以外的其它屬性呢。這就要用到接下來要講的v-bind指令了。博主的理解是v-bind的做用是綁定除了text、value以外的其它html標籤屬性。常見的比方class、style、本身定義標籤的本身定義屬性等。

它的語法例如如下：

v-bind:property="expression"

先來看幾個簡單的樣例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</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>
</body>
<script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School: '光明小學', SchoolLevel: 'red', IsBack:true } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script>
</html>

需要說明的是同一個標籤裏面的同一個屬性。可以既有綁定的寫法，也有靜態的寫法，組件會本身主動幫你合併。比方上文中的class屬性。

獲得效果例如如下：

0x15：v-on指令

屬性jquery的朋友應該很是熟悉這個「on」，對於時間的監聽和綁定。jquery裏面最常用的就是on了。相同，在Vue裏面。v-on指令用來綁定標籤的事件。其語法和v-bind基本類似。

v-on:event="expression";

這裏的event可以是Javascript裏面的常用事件，也可以是本身定義事件。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

這段代碼是一個最簡單的應用。直接在click事件裏面運行邏輯。改變變量的值。效果例如如下：

除了直接在標籤內寫處理邏輯，還可以定義方法事件處理器。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <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> </body> <script type="text/javascript" charset="utf-8"> //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> </html>

0x16：實例一：30分鐘搞定增刪改查

在編寫這個實例以前，首先先說明一下當前文檔中需要引入的庫。

實現效果：

案例源代碼：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link href="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>username</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> </body> <script src="JQuery/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript" charset="utf-8"> //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> </html>

0x17：實例二：帶分頁的表格

上面的樣例用最簡單的方式實現了一個增刪改查，爲了進一步體驗咱們Vue的奇妙，博主更進了一步。用Vue去作了一個客戶端分頁的表格功能。

事實上代碼量並不大。

實現效果：

這裏作出一下改動，參照於原帖中某位讀者的留言，給出一種更優的解決方式。

案例代碼：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link href="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>username</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"> <li v-if="curpage==1" class="disabled"><a href="#">上一頁</a></li> <li v-else v-on:click="PrePage()" ><a href="#">上一頁</a></li> <template v-for="page in pageCount"> <li v-if="page==curpage" 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> </template> <li v-if="curpage==pageCount" class="disabled"><a href="#">下一頁</a></li> <li v-else v-on:click="NextPage()" ><a href="#">下一頁</a></li> </ul> </nav> </div> </body> <script src="JQuery/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript" charset="utf-8"> //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: '在一塊兒' }, { 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,//當前頁的頁碼 }; //ViewModel var vue = new Vue({ el: '#app', data: data, created:function(){ this.pageCount = Math.ceil(this.rows.length/this.pagesize); }, methods: { //上一頁方法 PrePage: function (event) { if (this.curpage>1) { this.curpage = this.curpage-1; } }, //下一頁方法 NextPage: function (event) { if (this.curpage < this.pageCount) { this.curpage = this.curpage+1; } }, //點擊頁碼的方法 NumPage: function (num, event) { if (this.curpage == num) { return; } this.curpage = num; } } }); </script> </html>