这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

过滤器

自定义过滤器，用于一些常见的文本格式化。

过滤器可用在两个地方：双花括号插值和 v-bind 表达式，添加在JS表达式的尾部，由“管道”符号表示:

 <!-- 在双花括号中 --> 
{{ message | filter }}

 <!-- 在 v-bind 中 --> 
<div v-bind:id="id | filter"></div>

定义过滤器

全局过滤器：

Vue.filter('filter', value => {})

局部过滤器：

filter () {
  return xxx;
}

参数

当过滤器形式为 msg | filter 时，filter过滤器接收一个参数，参数为msg。

当过滤器形式为 msg | filter('a')时，filter过滤器接收两个参数，参数为msg, 'a'

过滤器串联

{{ msg | filterA | filterB }}

在这个例子中，filterA的参数为msg，filterB的参数为filterA。

练习

首字母大写

{{ content | capitalize }}

Vue.filter('capitalize', value => {
  if(!value) { return };
  return value.charAt(0).toUpperCase() + value.slice(1);
})

数字中间加上逗号

{{ money | toMoney }}

Vue.filter('toMoney', value => {
  if(!value) { return };
  return value.toLocaleString();
});

数字添加文字“万”

{{ likes | addWord }}

Vue.filter('addWord', value => {
  if(!value) { return };

  if(value > 10000) {
    return ( value / 10000).toFixed(1) + '万';
  }
  return value;
});

安装脚手架

安装@vue/cli

node 版本要求： >8.9，推荐使用8.11.0 +。

关于旧版本：如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x)，那么需要先卸载掉。运行：npm uninstall vue-cli -g 或 yarn global remove vue-cli。

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，可以在命令行中访问vue命令。

检查版本是否正确：

vue --version

快速原型开发

安装：

npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global

安装vscode插件

名字：Vetur。用于高亮.vue文件代码

练习_树形组件

数据：

data: [
  {
    label: "一级 1",
    children: [
      {
        label: "二级 1-1",
        children: [
          {
            label: "三级 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 2",
    children: [
      {
        label: "二级 2-1",
        children: [
          {
            label: "三级 2-1-1"
          }
        ]
      },
      {
        label: "二级 2-2",
        children: [
          {
            label: "三级 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 3",
    children: [
      {
        label: "二级 3-1",
        children: [
          {
            label: "三级 3-1-1"
          }
        ]
      },
      {
        label: "二级 3-2",
        children: [
          {
            label: "三级 3-2-1"
          }
        ]
      }
    ]
  }
]

利用脚手架搭建项目

拉取 2.x 模板 (旧版本)

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤

【快速入门Vue系列】第二十二篇：过滤器的使用、以及脚手架如何安装

过滤器