Vue框架学习笔记-7

Vue-cli项目中的mixin

Vue-cli 项目中的 mixin 是一种强大的功能，允许你在多个组件之间共享可复用的方法和/或选项。Mixin 本质上是一个对象，它可以包含组件选项中的任意选项，如数据、方法、生命周期钩子等。当组件使用 mixin 时，所有 mixin 选项将被“混入”该组件本身的选项中。
首先定义一个，在根目录下创建一个mixin文件夹，并创建js文件。

文件中写如下内容，可根据实际情况定义：

// mixin混入：保存公共数据：可以定义多个mixin
// 导出mixin
export const mixin1={
    data(){
        return{
            index:0
        }
    },
    methods:{
        clickli(i){
            this.arr[this.index].state=false;
            this.index=i;
            this.arr[i].state=true;
        }
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如何使用mixin：

<template>  
  <div>  
    <!-- 组件模板 -->  
  </div>  
</template>  
  
<script>  
// 引入 mixin  
import myMixin from './myMixin';  
  
export default {  
  mixins: [myMixin],  
  // 组件的其它选项...  
}  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vue-cli项目中的filter过滤器

在 Vue.js 中，过滤器（filters）是一种在表达式中使用的方式，用于将文本格式化为不同的形式。然而，在 Vue 2.x 中，过滤器主要用于文本插值表达式中，比如 {{ message | capitalize }}。不过，从 Vue 3.x 开始，官方已经移除了对过滤器的支持，官方推荐的做法是使用计算属性（computed properties）或方法（methods）来替代过滤器的功能。

搭建filter文件结构

其中index.js中，配置在程序中用到的过滤器，如下，分别配置了三个过滤器，分别为：sub，subtime，subnum。

const sub = (value, num = 5) => {
if (value.length >= num) {
    return value.substring(0, num) + "......";
} else {
    return value;
}
}

const subtime = (value) => {
let m = parseInt(value / 1000 / 60);//分
let s = parseInt(value / 1000 % 60);//秒

if (s < 10) {
    s = "0" + s;
}
if (m < 10) {
    m = "0" + m;
}
return m + "分" + s + "秒"
}

const subnum = (value) => {
if (value <= 10000) {
    return value;
}
if (value > 10000 && value <= 100000) {
    return String(value / 10000).substring(0, 3) + "W"
}
if (value > 100000) {
    return "10W+";
}
}

export { sub , subtime,subnum}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34