Home > Web Front-end > JS Tutorial > body text

How to implement custom directives in Vue?

亚连
Release: 2018-06-07 17:42:26
Original
2713 people have browsed it

This article mainly introduces the usage of Vue’s native instructions and custom instructions. Friends in need can refer to

1. Native instructions

When I started learning Vue, I saw the word "instruction" when I looked at the official website. I was stunned, what? What is the instruction? Later, as we read on, "v-for", "v-show" and "v-if" like this are called instructions. Later, when I was almost done playing with Vue, when I started writing projects, I found that there were only a few common instructions, such as "v-if" "v-show" "v-model" "v-for" "v -bind” “v-on” .

You can think of this as syntax sugar or as a command. Among these common instructions, the general usage method is as follows:

1.v-text: string Usage: To update the textContent of the element, update the textContent of the part, you need to use {{Mustache}} interpolation.

2.v-show: any Usage: Switch the display css attribute of the element based on the true or false value of the expression.

3.v-if: any Usage: Render elements based on the true and false conditions of the expression. The element and its data bindings/components are destroyed and recreated on switch. If it is