current position:Home>Vue built-in instruction of front end

Vue built-in instruction of front end

2022-04-29 05:12:28A little rabbit who likes eating radishes

Built in instructions

v-bind
v-model
v-on
v-show
v-if
v-for
 Insert picture description here

v-text

No resolution html label , Replace the text in the label with the full text string

 Insert picture description here

 Insert picture description here
still { { }} To use

v-html

Can parse html label

 Insert picture description here
 Insert picture description here

cookie

cookie( Data stored on the user's local terminal )
 Insert picture description here

v-cloak

There is no property name .
 Insert picture description here
Usage method
 Insert picture description here
When the page network is slow , The page is still loading Vue.js, hide Vue Too late to render , Delete... When loading is complete v-cloak attribute , present Vue Rendered page .
 Insert picture description here

v-once

There is no property name .
 Insert picture description here
effect : After the first rendering , No longer re rendering as data changes

v-pre

 Insert picture description here
v- pre Can be used to prevent precompiling , Yes v- pre The contents inside the tag of the instruction will not be compiled , It will output as is .
Do not add... To labels with instructions or interpolation syntax v-pre, Vue Can't handle it and use it directly .

Custom instruction

vue Instructions are actually native operations dom It was packaged .
Callback function of all instructions this All are Window
You can only give yourself Vue Case use , The instruction to become a global variable needs to be written in the following figure
 Insert picture description here
 Insert picture description here

Naming format :
1. When the instruction name has more than one word , Words are separated by a dash . Include the instruction name in single quotation marks

The definition of location is :

directives:{
//  Define custom instructions 
}

Two ways to customize instructions :

Functional expression :

The cases of calling instructions are
1. Upon successful binding
2. Template re parsing

element Are elements that use instructions
binding Instruction bound data
 Insert picture description here

Object time :

Ability to specify different lifecycles
fbind Is a custom instruction name , Write when using v-fbind
The inner function name cannot be , Just write
 Insert picture description here

summary :
 Insert picture description here

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446012.html

Random recommended