vue（2）

vue的基础知识，键值修饰符和vue过滤器。

1. 键值修饰符

1.1 vue允许v-on在监听键盘事件时，添加关键修饰符：

<!--只有在keyCode在等于13时调用submit()方法-->
<input v-on:keyup.13="submit">

<!--记住keyCode是很麻烦的，所以vue为最常用的按键提供了别名-->
<input v-on:keyup.enter="submit">
<!--缩写形式-->
<input @keyup.enter="submit">

1.2 全部按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
以下是2.1.0版本新增的
- .ctrl
- .alt
- .shift
- .meta

1.3 自定义键盘修饰符

// 1.x版本中(了解)
Vue.directive('on').keyCodes.f2 = 113;
// 2.x版本中
Vue.config.keyCodes.f2 = 113;

使用自定义键盘修饰符

1	<input type='text' v-model="name" @keyup.f2="add">

2. 过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

2.1 私有过滤器

HTML元素：

1	<td>{{item.createTime \| dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定义方式：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
      var dt = new Date(input);
      // 获取年月日
      var y = dt.getFullYear();
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
      var d = dt.getDate().toString().padStart(2, '0');

      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
      // 否则，就返回  年-月-日 时：分：秒
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
      } else {
        // 获取时分秒
        var hh = dt.getHours().toString().padStart(2, '0');
        var mm = dt.getMinutes().toString().padStart(2, '0');
        var ss = dt.getSeconds().toString().padStart(2, '0');
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
      }
    }
  }

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

2.2 全局过滤器

// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
  var dt = new Date(input);
  // 获取年月日
  var y = dt.getFullYear();
  var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  var d = dt.getDate().toString().padStart(2, '0');
  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  // 否则，就返回  年-月-日 时：分：秒
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`;
  } else {
    // 获取时分秒
    var hh = dt.getHours().toString().padStart(2, '0');
    var mm = dt.getMinutes().toString().padStart(2, '0');
    var ss = dt.getSeconds().toString().padStart(2, '0');
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }
});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

3. `vue.js`自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

3.1 自定义全局指令

// Vue.directive(指令名称, 对象) 定义全局的指令，eg： v-focus
// 参数1：指令名称定义的时候不要加v-前缀，调用的时候需要加v-前缀
// 参数2：这个对象上有一些指令相关函数，这些函数可以在特定阶段执行相关操作
Vue.directive('focus', {
    bind: function (el, binding){
        // 每当元素绑定到元素上的时候会立即执行bind函数，只执行一次
        // 第一个参数永远是el，表示被绑定了指令的那个元素，el是一个原生的js对象。
        // 元素刚绑定了指令的时候还没有插入到DOM中，这个时候调用focus()方法是无效的
        // el.focus()
    },
    inserted: function (el){
        // 当元素插入DOM中的时候会执行inserted()方法，执行一次
        // 和js相关的操作做最好在inserted()中执行
        el.focus()
    },
    update: function (el){
        // 所在的vNode更新时调用，可能会触发多次
    }
});

// demo01：通过以上分析 v-focus 指令可以简写为
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// demo02：自定义全局颜色指令
Vue.directive('color', {
    bind: function (el, binding){
        // 和样式有关的操作一般在bind中执行
        el.style.color = binding.value
    }
});

3.2 在实例中使用 directives 选项来注册局部指令

directives: {
    font_weight: {
        bind: function (el, binding){
            el.style.fontWeight = binding.value
        }
    },
    font_size: function (el, binding){ //注意：这个 function 等同于把代码写到了 bind 和 update 中去
        el.style.fontSize = parseInt(binding.value) + 'px'
    }
}

1
2
3

<!--vue.js的使用-->
<input type="text" v-model="name" v-focus v-color="'blue'">
<p v-color="'red'" v-font_weight="900" v-font_size="30">{{ time }}</p>

3.3 指令函数可接受所有合法的 JavaScript 表达式

定义指令函数：

Vue.directive('my-style', function (el, binding){
    // 简写方式设置文本,字体大小及背景颜色
    el.style.fontSize = parseInt(binding.value.fontSize) + 'px';
    el.style.backgroundColor = binding.value.color;
    el.innerHTML = binding.value.text;
});

传入了 JavaScript 对象：

1	<p v-my-style="{fontSize: '30', text: '我是文本', color: 'blue'}"></p>

4. 钩子

4.1 钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

4.2 钩子函数参数

钩子函数的参数有：

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

: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。