從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

阿新 • • 發佈：2019-01-15

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新......

github：https://github.com/Daotin/Web

部落格園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、品牌管理案例

如下圖，

1、實現輸入id和name後，點選add按鈕，新增到table中；

2、點選資料的del，可以刪除這條資料。

程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            position: relative;
        }
      
        /* 實現任意無寬高盒子居中顯示 */
        #app {
            position: absolute;
            left: 50%;
            top: 100px;
            transform: translateX(-50%);
        }

        .box {
            width: 500px;
            height: 40px;
            background-color: #ccc;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-bottom: none;
        }

        .tb {
            width: 500px;
            text-align: center;
            border-collapse: collapse;
            border-color: #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <label for="id">
                ID:
                <input type="text" id="id" v-model="id">
            </label>
            <label for="name">
                name:
                <input type="text" id="name" v-model="name">
            </label>
            <input type="button" value="add" @click="addClick">
        </div>

        <table border="1" cellspacing="0" class="tb">
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td>
                    <!-- 繫結的事件是可以傳引數的，這裡傳入需要刪除的物件id -->
                    <a href="javascript:;" @click.prevent="delClick(item.id)">del</a>
                </td>
            </tr>
        </table>
    </div>


    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                list: [{
                        id: 1,
                        name: 'tony',
                        ctime: new Date()
                    },
                    {
                        id: 2,
                        name: 'stark',
                        ctime: new Date()
                    }
                ]
            },
            methods: {
                addClick() {
                    // 1.獲取表單資料
                    // 2.組織出一個物件
                    // 3.將物件新增到data中（不需要重新渲染頁面）
                    let item = {
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    };
                    if ((this.id != "") && (this.name != "")) {
                        this.list.push(item);
                    }
                    // 4.最後將表單清空
                    this.id = this.name = "";
                },
                delClick(id) {
                    // 1.根據id找到索引（迴圈查詢）
                    // 2.呼叫陣列的 splice方法刪除
                    this.list.filter((item, index) => {
                        if (item.id == id) {
                            this.list.splice(index, 1);
                            return true;
                        }
                    });

                }
            }

        });
    </script>
</body>
</html>

注意：

1、事件名後面可以加括號（@click="addClick" 等價於 @click="addClick() ，這樣寫的話，就可以傳參。）

1、增加搜尋需求

在Query中輸入字串，如果name項中包括Query中的字串，則顯示。

分析：

如果要滿足條件才顯示相關行，那麼 <tr v-for="item in list"> 中的list就是一個可變的。這裡我們使用一個函式，函式裡面進行判斷是否包含Query中的字串，然後將包含的拷貝到新陣列中，填充到list的位置：

<tr v-for="item in search(keywords)">

methods: {
                addClick() {
                  //...
                },
                delClick(id) {
                  //...
                },
                // 新增的用於判斷的函式
                search(keywords) {
                    // 定義新陣列儲存符合條件的項
                    let newList = [];
                    this.list.forEach((item, index) => {
                        // 包含則返回true
                        if (item.name.includes(keywords)) {
                            newList.push(item);
                        }
                    });
                    return newList;
                }
            }

全部原始碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            position: relative;
        }

        /* 實現任意無寬高盒子居中 */

        #app {
            position: absolute;
            left: 50%;
            top: 100px;
            transform: translateX(-50%);
        }

        .box {
            width: 800px;
            height: 40px;
            background-color: #ccc;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-bottom: none;
        }

        .box>input[type="button"] {
            width: 60px;
            background-color: #aaa;
            border: 0;
            border: 1px solid #aaa;
        }

        .tb {
            width: 800px;
            text-align: center;
            border-collapse: collapse;
            border-color: #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <label for="id">
                ID:
                <input type="text" id="id" v-model="id">
            </label>
            <label for="name">
                name:
                <input type="text" id="name" v-model="name">
            </label>
            <input type="button" value="add" @click="addClick">
            <label for="sel">
                Query:
                <input type="text" id="sel" v-model="keywords">
            </label>
        </div>

        <table border="1" cellspacing="0" class="tb">
            <!-- 有查詢的話，這裡就不應該固定死，而是根據keywords動態生成新的陣列 -->
            <!-- <tr v-for="item in list"></tr> -->
            <tr v-for="item in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime | ctimeFormat}}</td>
                <td>
                    <!-- 繫結的事件是可以傳引數的，這裡傳入需要刪除的物件id -->
                    <a href="javascript:;" @click.prevent="delClick(item.id)">del</a>
                </td>
            </tr>
        </table>
    </div>


    <script>
        // ctime 過濾器
        Vue.filter('ctimeFormat', (data) => {
            let time = new Date(data);

            let year = time.getFullYear();
            let month = (time.getMonth() + 1).toString().padStart(2, '0');
            let day = (time.getDate()).toString().padStart(2, '0');
            let hour = (time.getHours()).toString().padStart(2, '0');
            let minute = (time.getMinutes()).toString().padStart(2, '0');
            let second = (time.getSeconds()).toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        });

        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                keywords: "",
                list: [{
                        id: 1,
                        name: 'tony',
                        ctime: new Date()
                    },
                    {
                        id: 2,
                        name: 'stark',
                        ctime: new Date()
                    }
                ]
            },
            methods: {
                addClick() {
                    // 1.獲取表單資料
                    // 2.組織處一個物件
                    // 3.將物件新增到data中（不需要重新渲染頁面）
                    let item = {
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    };
                    if ((this.id != "") && (this.name != "")) {
                        this.list.push(item);
                    }
                    // 4.最後將表單清空
                    this.id = this.name = "";
                },
                delClick(id) {
                    // 1.根據id找到索引（迴圈查詢）
                    // 2.呼叫陣列的 splice方法刪除
                    this.list.filter((item, index) => {
                        if (item.id == id) {
                            this.list.splice(index, 1);
                            return true;
                        }
                    });

                },
                search(keywords) {
                    // 定義新陣列儲存符合條件的項
                    let newList = [];
                    this.list.forEach((item, index) => {
                        // 包含則返回true
                        if (item.name.includes(keywords)) {
                            newList.push(item);
                        }
                    });
                    return newList;
                }
            }

        });
    </script>
</body>

</html>

二、過濾器

vue 允許自定義過濾器，可被用作一些常見的文字格式化。

過濾器只能用在兩個地方：插值表示式和 v-bind表示式 。

1、全域性過濾器

基本用法：

<body>
    <div id="box">
        <p>{{msg | msgFormat}}</p>
    </div>

    <script>
        // 使用Vue.filter來定義一個過濾器：
        // 第一個引數：過濾器函式名稱
        // 第二個引數：過濾器函式體
        // 過濾器的引數就是管道符的前面待處理的字串。
        Vue.filter('msgFormat', (data) => {
            return data.replace("vue", "Daotin");
        });

        var vm = new Vue({
            el: " #box ",
            data: {
                msg: "hello vue"
            },
            methods: {}
        });
    </script>
</body>

1、使用 Vue.filter(); 來定義一個過濾器。

2、第一個引數：過濾器函式名稱；第二個引數：過濾器函式體

3、過濾器的引數就是管道符的前面待處理的字串。

插值表示式裡的過濾器函式可以帶引數：

相應的，在 Vue.filter('msgFormat', (data, arg1,arg2,...) 中msgFormat 的引數從第二位開始放置。

可以帶多個引數。

<body>
    <div id="box">
        <p>{{msg | msgFormat('is a boy', 'and good')}}</p>
    </div>

    <script>
        // 使用Vue.filter來定義一個過濾器：
        // 第一個引數：過濾器函式名稱
        // 第二個引數：過濾器函式體
        // 過濾器的引數就是管道符的前面待處理的字串。
        Vue.filter('msgFormat', (data, arg1, arg2) => {
            return data.replace("vue", "Daotin " + arg1 + arg2);
        });

        var vm = new Vue({
            el: " #box ",
            data: {
                msg: "hello vue"
            },
            methods: {}
        });
    </script>
</body>

使用全域性過濾器格式化品牌管理案例的 ctime：

<td>{{item.ctime | ctimeFormat}}</td>
...

// ctime 過濾器
Vue.filter('ctimeFormat', (data) => {
  let time = new Date(data);

  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  let hour = time.getHours();
  let minute = time.getMinutes();

  return `${year}-${month}-${day} ${hour}:${minute}`;
});

2、私有過濾器

全域性過濾器就是如果有多個vm例項的話，所有的VM例項都可以使用。

全域性過濾器書寫在 script直接標籤下。

而私有過濾器書寫在VM物件中：

注意：過濾器的呼叫原則是就近原則，即先呼叫私有過濾器再呼叫全域性過濾器。

padStart和padEnd

// ctime 過濾器
Vue.filter('ctimeFormat', (data) => {
    let time = new Date(data);

    let year = time.getFullYear();
    let month = (time.getMonth() + 1).toString().padStart(2, '0');
    let day = (time.getDate()).toString().padStart(2, '0');
    let hour = (time.getHours()).toString().padStart(2, '0');
    let minute = (time.getMinutes()).toString().padStart(2, '0');
    let second = (time.getSeconds()).toString().padStart(2, '0');

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
});

使用ES6中的字串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字串；

padStart：從開頭填充

padEnd：從結尾填充

maxLength：填充後最大的長度

fillString：需要填充的字串（fillString=''，不填則以空字元填充）

三、按鍵修飾符

我們現在有個需求就是輸入ID和name後不點選add按鈕，而是按下回車鍵也需要新增到列表中。

我們可以在name輸入框中加入按鍵擡起事件，並且指定是enter鍵擡起時才觸發。

<label for="name">
  name:
  <input type="text" id="name" v-model="name" @keyup.enter="addClick">

.enter ：就是按鍵修飾符。

系統提供的按鍵修飾符有：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

如果我們想自定義其他的按鍵怎麼辦呢？

通過Vue.config.keyCodes.f2 = 113; ；可以將f2作為按鍵修飾符新增到系統按鍵修飾符中。

具體每個按鍵的值是多少？下面是常見的按鍵的碼。

keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24

示例：

<input type="text" id="name" v-model="name" @keyup.f2="addClick">
  
 //...
  
<script>
    Vue.config.keyCodes.f2 = 113;
</script>

四、自定義指令

除了核心功能預設內建的指令 (v-model 等)，Vue 也允許註冊自定義指令。自定義指令是以 v-開頭的指令。

比如我們想讓品牌管理案例中，在剛進入頁面的時候，就獲取 Query輸入框的焦點，但是vue並沒有提供這樣的指令。

之前我們可以通過獲取DOM元素，然後使用 DOM元素.focus(); 方法來獲取焦點。但是在vue裡面不推薦獲取DOM元素的方式。這時我們可以使用自定義指令的方式來達到獲取焦點。

比如：我們想定義一個v-focus 的指令來獲取焦點。

<label for="sel">
  Query:
  <input type="text" id="sel" v-model="keywords" v-focus>
</label>

<script>
    // 自定義全域性指令 v-focus，為繫結的元素自動獲取焦點：
        Vue.directive('focus', {
            inserted: function (el) { // inserted 表示被繫結元素插入父節點時呼叫
                el.focus();
            }
        });
</script>

1、定義自定義指令的時候，不需要加v- ，使用的時候需要加。

2、注意：在每個函式中，第一個引數，永遠是 el ，表示被綁定了指令的那個元素，這個 el 引數，是一個原生的JS物件。

3、和JS行為有關的操作，最好在 inserted 中去執行

1、鉤子函式

inserted 是鉤子函式，類似的鉤子函式還有幾個，但是應用場景不同：

inserted ：被繫結元素插入DOM元素時呼叫一次（從記憶體渲染到頁面時如果綁定了 inserted 就執行）。
bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定（在程式碼載入到記憶體中的時候，如果綁定了bind就執行，比如樣式style的設定，使用bind繫結）。
update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。

總結：一般：

1、與JS行為相關的操作在inserted中執行；

2、與樣式相關的在bind中執行。

2、鉤子函式引數

指令鉤子函式會被傳入以下引數：

el：指令所繫結的元素，可以用來直接操作 DOM 。
binding：一個物件，包含以下屬性：
- name：指令名，不包括 v- 字首。
- value：指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2。
- expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"。
- ...
...

我們可以為自定義指令賦值，比如我們想給Query文字框的字型顏色賦值：

<label for="sel">
  Query:
  <input type="text" id="sel" v-model="keywords" v-focus v-color="'red'">
</label>

之所以使用v-color="'red'"，而不是v-color="red"，是因為如果是red字串的話，就當做變數在vue的data中查詢，而這裡要表達的是字串red。

自定義v-color指令：

Vue.directive("color", {
  bind(el, binding) {
    el.style.color = binding.value;
  }
});

binding：這個名稱可以隨意。

3、自定義私有指令

自定義私有指令就是在vm例項中加入 directives 屬性，它是一個物件，其中屬性為自定義指令的名稱（不加 v-），值也是一個物件，物件裡面是鉤子函式列表。

var vm = new Vue({
  el: "#app",
  data: {
    //...
  },
  methods: {
    //...
  },
  directives: {
    "color": {
      bind(el, binding) {
        el.style.color = binding.value;
      }
    }
  }
});

4、自定義指令的簡寫

我們之前都是在自定義指令名稱的後面跟上一個物件，裡面寫上 bind，inserted，update的鉤子函式列表。

現在簡寫的話，就不需要跟上一個物件了：

directives: {
  "color": (el, binding) => {
    el.style.color = binding.value;
  }
}

自定義名稱後可以直接跟上一個匿名函式，這個匿名函式就相當於bind和update的鉤子函式集合。所以，如果你只需要在bind或者update中進行元素的設定的話，就可以用這種簡寫的方式，當然如果是inserted的話，還是要寫回物件的方式。

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

一、品牌管理案例

1、增加搜尋需求

二、過濾器

1、全域性過濾器

2、私有過濾器

三、按鍵修飾符

四、自定義指令

1、鉤子函式

2、鉤子函式引數

3、自定義私有指令

4、自定義指令的簡寫

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

從零開始學 Web 之 Vue.js（三）Vue實例的生命周期

從零開始學 Web 之 Vue.js（四）Vue的Ajax請求和跨域

從零開始學 Web 之 Vue.js（五）Vue的動畫

從零開始學 Web 之 Vue.js（六）Vue的元件

從零開始學 Web 之 Vue.js（一）Vue.js概述，基本結構，指令，事件修飾符，樣式

從零開始學 Web 之 JavaScript 高階（一）原型，貪吃蛇案例

從零開始學 Web 之 JS 高級（二）原型鏈，原型的繼承

從零開始學 Web 之 JS 高級（三）apply與call，bind，閉包和沙箱

從零開始學 Web 之 JS 高階（三）apply與call，bind，閉包和沙箱

從零開始學 Web 之 JS 高階（二）原型鏈，原型的繼承

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

從零開始學 Web 之 DOM（四）節點

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

從零開始學 Web 之 Ajax服務器相關概念OA現金盤平臺制作

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

一、品牌管理案例

1、增加搜尋需求

二、過濾器

1、全域性過濾器

2、私有過濾器

三、按鍵修飾符

四、自定義指令

1、鉤子函式

2、鉤子函式引數

3、自定義私有指令

4、自定義指令的簡寫

相關推薦