Vue instructions: built-in instructions + custom instructions

Vue directive

Vue instructions refer to a set of special syntax starting with v-

built-in commands

v-text

• The role of the v-text command is to set the content of the label

• The default wording will replace all content, and the difference expression **{ { }}** will only replace the specified content

• Internally supports writing expressions, you can add strings inside, and wrap them in single quotes

v-html

• The role of the v-html directive is to set the innerHTML of the element
• HTML structure in the content will be parsed as tags
• v-html will replace all the content in the node, { { }} will not
• The v-text directive will only be parsed as text no matter what the content is
• Use v-text to parse the text , and use v-html to parse the html structure

Serious attention: v-html has security issues! !

(1) Dynamically rendering arbitrary HTML on a website is very dangerous and can easily lead to XSS attacks

(2) Always use v-html on trusted content, never on user-submitted content! !

v-on

• The role of the v-on directive is to bind events for elements
• The event name does not need to write on , such as onclick directly written as click
• Instructions can be abbreviated as **@**
• Binding methods are defined in the methods attribute
• Inside the method, the data defined in data can be accessed through the this keyword . There is no need to consider modifying the dom element. The focus is on changing the data. After the data is updated, the elements that use the data will be updated synchronously
• The event binding method is written in the form of a function call , and custom parameters can be passed in
• When defining a method, you need to define a formal parameter to receive the incoming actual parameter
• The event is followed by **. Modifier ** can limit the event
• .enter can limit the triggered key to enter

v-if

Writing method:
(1) v-if="expression"

​ (2) v-else-if="expression"

​ (3) v-else="expression"

• The role of the v-if instruction is to switch the display state of the element according to the true or false of the expression
• The essence is to switch the display state by manipulating the dom element
• The value of the expression is true, the element exists in the don tree, and false is removed from the dom tree
• Use v-show for frequent switching, otherwise use v-if, the former consumes less switching
• The template template tag does not affect the page structure for element wrapping, and can be used with v-if, but cannot be used with v-show

注：v-if可以和v-else-if、v-else一起使用，也可以分开使用，但是一起使用的情况下要求结构不能被“打断”。

v-show

• The role of the v-show command is to switch the display state of elements according to true and false (scenes with high switching frequency)
• The principle is to modify the display of the element to realize display and hide
• The content after the instruction will eventually be parsed as a boolean value
• If the value is true , the element is displayed, if the value is false , the element is hidden

备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

v-bind

• The role of the v-bind directive is to bind attributes to elements (for example: src, title, class)
• The complete writing method is v-bind: attribute name = expression
• For abbreviation, v-bind can be omitted directly , only **: attribute name = expression**
• It is recommended to use objects to add and delete classes dynamically
• Distinguished from the interpolation syntax { {}}: the interpolation syntax is often used for the content of the tag body, while v-bind is used for the attributes of the tag body
• v-bind is a one-way binding, data can only flow from data to page

Binding class style

When the data is fixed, we can write directly in the DOM element. If it is dynamic, we will modify the data through vue after binding

Writing ——>:class="xxx" xxx can be a string, object, or array

1. String writing: the class name of the style is uncertain and needs to be specified dynamically
2. Array writing: to bind multiple styles, the number is uncertain, and the name is also uncertain
3. Object writing method: To bind multiple styles, the number and name are determined, but it is not sure whether to use it or not

Binding style style

Writing method——>:style='{fontSize:xxx}' where xxx is a dynamic value, and when the attribute is a compound attribute, use camel case naming method

In addition, it can also be written in the form of an array: :style="[a,b]", where a and b are style objects

v-model

• The function of the v-model instruction is to conveniently set and obtain the value of form elements, which are generally applied to form elements
• The bound data will be associated with the form element value
• v-model: value can be abbreviated as -model, because v-model collects value by default
• v-model is two-way binding, data can not only flow from data to page, but also from page to data

Collect form data:

• Text box: , then the v-model collects the value value, and the user input is the value value.

• Radio button: , then the v-model collects the value value, and you must configure the value value for the label.

• Checkbox:

  • If the value attribute of the input is not configured, then the collection is checked (checked or unchecked, which is a Boolean value). If there are multiple inputs, one check will check all the inputs, and the values ​​in the v-model will change together ( true/false)

  • Configure the value attribute of input:

    (1) The initial value of v-model is non-array, then the collection is checked (checked or unchecked, Boolean value), the situation is the same as the value attribute without input.

    (2) The initial value of v-model is an array, then what is collected is an array composed of values

  Remarks: The three modifiers of v-model:

  ​ lazy: lose focus and then collect data

  ​ number: Convert the input string to a valid number

  ​ trim: enter the transition between the leading and trailing spaces

v-for

• Data generation list structure

• Arrays are often used in conjunction with v-for , objects or functions can also be used

• The syntax is **(item, index) in data**

• item and index can be used in combination with other instructions, or they can be used alone, and no brackets are required for single use

• The update of the array length will be synchronized to the page, which is responsive

• When using v-for, remember to use: key

  When v-for is combined with an array , v-for="(a,b) in list", generally you can write two parameters, parameter a represents each item in the array, and parameter b represents the index value of each item .

  When v-for is combined with objects, v-for="(a,b) in list", generally you can write two parameters, parameter a represents each value in the object, and parameter b represents the key of each object

key in v-for

When using v-for to update the rendered element list, Vue uses the "in-place multiplexing" strategy by default, which is to directly reuse existing elements and not frequently delete and create DOM elements, so when the order of data is changed, This will lead to low data update efficiency or even wrong DOM update, and the key has the function of unique identification, which avoids this situation.So when using v-for, you must develop the habit of writing keys

Interview question: What is the role of the key in react and vue? (The internal principle of the key)

• The role of key in virtual DOM:

  The key is the identifier of the virtual DOM object. When the data changes, Vue will generate a new virtual DOM according to the new data, and then Vue will compare the difference between the new virtual DOM and the old virtual DOM. The comparison rules are as follows:

• Comparison rules:
  (1) The same key as the new virtual DOM is found in the old virtual DOM:
  If the content in the virtual DOM has not changed, use the previous real DOM directly.
  If the content in the virtual DOM has changed, a new real DOM will be generated. Then replace the previous real DOM in the page
  ​ (2) The same key as the new virtual DOM is not found in the old virtual DOM
  ​ Create a new real DOM and then render it to the page

• Problems that may be caused by using index as a key:
  ​ (1) If the data is reversed: adding in reverse order, deleting in reverse order, etc. destroying the order; it will cause unnecessary real DOM updates --> the interface effect is fine, but the efficiency is low.
  ​ (2) If the structure also contains the DOM of the input class: it will generate an error DOM update --> there is a problem with the interface

• How to choose a key in development?

  (1) It is best to use the unique identifier of each piece of data as the key, such as unique values ​​such as id, mobile phone number, ID number, student number, etc.

  (2) If there are no operations that destroy the order of data such as adding in reverse order or deleting in reverse order, it is only used to render the list for display, and there is no problem with using index as the key.

v-clock (no value)

• The essence is a special attribute. After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted

• Using css with v-cloak can solve the problem of {{xxx}} displayed on the page when the network speed is slow

  [v-clock]{ display:none; }: [v-clock] refers to selecting the element whose attribute contains "v-clock" and hiding it. After the Vue instance is created, the element will be displayed again

v-once

• After the initial dynamic rendering of the node where v-once is located, it is regarded as static content
• Data changes in the future will not cause the update of the v-once structure, which can be used to optimize performance

in-for

• Skip the compilation process of its node
• It can be used to skip: nodes that do not use instruction syntax and interpolation syntax will speed up compilation

custom directive

1. Definition syntax:

   (1) Local directive: new Vue({ directives:{ directive name: configuration object} })

   ​ or new Vue({ directives:{ directive name: callback function} })

   (2) Global directive: Vue.directive(directive name, configuration object) or Vue.directive(directive name, callback function)

2. Three commonly used callbacks in configuration objects:

   (1) bind: Called when the instruction element is successfully bound

   (2) inserted: Called when the element where the instruction is located is inserted into the page

   (3) update: Called when the template structure where the instruction is located is re-parsed

3. Remark:

   (1) Do not add v- when the instruction is defined, but add v- when using it

   (2) If the command name is multiple words, use kebab-case (horizontal connection, wrapped in quotation marks) naming method, do not use camelCase (hump named) naming

grammar writing