溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
如何實(shí)現(xiàn)Vue.js中的iViewUI框架非工程化，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。
一、 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ǔ)充必要的按鈕了：
這一步簡單，只需要修改一下 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ì)話框，令人賞心悅目，一見傾心。
看完上述內(nèi)容，你們掌握如何實(shí)現(xiàn)Vue.js中的iViewUI框架非工程化的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼