1. Vue filter:

1. Knowledge combing

Vue allows developers to customize filters, which are usually used for some common text formatting.

For example, the text formatting of the date in the [Car Brand Management] case. As shown below:

After the date of the data is obtained, the effect we directly display may not be what we need, so before displaying, we need to customize a process, and the result after processing is used for display, so it is called "filtering " .

The specific case has realized the three functions of adding, deleting and checking, and the implementation of each step is written in detail in the blog

You can refer to the following links for learning:

Comprehensive case of Vue instructions - car brand management_Siobhan. Mingxin's Blog-CSDN Blog

Filters can be used in two places: interpolation expressions or v-bind expressions. Filters should be added at the end of JavaScript expressions, indicated by the "pipe" character , understood as syntax : { {xxx | filter } } or <p: v-bind="title| filter "></p>

There are two types of filters , vue allows the definition of private filters and global filters.

Private filter: private filter can only be used in the area controlled by the bound vue instance
Global filter: shared by all vm instances

Next, learn with the case~~~~~~

2. Car brand management case (time format)

private filter:

main.js

index.html

Global filter:

Use the filter, after the Chinese brand name + English:

2. Vue keyboard modifiers

In web pages, sometimes there is such a need to monitor the keyboard key up response event, for example: in the above example, after the user enters the id and name, a brand is not added through the Add button, but the name input box is pressed Press the enter key to complete the addition

Add using enter to automatically add

On the Vue.js official website: https://cn.vuejs.org/v2/guide/events.html#key modifiers , there are instructions for key modifiers

keyup.keyboard operation = "realized function"

Here we still use car brand management to complete

<label>Name: 
<!-- keyup监听键盘抬起事件:enter表示监听enter键抬起 --> 
<input type="text" class="form-control" v-model="name" @keyup.enter="add()">
</label>

*: Vue sets an alias for the common keys of the keyboard . In the keyup event, there is no need to remember the keycode of this key , just use the alias directly

        .enter         . tab

        .delete          .esc         .space

        .up .down      .left          .right

Custom keyboard :

If there is no key we want to monitor by default, you can also use its corresponding keycode or customize an alias for it

<input type="text" class="form-control" v-model="name" @keyup.113 ="add()">

// Custom keyboard modifiers

Vue.config.keyCodes.f2=113

//

<input type="text" class="form-control" v-model="name" @keyup.f2 ="add()">

*: Note that some keys may be responded by the system, such as the F1 and Tab keys of the browser , then when these keys are defined, the event will be captured, that is, the system will respond first, even if it is built-in by vue The same is true for keys, so when there are custom keyboard keys, you need to have some screening for the selection of keys. Keyboard key code comparison table : you can use Baidu

Project source code:

Comprehensive Case of Vue Instructions—Car Brand Management (Project Combat)-Node.js Documentation Resources-CSDN Download

Vue filters + Vue keyboard modifiers

1. Vue filter:

1. Knowledge combing

2. Car brand management case (time format)

private filter:

Global filter:

2. Vue keyboard modifiers

Project source code:

Guess you like