• This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The filter

Custom filters for some common text formatting.

Filters are available in two places: double curly brace interpolation and v-bind expressions, which are added to the end of JS expressions and are represented by the “pipe” symbol:

<! - in a pair of curly braces - > {{message | filter}} <! -- in v-bind --><div v-bind:id="id | filter"></div>
Copy the code

Defining filters

Global filters:

Vue.filter('filter'.value= > {})
Copy the code

Local filter:

filter () {
  return xxx;
}
Copy the code

parameter

When the filter form for MSG | filter, filter filter receives a parameter, parameters for MSG.

When the filter form for MSG | filter (‘ a ‘), the filter filter receives two parameters, parameters for MSG, ‘a’

Filter series

{{ msg | filterA | filterB }}
Copy the code

In this example, the filterA argument is MSG and the filterB argument is filterA.

practice

Uppercase

{{ content | capitalize }}
Copy the code
Vue.filter('capitalize'.value= > {
  if(! value) {return };
  return value.charAt(0).toUpperCase() + value.slice(1);
})
Copy the code

Put a comma between the numbers

{{ money | toMoney }}
Copy the code
Vue.filter('toMoney'.value= > {
  if(! value) {return };
  return value.toLocaleString();
});
Copy the code

Number add text “ten thousand”

{{ likes | addWord }}
Copy the code
Vue.filter('addWord'.value= > {
  if(! value) {return };

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

Erection of scaffolding

Install @ vue/cli

The node version must be >8.9. 8.11.0 + is recommended.

About older versions: If you have installed an older version of VUE-CLI (1.x or 2.x) globally before this, you need to uninstall it first. Run: NPM uninstall vue-cli -g or YARN Global Remove VUe-cli.

Installation:

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

After installation, the vue commands can be accessed from the command line.

Check whether the version is correct:

vue --version
Copy the code

Rapid prototyping

Installation:

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

Install the vscode plug-in

Name: Vetur. Use to highlight. Vue file code

Exercise _ Tree components

Data:

data: [
  {
    label: "Level 1".children: [{label: "The secondary 1-1".children: [{label: "Triple the 1-1-1"}}]}, {label: "Level 2".children: [{label: "Secondary 2-1".children: [{label: "Triple the 2-1-1"}]}, {label: "Secondary 2-2".children: [{label: "Triple the 2-2-1"}}]}, {label: "Level 3".children: [{label: "Secondary 3-1".children: [{label: "Triple the 3-1-1"}]}, {label: "Secondary 3-2".children: [{label: "Triple the 3-2-1"}]}]Copy the code

Use scaffolding to build projects

Pull 2.x template (old version)

npm install -g @vue/cli-init
# `vue init`The operation effect will follow`[email protected]`Same vue init webpack my-projectCopy the code

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤