Vue学习（二）

Vue学习 （二）

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

过滤器

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

私有过滤器

1. HTML元素：

<td>{{item.ctime | dataFormat()}}</td>

1. 私有 filters 定义方式：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormatfunction (dateStr) {
      // 根据给定的时间字符串，得到特定的时间
      var dt = new Date(dateStr);

      //   yyyy-mm-dd
      var y = dt.getFullYear();
      //先转字符串,再补全
      var m = (dt.getMonth() + 1).toString().padStart(2,'0');
      var d = dt.getDate().toString().padStart(2,'0');

      // 字符串补全: padStart()用于头部补全，padEnd()用于尾部补全。参数一: 补全完毕之后字符串的总长度,参数2,用来补全的字符串。

        var h = dt.getHours().toString().padStart(2,'0');
        var mm = dt.getMinutes().toString().padStart(2,'0');
        var s = dt.getSeconds().toString().padStart(2,'0');



        return `${y}-${m}-${d} ${h}:${mm}:${s}`

    }
  }

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

全局过滤器

Vue.filter('dateFormat', function (dateStr) {
      // 根据给定的时间字符串，得到特定的时间
      var dt = new Date(dateStr);

      //   yyyy-mm-dd
      var y = dt.getFullYear();
      //先转字符串,再补全
      var m = (dt.getMonth() + 1).toString().padStart(2,'0');
      var d = dt.getDate().toString().padStart(2,'0');

      // 字符串补全: padStart()用于头部补全，padEnd()用于尾部补全。参数一: 补全完毕之后字符串的总长度,参数2,用来补全的字符串。

        var h = dt.getHours().toString().padStart(2,'0');
        var mm = dt.getMinutes().toString().padStart(2,'0');
        var s = dt.getSeconds().toString().padStart(2,'0');



        return `${y}-${m}-${d} ${h}:${mm}:${s}`

    });

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

键盘修饰符以及自定义键盘修饰符

2.x中自定义键盘修饰符

1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

Vue.config.keyCodes.f2 = 113;

1. 使用自定义的按键修饰符：

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

自定义指令

1. 自定义全局和局部的 自定义指令：

    // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }

1. 自定义指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">