基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄(推薦)
像我們平日里做慣了 Java 或者 .NET 這種后端程序員，對(duì)于前端的認(rèn)識(shí)還常常停留在 jQuery 時(shí)代，包括其插件在需要時(shí)就引用一下，不需要就刪除。故觀念使然，盡管 Nuget 和 Maven 用得順溜，但對(duì) NPM 仍不帶感，興許是周邊無人帶動(dòng)的稀薄氣氛，也或者是沒參加過類似的大型活動(dòng)，于是在自發(fā)性上差了許多。再者，我不用 MVVM 模式，領(lǐng)導(dǎo)也不會(huì)扣績(jī)效。
為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。
Vue.js 是美籍華人尤雨溪?jiǎng)?chuàng)作的，那會(huì)兒他還在 Google 工作，他自感 Angular.js 繁雜，進(jìn)而自創(chuàng)了更為簡(jiǎn)潔易用的 Vue.js。
iView UI 是由 90 后梁灝[hào]創(chuàng)作，網(wǎng)名 Aresn，在大數(shù)據(jù)公司 TalkingData 負(fù)責(zé)可視化基礎(chǔ)架構(gòu)，更了不起的是他還出了《Vue.js實(shí)戰(zhàn)》一書，我是在“雙十一”的前一天買的，行文措詞簡(jiǎn)潔，表意直達(dá)困惑，入門很迅速，是我喜歡的風(fēng)格。花了一周時(shí)間掃完了前十二章內(nèi)容，用 WebStorm 練習(xí)了大部分實(shí)例，盡管書中用一整章內(nèi)容介紹了 webpack 工程化構(gòu)建方案，但由于我慣性使然，還是選擇對(duì)其跳過而使用了非工程化方式來體驗(yàn) Vue.js，其實(shí)多少有失暴殄。無奈，畢竟才學(xué)了一周，后期時(shí)間充裕了再接著分享工程化構(gòu)建的學(xué)習(xí)心得吧。
一、 MVVM 模式
Vue.js 比較顯著的特征是解耦了視圖和數(shù)據(jù)，也就是說視圖的變化不再需要命令式編程去顯式改變，只要修改完數(shù)據(jù)就能立即自動(dòng)同步，這是比較大的一個(gè)思維模式的轉(zhuǎn)變，另一個(gè)就是組件化思維俯首皆是，這樣開發(fā)一個(gè)應(yīng)用就相當(dāng)是在搭積木。
其實(shí)以上對(duì) Vue.js 所闡述的優(yōu)點(diǎn)也正是 MVVM 模式的寫照，它原是由 MVC 所衍生，即當(dāng)視圖層發(fā)生變化時(shí)，會(huì)自動(dòng)更新到視圖模型上，反之亦然，這就是常說的雙向綁定，上一張圖吧：
甭管這圖是否好理解，通俗地來講，MVVM 這種模式拆分了視圖和數(shù)據(jù)，這樣我們?cè)陂_發(fā)時(shí)只要關(guān)心數(shù)據(jù)本身即可，然后視圖 DOM 這方面會(huì)由 Vue.js 自動(dòng)解決。
二、非工程化起步
為了能支撐起一個(gè)最基本的應(yīng)用，需要引入以下幾個(gè)必要文件：
- 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 項(xiàng)目，直接下載 Zip 源碼：
在 dist 目錄中就可以找到 vue.js 文件：
根據(jù)不同的環(huán)境選擇一個(gè)版本即可，至此第 1 步就搞定了。
下載 iView 系列文件
在 iView 官網(wǎng)的“組件” / “安裝” 頁面的開頭處發(fā)現(xiàn)了這個(gè)鏈接：https://unpkg.com/iview/**，通過它可以查看到 dist** 目錄：
必要文件都在這里，這些文件無法打包下載，我采取的笨辦法是逐個(gè)點(diǎn)開，然后復(fù)制其中的內(nèi)容。
在獲取 iView 相關(guān)的 js 和 css 方面還有一個(gè)辦法，仔細(xì)觀察官網(wǎng)給出的 CDN 地址分別為：
http://unpkg.com/iview/dist/iview.min.js
http://unpkg.com/iview/dist/styles/iview.css
我嘗試將它們放在瀏覽器里進(jìn)行訪問：
發(fā)現(xiàn)地址有變更，不過這并無大礙。
至此，將各個(gè)文件放在期望的位置即可：
該圖中各文件的擺放并不是很嚴(yán)謹(jǐn)，大家按自己習(xí)慣來即可。
三、實(shí)例演練
完成以上的準(zhǔn)備工作后，就可以結(jié)合 iView UI 來正式開發(fā)了，接下來基于 table 表格組件演示一下購物車的基本操作。
引入資源
經(jīng)過起步工作的籌備，可以在新建頁面中逐個(gè)地引入這些資源。
HTML head 部分
<head>
<meta charset="UTF-8">
<title>購物車實(shí)例</title>
<link rel="stylesheet" href="iViewContent/iview.2.7.0.css" rel="external nofollow" >
<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，然后立即調(diào)用 lang 方法使其生效。
綁定數(shù)據(jù)
首先把數(shù)據(jù)綁定起來，從而看一看整體效果，至于其他的行為操作先不管：
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 最核心的兩個(gè)屬性分別是 columns 和 data，columns 是列定義，data 則為數(shù)據(jù)。
這兩個(gè)屬性都添加了冒號(hào)(:)語法糖，它指代的是 v-bind 指令，表示這個(gè)屬性的值是動(dòng)態(tài)綁定的，這樣在運(yùn)行過程中發(fā)現(xiàn)數(shù)據(jù)有變更時(shí)，表格視圖也會(huì)迅速的變更。
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: '單價(jià)',
key: 'price'
},
{
title: '數(shù)量',
key: 'count'
}
]
}
},
methods: {}
});
該文件是與頁面對(duì)應(yīng)的業(yè)務(wù)腳本，整個(gè)文件就負(fù)責(zé) new 一個(gè) Vue 實(shí)例，并將其賦值給了變量 cart，可以看到的 data 包含了兩個(gè)屬性，即表示數(shù)據(jù)源的 cartList 和 列定義的 columns，二者正好與上述 i-table 的核心屬性相映射。
再次值得注意的是 data，它的值需要以匿名函數(shù)的形式進(jìn)行書寫，即：
function () {
return {}
}
如此，在其 columns 中出現(xiàn)的 Render 函數(shù)體內(nèi)才能正常通過 this 訪問到 methods 中定義的方法。當(dāng)然本次演示是通過 cart 對(duì)象來訪問，故不受此影響。
運(yùn)行頁面后，數(shù)據(jù)即可綁定成功。
添加操作所需按鈕
數(shù)據(jù)呈現(xiàn)出來后，就可以補(bǔ)充必要的按鈕了：
這一步簡(jiǎn)單，只需要修改一下 columns 屬性，追加一項(xiàng)“操作”列，添加三個(gè)按鈕：
{
title: '數(shù)量',
key: 'count'
},
{
title: '操作',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('減少數(shù)量');
cart.reduceQuantity(params.row.id);
}
}
}, '-'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('增加數(shù)量');
cart.increaseQuantity(params.row.id);
}
}
}, '+'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.info('刪除當(dāng)前項(xiàng)');
cart.deleteItem(params.row.id);
}
}
}, '刪除')
]);
}
}
在這里使用到了 Render 函數(shù)，該函數(shù)的內(nèi)部機(jī)制略顯復(fù)雜，作為初步演示只需依樣畫葫蘆即可。
說到 Render 函數(shù)，還需要再強(qiáng)調(diào)一下在其內(nèi)部對(duì) methods 中所定義方法的調(diào)用，如果試圖通過 this 來調(diào)用方法（比如 reduceQuantity），那么 Vue 實(shí)例中 data 的值需要使用匿名函數(shù)的方式來表達(dá)；反之，若是通過 Vue 實(shí)例 cart 來調(diào)用，則無此顧慮，即 data 的值使用一貫的對(duì)象大括號(hào)（{}）來表達(dá)即可。
添加操作所需方法
操作按鈕已經(jīng)添加成功了，那就需要有對(duì)應(yīng)的方法去執(zhí)行，在 Vue.js 中，方法都定義在 methods 屬性中。
減去數(shù)量
首先關(guān)注一下“減去數(shù)量”的定義：
methods: {
reduceQuantity: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
this.cartList[i].count--;
break;
}
}
}
}
通過遍歷找到目標(biāo)記錄，并將其 count 屬性減一，如同 MVVM 的定義，當(dāng)數(shù)據(jù)變更的時(shí)候，視圖也跟隨著變化。
但凡是存在于購物車內(nèi)的商品，其數(shù)量至少應(yīng)該為 1，為防止減到 0，不妨再加一個(gè)判斷使其邏輯更為完美：
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;
}
}
}
},
增加數(shù)量
methods: {
increaseQuantity: function (id) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].id === id) {
this.cartList[i].count++;
break;
}
}
}
}
只需要針對(duì) 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: '確定要?jiǎng)h除嗎？',
onOk: () => {
this.cartList.splice(i, 1);
},
onCancel: () => {
// 什么也不做
}
});
}
}
}
在刪除邏輯中，當(dāng)遍歷到目標(biāo)記錄時(shí)，會(huì)詢問用戶是否真的要?jiǎng)h除當(dāng)前記錄，這里用到了 $Modal 對(duì)話框，如果用戶點(diǎn)擊確定，那么就執(zhí)行真正的刪除，看一看效果：
非常漂亮考究的 iView Modal 對(duì)話框，令人賞心悅目，一見傾心。
至此，針對(duì) Vue.js 和 iView 框架的體驗(yàn)就告一段落，后面抽時(shí)間再學(xué)習(xí)一下組件和 Render 函數(shù)，提升一下內(nèi)功修養(yǎng)。
相關(guān)文章
vue實(shí)現(xiàn)的樹形結(jié)構(gòu)加多選框示例
這篇文章主要介紹了vue實(shí)現(xiàn)的樹形結(jié)構(gòu)加多選框,結(jié)合實(shí)例形式分析了在之前遞歸組件實(shí)現(xiàn)vue樹形結(jié)構(gòu)的基礎(chǔ)之上再加上多選框功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
利用vue-i18n實(shí)現(xiàn)多語言切換效果的方法
這篇文章主要給大家介紹了關(guān)于利用vue-i18n實(shí)現(xiàn)多語言切換效果的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-i18n具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue3.0使用taro-ui-vue3引入組件不生效的問題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案
這篇文章主要介紹了詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11