vue过滤器和修饰符

过滤器

{{变量 | 过滤器名}}

{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值

全局定义

通过Vue提供的filter方法定义:Vue.filter()

参数:过滤器的名字和过滤器执行函数

私有定义

filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器。

注意事项

  1. 函数的第一个参数都是data,也就是我们要过滤的值。
  2. 过滤器可以自定义一些参数
  3. 过滤器函数的返回值就是最终显示的值

 

键盘修饰符

  1. 监听所有按键:v-on:keyup
  2. 监听指定按键:v-on:keyup.按键码

 

vue提供的按键别名

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

自定义按键别名

例子  Vue.config.keyCodes.f1 = 112

 全局定义

 

        // 自定义指令\       // bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      // inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
      // update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。    例子       Vue.directive("color", {         // el:指令所绑定的元素,可以用来直接操作 DOM。         bind(el, binding) {             // 这时指的div           console.log(el);           console.log(binding);           el.style.color = binding.value;         },         inserted(el) {           console.log(el);         },         // 只有更新的时候会执行,第一次渲染不算         update(el) {           console.log(el);         },       });

使用这个方法进行全局定义:Vue.directive()

 

参数:

 

1. 指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)

 

2. 对象,里面包含三个钩子方法

 

  • bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted 这个元素已经渲染到界面上之后执行
  • update 当元素有更新的时候执行

 

3. 这三个方法的参数有哪些

 

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
  • name:指令名,不包括 v- 前缀。
  • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
  • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

 

 

 私有定义

 

  • 实例里有个directives属性,这个属性是个对象
  • 里面放的就是我们指令,这个对象键就是指令的名字,后面的对象就是指令的内容,和全局定义是一样的
  • 简写直接写一个函数,函数名就是指令的名字,其他和全局定义是一样的。

 

 

 

padStart(2,0)不足两位数在前面加0

padEnd(2,0)不足两位数在后面加0

 

这个是字符串提供的方法,所以我们先要保证调用的地方是个字符串

 

这个方法里两个参数 - 

 

显示的位数

 

位数不足时在前面补充的内容

 

 

上一篇:在table中同时渲染多个echarts


下一篇:vue入门 一些的一些简单使用: