vue基础 02

1. 过滤器

过滤器可被用在插值表达式中和v-bind:中

1
2
3

<!-- 变量 | 过滤器名 -->
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>

过滤器可分为全局过滤器和私有过滤器器

全局过滤器所有vue实例对象都能引用；私有过滤器只有在自己的实例化vue对象中能引用

全局过滤器(格式化时间)

1
2
3
4
5
6
7
8
9
10
11

{{item.time | dataFormat('YYYY/MM/DD')}}
//带参数的过滤器
//data是引用过滤器的变量
//format的实参是过滤器dataFormat('YYYY/MM/DD')传的字符串
Vue.filter('dataFormat', function (data, format) {
    var dt = new Date(data);
    var y = dt.getFullYear();
    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
    var d = dt.getDate().toString().padStart(2, '0');
    return format.replace('YYYY', y).replace('MM', m).replace('DD', d);
});

私有过滤器

1
2
3
4
5
6

new Vue({
    el: '#app',
    filters: {
        dateFormat(data, format) {...}
    }
});

2. 键盘修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

使用键盘码<button v-on:keyup.65="change"></button>

使用别名

v-on:keyup.enter

.enter、.tab、.delete (“删除”和“退格”键)、.esc、.space

.up、.down、.left、.right

自定义按键别名

Vue.config.keyCodes.f1 = 112

新版可以直接监听键盘按键

监听键盘a按下：v-on:keyup.a

3. 自定义指令

directive

自定义指令的三个钩子方法

• bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

• inserted 这个元素已经渲染到界面上之后执行

• update 当元素有更新的时候执行

钩子函数的一些参数

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

​ name：指令名，不包括 v- 前缀。

​ value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。

​ oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用

自定义指令也分为全局自定义指令和私有自定义指令

1
2
3
4
5
6
7
8
9

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  bind(el,binding){}
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el) {
    // 聚焦元素
    el.focus()
  }
})

1
2
3
4
5
6
7
8
9
10

new Vue({
    el: '#app',
    directives: {
        focus: {
            inserted(el) {
                el.focus();
            },
        }
    }
})