「前端开发」 -

Vue-Extension

Vue —— 扩展

Posted by eliochiu on November 14, 2022

过滤器

过滤器(Filters)是Vue为开发者提供的工具,常用于文本的格式化,主要用在插值表达式与v-bind指令中。

过滤器应该被添加在JavaScript表达式的尾部,并由一个竖线(管道符进行调用)。例如:

1
2
3
<p>{ { message | capicalize } }</p>

<div v-bind:id="rawId | formatId"></div>

上述代码分别调用了capitalize, formatId过滤器,对messagerawId进行了过滤。

在Vue实例中,通过filters节点定义过滤器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const vue = new Vue({
  el: "#app",
  data: {

  },
  methods: {

  },
  filters: {
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    }
  }
});

全局过滤器

上述定义的过滤器是私有过滤器,只能在当前Vue实例控制的区域内生效。如果想定义全局的过滤器,需要使用下面的语句:

1
Vue.filter('capitalize', (str) => {str.charAt(0).toUpperCase() + str.slice(1)});

连续调用

通过连续的管道符,可以连续调用过滤器:

1
{ { value | filter1 | filter2 ... } }

上述代码将value经过filter1的返回值,作为新的值再经过filter2过滤。

传参

过滤器函数里的第一个参数是默认的参数,即调用过滤器的值。如果后面还有参数,加在过滤器函数上:

1
2
3
4
5
filters: {
  filter1(value, arg1, arg2) {
    return value + arg1 + arg2;
  }
}
1
<p>{ { value | filter1(a, b) } }</p>

兼容性

过滤器仅在Vue2.x和1.x中受支持,在Vue3.x 的版本中剔除了过滤器相关的功能。

侦听器

侦听器是Vue提供给开发者的功能,允许开发者监测数据的变化,对数据的变化做出特定的操作。

侦听器通过在Vue实例中添加watch节点实现:

1
2
3
4
5
6
7
8
9
10
11
const vue = new Vue({
  el: '#app',
  data: {username: ''},
  watch: {
    // 监听username的变化
    // oldValue是变化前的值,newVal是变化后的值
    username(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
  }
});

immediate选项

通常情况下,组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立刻被调用,则需要使用immediate选项。

1
2
3
4
5
6
7
8
9
10
11
12
const vue = new Vue({
  el: '#app',
  data: {username: ''},
  watch: {
    username: {
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      immediate: true
    }
  }
});

deep选项

如果我们监听的属性是一个对象,当对象的值发生变化,我们无法监听到。这时就需要使用deep选项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const vue = new Vue({
  el: '#app',
  data: {
    info: {
      id: 1,
      username: ''
    }
  },  
  watch: {
    info: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true
    }
  }
});

监听单个对象属性的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const vue = new Vue({
  el: '#app',

  data: {
    info: {
      id: 1,
      username: ''
    }
  },
  
  watch: {
    'info.username': {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    }
  }
});

计算属性

计算属性指的是通过一系列运算之后,最终得到一个属性值。计算出的属性值,可以被methods或者模板结构使用。

Vue通过computed节点定义计算属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data: {
  r: 0,
  g: 0, 
  b: 0
},

computed: {
  rgb() {
    return `rgb(${this.r}, ${this.g}, ${this.b})`
  }
},

methods() {
  show() {
    console.log(this.rbg);
  }
}

计算属性的特点:

  • 计算属性是一个属性,定义的时候以方法的形式定义,但是以属性使用。
  • 计算属性会根据原始数据的变化自动地变化。