這篇文章給大家分享的是有關(guān)Vue.js之iView UI框架非工程化的示例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專注于淮安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)?；窗簿W(wǎng)站建設(shè)公司,為淮安等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

Vue.js 之 iView UI 框架非工程化實踐

iView UI 是由 90 后梁灝[hào]創(chuàng)作，網(wǎng)名 Aresn，在大數(shù)據(jù)公司 TalkingData 負(fù)責(zé)可視化基礎(chǔ)架構(gòu)，更了不起的是他還出了《Vue.js實戰(zhàn)》一書，我是在“雙十一”的前一天買的，行文措詞簡潔，表意直達(dá)困惑，入門很迅速，是我喜歡的風(fēng)格。花了一周時間掃完了前十二章內(nèi)容，用 WebStorm 練習(xí)了大部分實例，盡管書中用一整章內(nèi)容介紹了 webpack 工程化構(gòu)建方案，但由于我慣性使然，還是選擇對其跳過而使用了非工程化方式來體驗 Vue.js，其實多少有失暴殄。無奈，畢竟才學(xué)了一周，后期時間充裕了再接著分享工程化構(gòu)建的學(xué)習(xí)心得吧。

一、 MVVM 模式

Vue.js 比較顯著的特征是解耦了視圖和數(shù)據(jù)，也就是說視圖的變化不再需要命令式編程去顯式改變，只要修改完數(shù)據(jù)就能立即自動同步，這是比較大的一個思維模式的轉(zhuǎn)變，另一個就是組件化思維俯首皆是，這樣開發(fā)一個應(yīng)用就相當(dāng)是在搭積木。

其實以上對 Vue.js 所闡述的優(yōu)點也正是 MVVM 模式的寫照，它原是由 MVC 所衍生，即當(dāng)視圖層發(fā)生變化時，會自動更新到視圖模型上，反之亦然，這就是常說的雙向綁定，上一張圖吧：

甭管這圖是否好理解，通俗地來講，MVVM 這種模式拆分了視圖和數(shù)據(jù)，這樣我們在開發(fā)時只要關(guān)心數(shù)據(jù)本身即可，然后視圖 DOM 這方面會由 Vue.js 自動解決。

二、非工程化起步

為了能支撐起一個最基本的應(yīng)用，需要引入以下幾個必要文件：

1. vue.min.2.5.3.js，vue.js 庫

2. iview.2.7.0.css，iView 樣式文件

3. iview.min.2.7.0.js，iView 庫

4. iview /locale/zh-CN.js 語言包

5. iview /font 字體包

下載 Vue.js

來到 Github 上的 Vue 項目，直接下載 Zip 源碼：

在 dist 目錄中就可以找到 vue.js 文件：

根據(jù)不同的環(huán)境選擇一個版本即可，至此第 1 步就搞定了。

下載 iView 系列文件

在 iView 官網(wǎng)的“組件” / “安裝” 頁面的開頭處發(fā)現(xiàn)了這個鏈接：https://unpkg.com/iview/**，通過它可以查看到 dist** 目錄：

必要文件都在這里，這些文件無法打包下載，我采取的笨辦法是逐個點開，然后復(fù)制其中的內(nèi)容。

在獲取 iView 相關(guān)的 js 和 css 方面還有一個辦法，仔細(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)地址有變更，不過這并無大礙。

至此，將各個文件放在期望的位置即可：

該圖中各文件的擺放并不是很嚴(yán)謹(jǐn)，大家按自己習(xí)慣來即可。

三、實例演練

完成以上的準(zhǔn)備工作后，就可以結(jié)合 iView UI 來正式開發(fā)了，接下來基于 table 表格組件演示一下購物車的基本操作。

引入資源

經(jīng)過起步工作的籌備，可以在新建頁面中逐個地引入這些資源。

HTML head 部分

按一貫的方式引用，樣式居前，隨后緊跟著 vue.js 和 iView.js，以及 iView 中文語言包 zh-CN.js，然后立即調(diào)用 lang 方法使其生效。

綁定數(shù)據(jù)

首先把數(shù)據(jù)綁定起來，從而看一看整體效果，至于其他的行為操作先不管：

HTML body 部分

組件 i-table 最核心的兩個屬性分別是 columns 和 data，columns 是列定義，data 則為數(shù)據(jù)。

這兩個屬性都添加了冒號(:)語法糖，它指代的是 v-bind 指令，表示這個屬性的值是動態(tài)綁定的，這樣在運行過程中發(fā)現(xiàn)數(shù)據(jù)有變更時，表格視圖也會迅速的變更。

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: '數(shù)量',
   key: 'count'
  }
  ]
 }
 },
 methods: {}
});

該文件是與頁面對應(yīng)的業(yè)務(wù)腳本，整個文件就負(fù)責(zé) new 一個 Vue 實例，并將其賦值給了變量 cart，可以看到的 data 包含了兩個屬性，即表示數(shù)據(jù)源的 cartList 和 列定義的 columns，二者正好與上述 i-table 的核心屬性相映射。

再次值得注意的是 data，它的值需要以匿名函數(shù)的形式進(jìn)行書寫，即：

function () {
 return {}
}

如此，在其 columns 中出現(xiàn)的 Render 函數(shù)體內(nèi)才能正常通過 this 訪問到 methods 中定義的方法。當(dāng)然本次演示是通過 cart 對象來訪問，故不受此影響。

運行頁面后，數(shù)據(jù)即可綁定成功。

添加操作所需按鈕

數(shù)據(jù)呈現(xiàn)出來后，就可以補充必要的按鈕了：

這一步簡單，只需要修改一下 columns 屬性，追加一項“操作”列，添加三個按鈕：

{
 title: '數(shù)量',
 key: 'count'
},
{
 title: '操作',
 render: (h, params) => {
 return h('p', [
  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)前項');
   cart.deleteItem(params.row.id);
   }
  }
  }, '刪除')
 ]);
 }
}

在這里使用到了 Render 函數(shù)，該函數(shù)的內(nèi)部機制略顯復(fù)雜，作為初步演示只需依樣畫葫蘆即可。

說到 Render 函數(shù)，還需要再強調(diào)一下在其內(nèi)部對 methods 中所定義方法的調(diào)用，如果試圖通過 this 來調(diào)用方法（比如 reduceQuantity），那么 Vue 實例中 data 的值需要使用匿名函數(shù)的方式來表達(dá)；反之，若是通過 Vue 實例 cart 來調(diào)用，則無此顧慮，即 data 的值使用一貫的對象大括號（{}）來表達(dá)即可。

添加操作所需方法

操作按鈕已經(jīng)添加成功了，那就需要有對應(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ù)變更的時候，視圖也跟隨著變化。

但凡是存在于購物車內(nèi)的商品，其數(shù)量至少應(yīng)該為 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;
  }
 }
 }
},

增加數(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;
  }
 }
 }
}

只需要針對 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: () => {
   // 什么也不做
  }
  });
 }
 }
}

在刪除邏輯中，當(dāng)遍歷到目標(biāo)記錄時，會詢問用戶是否真的要刪除當(dāng)前記錄，這里用到了 $Modal 對話框，如果用戶點擊確定，那么就執(zhí)行真正的刪除，看一看效果：

非常漂亮考究的 iView Modal 對話框，令人賞心悅目，一見傾心。

至此，針對 Vue.js 和 iView 框架的體驗就告一段落，后面抽時間再學(xué)習(xí)一下組件和 Render 函數(shù)，提升一下內(nèi)功修養(yǎng)。

感謝各位的閱讀！關(guān)于“Vue.js之iView UI框架非工程化的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！