前端之vue基础学习第二天

四.过滤器

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

1.私有过滤器

1.基本格式

（1)定义一个私有过滤器

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

在vm2中定义过滤器的时候，虽然它加了s，但是它也是对象，不是数组

var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      //定义私有过滤器：过滤器有两个条件 【过滤器名称 和 处理函数】
      filters: {      
        dateFormat: function (dateStr, pattern = '') {}     
    })

（2）调用私有过滤器

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器。

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

2.全局过滤器

1.过滤器的基本使用

（1）在js中定义一个全局过滤器

​ 所谓的全局过滤器，就是所有的VM实例都共享的

Vue.filter('过滤器的名称', function (msg) {}


过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器的名称', function (data) {
      return data + '123'
    })
    

（2）调用过滤器

过滤器调用时候的格式    {{ name | 过滤器的名称 }} 

<p>{{ msg | dateFormat}}</p>

2.过滤器也可以传参

过滤器的第一个参数是拿到调用过滤器的第一个值，其他还可以传递多个参数

（1）定义一个过滤器
Vue.filter('dataFormat', function (item.ctime,arg ) {}

（2）调用过滤器

<p>{{ item.ctime | dateFormat("快乐")}}</p>

3.可以多次调用过滤器

（1）定义过滤器

Vue.filter('dataFormat', function (msg,arg ) {}
Vue.filter('text', function (msg) {}

（2）调用过滤器

<p>{{msg | dateFormat("快乐")| text}}</p>

4.应用

（1）定义一个全局过滤器

补充Es6知识点

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

也就是说，当出现1秒2秒，1分两分的时候，会自动补上0

Vue.filter('dataFormat', function (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}`;
  }

});

（2）调用过滤器

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

如果不传参数dateFormat()，可以写成pattern = ''，这是ES6里面参数默认值的用法

五.按键修饰符

1.已有的按键修饰符的使用

<input type="text" class="form-control" v-model="name" @keyup.enter="add">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

2.自定义按键修饰符

（1）基础

当有些按键没定义的时候，可以直接用它的数字码

<input type="text" class="form-control" v-model="name" @keyup.13="add">
//enter=13

（2）进阶

但是数字码不好记，所以可以自定义一个，也就是给他起一个名字

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

Vue.config.keyCodes.f2 = 113;

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

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

六.自定义指令

1.自定义全局指令

和js行为有关的，最好在inserted中在执行；和样式有关的，最好在bind中执行

参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用

参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

2.钩子函数

（1）一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

（2）指令钩子函数会被传入以下参数：

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

• binding
  

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

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

 Vue.directive('focus', { 
 
 <------------函数方法一：bind----------------------------->
      bind: function (el) {
  【 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
   注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
    在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
    因为，一个元素，只有插入DOM之后，才能获取焦点】
  el.focus()
      },
      
<------------函数方法二：inserted---------------------------->
      inserted: function (el) {  
//inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
        el.focus()
        
//和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
      },
      
 <------------函数方法三：updated--------------------------->      
      updated: function (el) {  
      // 当VNode更新的时候，会执行 updated， 可能会触发多次

      }
    })

2.全局指令应用

（1）自定义的全局指令

   
   // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
    Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
      每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
      注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
        // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
        //  因为，一个元素，只有插入DOM之后，才能获取焦点
        // el.focus()
        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;
        }
      }

（2）自定义指令的使用方式：

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