基於 Vue.js 之 iView UI 框架非工程化實踐記要

時間  2019-12-11
標籤 基於 vue.js vue iview 框架 工程 實踐 記要 欄目 JavaScript 简体版
原文   原文鏈接

Markdown

像咱們平日裏作慣了 Java 或者 .NET 這種後端程序員，對於前端的認識還經常停留在 jQuery 時代，包括其插件在須要時就引用一下，不須要就刪除。故觀念使然，儘管 Nuget 和 Maven 用得順溜，但對 NPM 仍不帶感，興許是周邊無人帶動的稀薄氣氛，也或者是沒參加過相似的大型活動，因而在自發性上差了許多。再者，我不用 MVVM 模式，領導也不會扣績效。javascript

爲了快速體驗 MVVM 模式，我選擇了非工程化方式來起步，並選擇使用 Vue.js，以及基於它構建的 iView UI 框架。css

Vue.js 是美籍華人尤雨溪創做的，那會兒他還在 Google 工做，他自感 Angular.js 繁雜，進而自創了更爲簡潔易用的 Vue.js。html

iView UI 是由 90 後梁灝[hào]創做，網名 Aresn，在大數據公司 TalkingData 負責可視化基礎架構，更了不得的是他還出了《Vue.js實戰》一書，我是在「雙十一」的前一天買的，行文措詞簡潔，表意直達困惑，入門很迅速，是我喜歡的風格。花了一週時間掃完了前十二章內容，用 WebStorm 練習了大部分實例，儘管書中用一整章內容介紹了 webpack 工程化構建方案，但因爲我慣性使然，仍是選擇對其跳過而使用了非工程化方式來體驗 Vue.js，其實多少有失暴殄。無奈，畢竟才學了一週，後期時間充裕了再接着分享工程化構建的學習心得吧。前端

1、 MVVM 模式

Vue.js 比較顯著的特徵是解耦了視圖和數據，也就是說視圖的變化再也不須要命令式編程去顯式改變，只要修改完數據就能當即自動同步，這是比較大的一個思惟模式的轉變，另外一個就是組件化思惟俯首皆是，這樣開發一個應用就至關是在搭積木。vue

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

Markdown

甭管這圖是否好理解，通俗地來說，MVVM 這種模式拆分了視圖和數據，這樣咱們在開發時只要關心數據自己便可，而後視圖 DOM 這方面會由 Vue.js 自動解決。webpack

2、非工程化起步

爲了能支撐起一個最基本的應用，須要引入如下幾個必要文件：git

  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 源碼：程序員

Markdown

在 dist 目錄中就能夠找到 vue.js 文件：github

Markdown

根據不一樣的環境選擇一個版本便可，至此第 1 步就搞定了。

下載 iView 系列文件

在 iView 官網的「組件」 / 「安裝」 頁面的開頭處發現了這個連接：https://unpkg.com/iview/ ，經過它能夠查看到 dist 目錄：

Markdown

必要文件都在這裏，這些文件沒法打包下載，我採起的笨辦法是逐個點開，而後複製其中的內容。

在獲取 iView 相關的 js 和 css 方面還有一個辦法，仔細觀察官網給出的 CDN 地址分別爲：

我嘗試將它們放在瀏覽器裏進行訪問：

Markdown

發現地址有變動，不過這並沒有大礙。

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

Markdown

該圖中各文件的擺放並非很嚴謹，你們按本身習慣來便可。

3、實例演練

完成以上的準備工做後，就能夠結合 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 方法使其生效。

綁定數據

首先把數據綁定起來，從而看一看總體效果，至於其餘的行爲操做先無論：

Markdown

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 對象來訪問，故不受此影響。

運行頁面後，數據便可綁定成功。

添加操做所需按鈕

數據呈現出來後，就能夠補充必要的按鈕了：

Markdown

這一步簡單，只須要修改一下 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 對話框，若是用戶點擊肯定，那麼就執行真正的刪除，看一看效果：

Markdown

很是漂亮考究的 iView Modal 對話框，使人賞心悅目，一見鍾情。

至此，針對 Vue.js 和 iView 框架的體驗就告一段落，後面抽時間再學習一下組件和 Render 函數，提高一下內功修養。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程