像我們平日里做慣了 Java 或者 .NET 這種后端程序員，對於前端的認識還常常停留在 jQuery 時代，包括其插件在需要時就引用一下，不需要就刪除。故觀念使然，盡管 Nuget 和 Maven 用得順溜，但對 NPM 仍不帶感，興許是周邊無人帶動的稀薄氣氛，也或者是沒參加過類似的大型活動，於是在自發性上差了許多。再者，我不用 MVVM 模式，領導也不會扣績效。
為了快速體驗 MVVM 模式，我選擇了非工程化方式來起步，並選擇使用 Vue.js，以及基於它構建的 iView UI 框架。
Vue.js 是美籍華人尤雨溪創作的，那會兒他還在 Google 工作，他自感 Angular.js 繁雜，進而自創了更為簡潔易用的 Vue.js。
iView UI 是由 90 后梁灝[hào]創作，網名 Aresn，在大數據公司 TalkingData 負責可視化基礎架構，更了不起的是他還出了《Vue.js實戰》一書，我是在“雙十一”的前一天買的，行文措詞簡潔，表意直達困惑，入門很迅速，是我喜歡的風格。花了一周時間掃完了前十二章內容，用 WebStorm 練習了大部分實例，盡管書中用一整章內容介紹了 webpack 工程化構建方案，但由於我慣性使然，還是選擇對其跳過而使用了非工程化方式來體驗 Vue.js，其實多少有失暴殄。無奈，畢竟才學了一周，后期時間充裕了再接着分享工程化構建的學習心得吧。
一、 MVVM 模式
Vue.js 比較顯著的特征是解耦了視圖和數據，也就是說視圖的變化不再需要命令式編程去顯式改變，只要修改完數據就能立即自動同步，這是比較大的一個思維模式的轉變，另一個就是組件化思維俯首皆是，這樣開發一個應用就相當是在搭積木。
其實以上對 Vue.js 所闡述的優點也正是 MVVM 模式的寫照，它原是由 MVC 所衍生，即當視圖層發生變化時，會自動更新到視圖模型上，反之亦然，這就是常說的雙向綁定，上一張圖吧：
甭管這圖是否好理解，通俗地來講，MVVM 這種模式拆分了視圖和數據，這樣我們在開發時只要關心數據本身即可，然后視圖 DOM 這方面會由 Vue.js 自動解決。
二、非工程化起步
為了能支撐起一個最基本的應用，需要引入以下幾個必要文件：
- vue.min.2.5.3.js，vue.js 庫
- iview.2.7.0.css，iView 樣式文件
- iview.min.2.7.0.js，iView 庫
- iview /locale/zh-CN.js 語言包
- iview /font 字體包
下載 Vue.js
來到 Github 上的 Vue 項目，直接下載 Zip 源碼：
在 dist 目錄中就可以找到 vue.js 文件：
根據不同的環境選擇一個版本即可，至此第 1 步就搞定了。
下載 iView 系列文件
在 iView 官網的“組件” / “安裝” 頁面的開頭處發現了這個鏈接：https://unpkg.com/iview/ ，通過它可以查看到 dist 目錄：
必要文件都在這里，這些文件無法打包下載，我采取的笨辦法是逐個點開，然后復制其中的內容。
在獲取 iView 相關的 js 和 css 方面還有一個辦法，仔細觀察官網給出的 CDN 地址分別為：
我嘗試將它們放在瀏覽器里進行訪問：
發現地址有變更，不過這並無大礙。
至此，將各個文件放在期望的位置即可：
該圖中各文件的擺放並不是很嚴謹，大家按自己習慣來即可。
三、實例演練
完成以上的准備工作后，就可以結合 iView UI 來正式開發了，接下來基於 table 表格組件演示一下購物車的基本操作。
引入資源
經過起步工作的籌備，可以在新建頁面中逐個地引入這些資源。
HTML head 部分
<head>
<meta charset="UTF-8">
<title>購物車實例</title>
<link rel="stylesheet" href="iViewContent/iview.2.7.0.css">
<script src="utility_js/vue.min.2.5.3.js"></script>
<script src="utility_js/iview.min.2.7.0.js"></script>
<script src="iViewContent/locale/zh-CN.js"></script>
<script>
iview.lang('zh-CN');
</script>
</head>
按一貫的方式引用，樣式居前，隨后緊跟着 vue.js 和 iView.js，以及 iView 中文語言包 zh-CN.js，然后立即調用 lang 方法使其生效。
綁定數據
首先把數據綁定起來，從而看一看整體效果，至於其他的行為操作先不管：
HTML body 部分
<body>
<div id="app">
<i-table id="datatable1"
size="small"
:columns="columns"
:data="cartList"
stripe
highlight-row>
</i-table>
</div>
<script src="iViewUI_cart.js"></script>
</body>
組件 i-table 最核心的兩個屬性分別是 columns 和 data，columns 是列定義，data 則為數據。
這兩個屬性都添加了冒號(:)語法糖，它指代的是 v-bind 指令，表示這個屬性的值是動態綁定的，這樣在運行過程中發現數據有變更時，表格視圖也會迅速的變更。
iViewUI_cart.js 腳本部分
var cart = new Vue({
el: '#app',
data: function () {
return {
cartList: [
{id: 1, name: 'iPhone X', price: 8300.05, count: 1},
{id: 2, name: 'MacBook Pro', price: 18800.75, count: 3},
{id: 3, name: 'Mate 10 Porsche', price: 16600.00, count: 8}
],
columns: [
{
title: '名稱',
key: 'name'
},
{
title: '單價',
key: 'price'
},
{
title: '數量',
key: 'count'
}
]
}
},
methods: {}
});
該文件是與頁面對應的業務腳本，整個文件就負責 new 一個 Vue 實例，並將其賦值給了變量 cart，可以看到的 data 包含了兩個屬性，即表示數據源的 cartList 和 列定義的 columns，二者正好與上述 i-table 的核心屬性相映射。
再次值得注意的是 data，它的值需要以匿名函數的形式進行書寫，即：
function () {
return {}
}
如此，在其 columns 中出現的 Render 函數體內才能正常通過 this 訪問到 methods 中定義的方法。當然本次演示是通過 cart 對象來訪問，故不受此影響。
運行頁面后，數據即可綁定成功。
添加操作所需按鈕
數據呈現出來后，就可以補充必要的按鈕了：
這一步簡單，只需要修改一下 columns 屬性，追加一項“操作”列，添加三個按鈕：
{
title: '數量',
key: 'count'
},
{
title: '操作',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('減少數量');
cart.reduceQuantity(params.row.id);
}
}
}, '-'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('增加數量');
cart.increaseQuantity(params.row.id);
}
}
}, '+'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('刪除當前項');
cart.deleteItem(params.row.id);
}
}
}, '刪除')
]);
}
}
在這里使用到了 Render 函數，該函數的內部機制略顯復雜，作為初步演示只需依樣畫葫蘆即可。
說到 Render 函數，還需要再強調一下在其內部對 methods 中所定義方法的調用，如果試圖通過 this 來調用方法（比如 reduceQuantity），那么 Vue 實例中 data 的值需要使用匿名函數的方式來表達；反之，若是通過 Vue 實例 cart 來調用，則無此顧慮，即 data 的值使用一貫的對象大括號（{}）來表達即可。
添加操作所需方法
操作按鈕已經添加成功了，那就需要有對應的方法去執行，在 Vue.js 中，方法都定義在 methods 屬性中。
減去數量
首先關注一下“減去數量”的定義：
methods: {
reduceQuantity: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
this.cartList[i].count--;
break;
}
}
}
}
通過遍歷找到目標記錄，並將其 count 屬性減一，如同 MVVM 的定義，當數據變更的時候，視圖也跟隨着變化。
但凡是存在於購物車內的商品，其數量至少應該為 1，為防止減到 0，不妨再加一個判斷使其邏輯更為完美：
methods: {
reduceQuantity: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
if (this.cartList[i].count > 1) {
this.cartList[i].count--;
}
break;
}
}
}
},
增加數量
methods: {
increaseQuantity: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
this.cartList[i].count++;
break;
}
}
}
}
只需要針對 count 屬性做 +1 操作即可。
刪除
deleteItem: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
// 詢問是否刪除
this.$Modal.confirm({
title: '提示',
content: '確定要刪除嗎？',
onOk: () => {
this.cartList.splice(i, 1);
},
onCancel: () => {
// 什么也不做
}
});
}
}
}
在刪除邏輯中，當遍歷到目標記錄時，會詢問用戶是否真的要刪除當前記錄，這里用到了 $Modal 對話框，如果用戶點擊確定，那么就執行真正的刪除，看一看效果：
非常漂亮考究的 iView Modal 對話框，令人賞心悅目，一見傾心。
至此，針對 Vue.js 和 iView 框架的體驗就告一段落，后面抽時間再學習一下組件和 Render 函數，提升一下內功修養。